[unboxing][hrads]

熱門標籤

☆重要訊息:Blogger 官方近期推出的「RWD 自適應範本主題」沒有『行動服務』的設定選項,如果您是觀察「技研可樂」裡的文章做自己網站的設計,使用「自適應範本主題」的使用者可以直接依「技研可樂」文章裡的『電腦版』方式做設定即可完成佈置,不需要開啟『行動服務』。☆

  Blogger 自訂網址應用 CloudFlare HTTPS 系列文章:「CloudFlare

  Blogger HTTPS 相關文章列表:「HTTPS

  Blogger AdSense 廣告放置與相關自適應廣告佈屬文章列表:「AdSense

  Blogger 常用頁面判斷式用法一列表:「Blogger 常用頁面判斷式用法一覽表

Blogger 標籤頁面加入分類小標籤

Blogger 文章分類時不若 Wordpress 有「tag」及「category」兩種分類方法,只有單項的「label」標籤能使用,在做較有結構性或階層式的分類時就有所侷限!這篇另類的 Label 判斷式用法,就是在看到這種侷限性而因應而生的 idea,目的是讓訪客在網站的標籤頁面能夠看到小品項分類。

做法上是應用「Label 判斷標記」及「小工具中的:標籤」為標籤頁面製作出細目分類,進而製造出有階層式效果的分類品項頁面,讓訪客在進入主標籤頁面後,能在該頁面找到主標籤下依存的小類別標籤。



實際效果如下圖

訪客點選網頁清單導覽列的「網站架設」分類,網頁在跳轉後在該頁面顯示與網站架設相關的所有分類,且只在「網站架設」標籤頁面出現。

Blogger 標籤頁面加入分類小標籤_001



相關連結

範例 DEMO 頁面|電腦版網頁:「電腦版

範例 DEMO 頁面|行動版網頁:「行動版



設置流程

  1. 觀察需放入細目標籤的位置
  2. 找查需要置入程式代碼的 HTML 區段
  3. 加入細目標籤專用「<b:section> 標記」
  4. 新增一個標籤小工具
  5. 使用 Label 判斷標記包住標籤小工具
  6. 讓分類小標籤,在行動版網頁顯示

設置前準備

若對編譯 Blogger 的 HTML 模板還不太熟悉,建議先執行『備份 Blogger 模板 (範本)』的動作,以防原始模板資料遺失。



設置教學

Step 1

觀察需放入細目標籤的位置

前往 Blogger 後台,點選「版面配置」,在版面配置頁面中我們先觀察一下需要放入標籤的位置。一般,訪客在點選網站中的標籤後,網頁會跳轉至標籤頁面,而該頁面的區塊則是下圖看到「網誌文章」的地方。

Blogger 標籤頁面加入分類小標籤_101



若我們在網誌文章上方有用小工具加入廣告或其他物件,可依自己的需求加裝在適當的位置,這裡我們可以看到技研可樂的最上面一個小工具是「Google 自訂搜尋 2」,而且該小工具是從其他的「<b:section> 底座」安裝,然後才拖拉至目前位置的「<b:widget> 可移動塊」

在這邊我們可以將細目標籤專用「<b:section> 底座」加裝在「Google 自訂搜尋 2 <b:widget>」的上方,也就是包含網誌文章的「<b:section> 底座」上方。

(* 你的安裝位置可能不一樣,可以依自己的情況做靈活性的選擇 )



Step 2

找查需要置入程式代碼的 HTML 區段

接著在後台中,點選「範本 〉編輯HTML」。

在程式碼頁框裡面用滑鼠左鍵點一下,並按下鍵盤組合件「Ctrl + f」( 按著 Ctrl 再按一下 f ) ,在出現的搜尋框中輸入「class='main'」按下鍵盤『Enter』

Blogger 標籤頁面加入分類小標籤_201
上圖為 HTML 範本裡的程式代碼搜尋方法



在這裡可以看到「<b:section class='main' id='main' showaddelement='no'> 標記的底座」,往下找應可看到其他拖拉過來的「<b:widget>」及包含「網誌文章 id:Blog1」等物件

Blogger 標籤頁面加入分類小標籤_202



技巧小貼士:
在 Step1. 的圖中的「網誌文章」上方沒有出現「新增小工具」的虛線框格,是因為「網誌文章」為 Blogger 預設的重要區塊,系統防止使用者誤刪所以就將它隱藏起來了。需要顯示則可以將「showaddelement='no'」更改為「showaddelement='yes'」,設定完成「<b:section> 底座」即會顯示。

<b:section> 標記」除了和 <div> 物件一樣需在設定時加入絕對性的 id 值外,class 也可依自己的喜好選擇加入。

另外「<b:section> 標記」也可使用下列屬性:
maxwidgets - 設定區塊所能容納的「<b:widget>」數量上限;不指定時則為無限。
growth - 設定「<b:widget>」排列方式為左右 ( horizontal ) 鄰接或上下 ( vertical ) 堆疊,預設為「vertical」。



Step 3

加入細目標籤專用「<b:section> 標記」

在這裡我們新增一個細目標籤專用「<b:section> 底座」到「<b:section class='main' id='main' showaddelement='no'> 標記」的上方。將下方程式代碼加入並按下『儲存範本』


<b:section class='slabel' id='slabel' maxwidgets='10' showaddelement='yes'/>

如下圖

Blogger 標籤頁面加入分類小標籤_301



程式代碼說明:
新增的細目標籤「<b:section> 標記」id 及 class 的部份使用 slabel 名稱,是方便日後在範本中做搜尋變更,另外可以看到在這裡「<b:widget>」數量上限設置為 10 個,並將「新增小工具」設定在後台的「版面配置」中顯示。

若對 blogger 模版熟稔,可依自己的需求選擇是否另外加入「<b:section> 標記」,建議可以新增一個細目標籤專用「<b:section> 底座」,若您跟著技研可樂一塊學習的話,我們日後還會用到 id 及 class 數值。



Step 4

新增一個標籤小工具

接著,點選「版面配置」,在拖拉編輯頁中可以看到我們加入的細目標籤專用「<b:section> 底座」出現了,這邊點擊『新增小工具』,新增一個「標籤」小工具。

Blogger 標籤頁面加入分類小標籤_401



以技研可樂的分類來說,「網站架設」為大分類「Bloggger、Namecheap、Feeds、Outlook.com」為延伸分類,「將選取的標籤」中四個細目分類選好後可以填入小工具標題及勾選「標籤雲」,然後按下『儲存』及右上方的『儲存排列方式』。

( * 在這裡你可依自己網站想要設置的分類法做設定 )

Blogger 標籤頁面加入分類小標籤_402



Step 5

使用 Label 判斷標記包住標籤小工具

接著同樣的在後台中點選「範本 〉編輯HTML」,在搜尋框中輸入「class='slabel'」,按下鍵盤『Enter』

Blogger 標籤頁面加入分類小標籤_501



接著將它下一格左邊的黑色「向右箭頭」點開,在這裡可以看到「<b:section class='slabel' id='slabel' maxwidgets='10' showaddelement='yes'>」的完整程式代碼

Blogger 標籤頁面加入分類小標籤_502



我們使用以下程式碼,包住「<b:includable id='main'>」以下及「</b:includable>」以上的部份,在按下『儲存範本』後即可看到效果,而且小工具只會在「網站架設」的標籤頁面顯示。

(* 「網站架設」為技研可樂的大分類設定值,實際情況可依自己的需求做調適 )


<b:if cond='data:blog.searchLabel == &quot;網站架設&quot;'>
此段內容只在網站架設標籤頁顯示
</b:if>

完整的程式代碼如下:

<b:section class='slabel' id='slabel' maxwidgets='10' showaddelement='yes'>
  <b:widget id='Label1' locked='false' title='網站架設類別的所有分類' type='Label'>
    <b:includable id='main'>
 <b:if cond='data:blog.searchLabel == &quot;網站架設&quot;'><!-- 標籤開始加在這 -->
  <b:if cond='data:title'>
    <h2><data:title/></h2>
  </b:if>
  <div expr:class='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;'>
    <b:if cond='data:display == &quot;list&quot;'>
      <ul>
      <b:loop values='data:labels' var='label'>
        <li>
          <b:if cond='data:blog.url == data:label.url'>
            <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
          <b:else/>
            <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
          </b:if>
          <b:if cond='data:showFreqNumbers'>
            <span dir='ltr'>(<data:label.count/>)</span>
          </b:if>
        </li>
      </b:loop>
      </ul>
    <b:else/>
      <b:loop values='data:labels' var='label'>
        <span expr:class='&quot;label-size label-size-&quot; + data:label.cssSize'>
          <b:if cond='data:blog.url == data:label.url'>
            <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
          <b:else/>
            <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
          </b:if>
          <b:if cond='data:showFreqNumbers'>
            <span class='label-count' dir='ltr'>(<data:label.count/>)</span>
          </b:if>
        </span>
      </b:loop>
    </b:if>
    <b:include name='quickedit'/>
  </div>
  </b:if><!-- 標籤結束加在這 -->
</b:includable>
  </b:widget>
</b:section>

程式代碼說明:
上方的程式碼中的「<b:widget id:Label1」,你的 id 值可能和技研可樂的 id 值不同,在版面配置中加入了三個「Label」那最後一個數值就是「<b:widget id:Label3」。而「locked='false'」則是指定這個「<b:widget>」是否在版面配置中鎖定並不可拖動,數值「'true'」則為鎖定。

若需在網站的所有標籤頁面都顯示內容物的話,那我們可以這樣使用


<b:if cond='data:blog.searchLabel'>
此段內容在網站的所有標籤頁顯示
</b:if>



Step 6

讓分類小標籤,在行動版網頁顯示

要讓分類小標籤的小工具,在行動版網頁顯示,必須開啟 Blogger 的「自訂行動範本」功能。開啟自訂行動範本可參考:「自訂 Blogger 行動版範本與自適應設計原理|STEP 1:使用自訂 Blogger 行動版範本」。

在開啟「自訂行動範本後」,將「mobile='yes'」加入到「b:widget id='Label1'」裡面,即可讓小工具在行動版網頁中顯示。如下代碼:

<b:widget id='Label1' locked='false' mobile='yes' title='網站架設類別的所有分類' type='Label'>



以上步驟在設置完成後,即可在單一的「網站架設」標籤頁面看到效果,若需設置多個標籤則需一個一個裝設。建議不要裝設過多,「範本」內容量過大瀏覽器在撈網站資料的時候,會需要較久的讀取時間。



小結

另外若需使用新增小工具裡的「HTML/JavaScript」,自行設置表格或圖片或廣告在標籤頁面顯示,那我們可以在安裝完「HTML/JavaScript」後,在「範本」中將需要包起來的部份改成下面這個樣子


<b:widget id='HTML9' locked='false' title='' type='HTML'>
<b:includable id='main'>
<!-- 標籤開始加在這顯示標題 -->
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  
  <b:if cond='data:blog.searchLabel == &quot;網站架設&quot;'><!-- 標籤開始加在這不顯示標題 -->
  <div class='widget-content'>
    <data:content/>
  </div>
  </b:if><!-- 標籤結束加在這 -->
  
<b:include name='quickedit'/>  
</b:includable>
</b:widget>

(* 上面這一段「HTML/JavaScript」即是指示在「網站架設」標籤頁面不加入「<b:widget>」標題,只顯示內容。若需顯示「<b:widget>」標題,可將標籤判斷式放在「<!-- 標籤開始加在這顯示標題 -->」的位置 )



相關文章

Blogger 搜尋頁面加入分類標籤

[教學] Blogger 文章頁面製作分類與標籤

Blogger 製作 Breadcrumb 文章標籤導航麵包屑



分享

加入代碼加入代碼

若您在閱覽文章時,於文章頁面找不到相關的應用主題,歡迎移駕到『站內留言』一起研究討論,謝謝!

使用超連結:<a href="https://www.techcoke.com/">技研可樂</a> =『技研可樂

加入圖片 ( https ):支援 HTTPS 網址型式的 .jpg .png 格式圖檔,直接貼入 HTTPS 圖片網址即可在留言時顯示!

支援非嵌入 Youtube 視頻:https://www.youtube.com/watch?v=hdfSISI24Xk (* 瀏覽器網址列中的 Youtube 網址 )

&&amp;'&#039;"&quot;<&lt;>&gt;
技研可樂 © 2013 - 2017

Contact Form

Name

Email *

Message *