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

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

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

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


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

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

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

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


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

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

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



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

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

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



相關連結

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

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



設置流程

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

設置前準備

若對編譯 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 兩步驟驗證設定」文章中的標籤與分類。

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



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

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



小結

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


相關文章

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

Blogger 搜尋頁面加入分類標籤

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


留言

  1. 我是大陆的,谢谢你的教程,很有用。加上了分类,默认是最后一个标签成为分类。然后在模板中添加一个分类的链接到标签页的链接即可。谢谢了。

    回覆刪除
  2. 不好意思 我想請問
    想請教有的blog,似乎能在首頁列出各分類的文章清單(或並有一張照片)
    例如智悲德育網:http://www.zhibeidy.com/
    有上師法語、在線閱讀、生命教育..等各分類列表
    google blogger能做出來嗎?
    感謝您

    回覆刪除
    回覆
    1. 是類似下面這張圖的樣式嗎,以「智悲法音、智悲慈愛、蓮花小組」這樣的以類別列表嗎?
      https://lh3.googleusercontent.com/-3My0O0XF9ac/V3itav5iZiI/AAAAAAAAIVg/O5jYPCJoA2kVBEVEBPnEsFkQlS17zCETwCCo/s512/blogger-post-label-category-section-tag-comment-01.jpg

      如果是的話,技研可樂「[教學] 挑選特定標籤製作 BLOGGER 文章置頂功能」這一篇的代碼即可製做出同樣的效果;可將「url: '/feeds/posts/default/-/標籤/?alt=json-in-script&max-results=1'」當中的『max-results=1』變更為『max-results=5』即可顯示列表出 5 篇文章「標題+縮圖」,不過 CSS 的部份需要全部重拉。概念上類似技研可樂首頁下面這兩張圖,都是上方那篇文章的 CSS 應用,導出特定標籤的所有文章,並設為五篇(圖一)與六篇(圖二)。

      (圖一)
      https://lh3.googleusercontent.com/-vuoMqsQCwEY/V3ivx_s5TkI/AAAAAAAAIVs/Fp3x8CMq0mMfCi4dkp6H8R0RupTszm-TQCCo/s853/blogger-post-label-category-section-tag-comment-02.jpg


      (圖二)
      https://lh3.googleusercontent.com/-TYj1DWkSZ_Q/V3iw7vPrIyI/AAAAAAAAIV4/ed9m4-BcSjAQLo7dzc_n89i1sSGD4fO6wCCo/s848/blogger-post-label-category-section-tag-comment-03.jpg

      刪除
    2. 對 就是這樣
      我試看看
      感謝您

      刪除
    3. http://imgur.com/eN6Agem

      請問我想把文章列表呈現出像照片中的三個三個的方式
      請問該如何做?

      有類似圈起來的切換功能選單嗎? 感謝您

      刪除
    4. https://lh3.googleusercontent.com/-2oR7IltnScw/V4dz6fhrDII/AAAAAAAAIWY/7l5V4O-bhYw0qxgZCSqQl43Jq4KOqzFrQCCo/s640/blogger-post-label-category-section-tag-comment-04.jpg

      可以使用 Blogger 版面配置,安裝三小工具搭配 jquery tabs 製作出來。類似上圖的呈現方式,只是將文字的部份改為圖示;然後放置三個不同 CSS 樣式版本的資料。

      可以在「jquery tabs 插件」這裡找到很多資源,不確定是否有圖示部份的資源,要一個一個找;沒有的話,就要自己製作 (*可以引用 Font Awesome ) 圖示。


      引用 Font Awesome 及 jQuery 函式庫
      <link href='//netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css' rel='stylesheet'/>
      <script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js' type='text/javascript'/>



      Font Awesome 的 CSS 設定教學

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

張貼留言

繼續閱讀:

這個網誌中的熱門文章

[密技] Windows OneDrive Dropbox 移至 SD 卡,讓 SSD 使用壽命更長久

[外掛] Chrome 擴充:ColorPick Eyedropper 網頁色碼擷取器

[教學] Facebook APP ID 申請,建立應用程式取得 APP 密鑰

[教學] Twitter 手機簡訊、APP 兩步驟驗證設定

[教學] Google Compute Engine ( GCE ) 使用 PuTTY SSH 登入實例

Line 分享按鈕:文章分享語法相容網頁版、行動裝置、APP

[外掛] Chrome 擴充:Window Resizer 瀏覽器視窗大小調整比例

[教學] LINE 電腦版行動條碼登入設定

Blogger 文章底部自動加入版權宣告

[教學] Blogger 自訂網址綁定自有域名