[unboxing][hrads]

熱門標籤

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

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

  Blogger HTTPS 相關文章列表:「HTTPS

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

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

[教學] 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 文章標籤導航麵包屑



分享

共有 8 則留言

留言迴響
申杰
管理員
3/25/2016 10:34 AM ×

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

回覆
avatar
coke tech
管理員
3/25/2016 12:08 PM ×

感謝支持 :)

回覆
avatar
陳阿其
管理員
7/03/2016 1:57 PM ×

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

回覆
avatar
coke tech
管理員
7/03/2016 2:31 PM ×

是類似下面這張圖的樣式嗎,以「智悲法音、智悲慈愛、蓮花小組」這樣的以類別列表嗎?
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

回覆
avatar
陳阿其
管理員
7/03/2016 10:21 PM ×

對 就是這樣
我試看看
感謝您

回覆
avatar
陳阿其
管理員
7/05/2016 5:48 PM ×

http://imgur.com/eN6Agem

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

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

回覆
avatar
coke tech
管理員
7/14/2016 7:27 PM ×

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 設定教學

回覆
avatar

加入代碼加入代碼

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

使用超連結:<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 *