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

Blogger 網誌範本模版應用教學：Blogger ( Blogspot ) 在做文章分類時，只有單項的「label」標籤能使用，在需要有層次的分類時就沒這麼方便。這篇 Label 判斷式與 loop 用法，就是在看到這種侷限性而因應而生的點子，目的是讓訪客在網站的文章頁面能夠依分類與標籤，找查相關項目文章。

分類與標籤在製作時，概念上，是利用 Blogger 標籤 ( Label ) 英文與中文前後排列的關係，運用 loop 迴圈調用「data:post.labels」，再使用「data:label.isLast」抽取「Label」，而排列出前 ( 標籤 ) 與最後 ( 分類 ) ，並分別列出分類與標籤。

這也是，每次在 Blogger 後台撰稿發佈文章後，觀察在「發表文章」所列出的全部文章，英、中文標籤前後排列關係，而轉個彎製作出來的「分類」與「標籤」。

所以，如果依照本篇的設置方式，佈置文章的「分類」與「標籤」。文章在設定「標籤」類別時，須使用英文標籤；文章在設定「分類」類別時，就須使用中文標籤。

這裡我們觀察下圖，在分類與標籤中，也設置了 a 連結的「rel='tag'」，並設定了Facebook「article:section」與「article:tag」data Meta。

雖然，Facebook Meta 資料放置在網頁的「<head>」以外，在做 FB Debug URL 除錯時會顯示錯誤。但經由「SEO 工具」還是能夠檢測出我們為文章設定的「分類」與「標籤」類別資訊。(* 這部份，「article:section」與「article:tag」Meta，可視需求而刪除。)

另外，本篇在設置時，可與「Blogger 標籤頁面加入分類小標籤」一起做佈署。兩者一起做設置，可以讓訪客在網誌中找文章時，方便很多。

設定佈署的過程中，我們會將「分類」與「標籤」放置於文章的最下方。另外，「標籤」的部份也用 CSS 添加了「#」，類似 Twitter 主題標籤「#hashtag」的樣式。好的，接下來就可以開始動工了！

文章更新 ( 2017/01/07 )：
由於 Blogger 系統更改了標籤排序，預設標籤改為中文在前英文在後的方式呈現。所以，如果要使用本篇的設定方式，幫網站部署「分類、標籤」，需使用以下設定值。

前往 Blogger 後台的「設定→語言和格式→語言」，改變網站整體語言佈局為『英文 ( 美國 ) -English(United States)』。

在設定了以上步驟的網站語系變更後，本篇所做的代碼設定即可正常運作。不過，後遺症就是，網站中的留言板、日期或是訪客留言的留言信件，有部份語言會因此而變成英文的狀態。

設置流程

文章中加入分類與標籤判斷式
文章在設定中文「標籤」類別時的顯示情形

設置前準備

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

設定教學

Step 1

文章中加入分類與標籤判斷式

首先，在 Blogger HTML 範本中，搜尋「<data:post.body/>」。範本中，可以找到三處有「<data:post.body/> ( 文章區塊 )」的程式碼片段。

(* HTML 範本搜尋技巧，可參考：「Blogger 文章底部自動加入版權宣告」的「Step1.找查需要置入程式代碼的 HTML 區段」查閱相關說明。)

將以下代碼，放置於第三個「<data:post.body/>」的下方。

(* 如果你的 HTML 範本中只有兩個「<data:post.body/>」，那就將代碼放在第二個「<data:post.body/>」之下。)


<span class='post-category-tag'>
<!-- 文章分類 -->
<span class='post-category-width'>
<span class='post-category-title'>分類：</span>
<b:loop values='data:post.labels' var='label'> <!-- 迴圈值：文章標籤，應用項目 label -->
<b:if cond='data:label.isLast == &quot;true&quot;'> <!-- 如果標籤是最後一個 -->
<meta expr:content='data:label.name' property='article:section' /> <!-- FB data meta 視需求添加 -->
<a expr:href='data:label.url' expr:title='data:label.name' rel='section'> <!-- 視需求使用 tag or section -->
<span class='post-category'> <data:label.name/></span> <!-- 顯示標籤名稱 -->
</a>
</b:if>
</b:loop>
</span>

<!-- 文章標籤 -->
<span class='post-tag-width'>
<span class='post-tag-title'>標籤：</span>
<b:loop values='data:post.labels' var='label'> <!-- 迴圈值：文章標籤，應用項目 label -->
<b:if cond='data:label.isLast != &quot;true&quot;'> <!-- 如果標籤不是最後一個 -->
<meta expr:content='data:label.name' property='article:tag' /> <!-- FB data meta 視需求添加 -->
<a expr:href='data:label.url' expr:title='data:label.name' rel='tag'>
<span class='post-tag'><data:label.name/> </span><!-- 顯示標籤名稱 -->
</a> ,
</b:if>
</b:loop>
</span>
</span>

代碼說明：

判斷式與 loop 說明可從上方代碼中觀察。
FB data meta 則可視需求添加。
文章 a 連結的「rel='section'」，可以視情況更改為「rel='tag'」標記。
需要將分類與標籤分行，可在「」的上方加入「<br/>」。

接著在 HTML 範本中的「</head>」之前加入以下 CSS 代碼，即可完成設定。CSS 的部份，可以視情況使用「<style type='text/css'> ~ </style>」包起來。


span.post-category-title, span.post-tag-title{font-weight: 700;}
span.post-tag {text-transform: uppercase;}
span.post-tag:before{content:&quot;#&quot;}
span.post-tag-width {margin: 0px 0px 0px 15px;}

代碼說明：

分類與標籤標題文字設定寬度為 700。
標籤文字設定為大寫。
標籤前方加入「#」。
標籤「文章標籤」與左方「文章分類」的距離為「margin:( 左 ) 15px;」。
(* 已經為每個區塊加上「class」，可視情況添加「margin: 上px 右px 下px 左px;」調整距離。)

Step 2

文章在設定中文「標籤」類別時的顯示情形

按照了「Step1.」的佈署後，文章設定中文「標籤」並不會顯示錯誤。只是「分類」就沒有明確的指向了。

例如，下圖「Twitter 手機簡訊、APP 兩步驟驗證設定」文章中的標籤與分類。

由於系統自動排列的標籤「雙重驗證」為最後一個，所以「Step1.」代碼中「分類」在抽取時，就以「雙重驗證」當作取樣目標了。

小結

在安置過「Step1.」的代碼後，每次為文章下標籤，最低標籤數量為兩個。如果，只設定一個標籤，會以「分類」的代碼為優先，「標籤」中的數值就會變成空的。

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

Blogger 搜尋頁面加入分類標籤

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

留言

申杰3/25/2016 10:34 上午
我是大陆的，谢谢你的教程，很有用。加上了分类，默认是最后一个标签成为分类。然后在模板中添加一个分类的链接到标签页的链接即可。谢谢了。
回覆刪除
回覆
Unknown7/03/2016 1:57 下午
不好意思我想請問
想請教有的blog，似乎能在首頁列出各分類的文章清單(或並有一張照片)
例如智悲德育網：http://www.zhibeidy.com/
有上師法語、在線閱讀、生命教育..等各分類列表
google blogger能做出來嗎?
感謝您
回覆刪除
回覆

新增留言

◎ 留言板中提問「代碼」問題，可至『留言代碼轉換器』轉換代碼。

搜尋此網誌

技研可樂