2016年3月28日

Blogger 按下標籤出現文章列表 V2﹍可切換摘要及標題模式

A+
blogger-label-post-list-toc-2-Blogger 按下標籤出現文章列表 V2﹍可切換摘要及標題模式很多從其他部落格平台搬到 Blogger 的站長,都會詢問「按下標籤後顯示文章標題列表」這樣的功能。的確,站長們對自己的文章內容瞭如指掌,想要找站內的資料時,真的只需要看到文章標題就好。

但是站在訪客的立場,對於我們的文章內容、甚至網站風格都不太熟悉的時候,按下標籤若貿然只顯示文章標題,可能不具備足夠的吸引力來點擊,最好還是維持有封面圖、摘要等內容比較恰當。

那麼,有沒有這樣的工具,可以同時滿足站長及訪客的需求,能夠自由選擇按下標籤時,要出現文章標題列表、或顯示原有的封面圖及摘要呢?WFU 本篇研發的工具,將可完美實現這件事,同時兼顧兩種需求、而且安裝簡單方便,請見以下的介紹。




一、功能介紹


在開始之前,可先進入上面的範例網頁,搭配以下的介紹內容:

1. 官方「標籤」小工具

使用本篇的工具,必須先安裝官方「標籤」小工具,無論使用 "清單" 或 "標籤雲" 模式都可以。

過去曾為了本篇的功能,寫了原始版 V1 的「讓 Blogger 按下標籤後出現文章列表」,不過對於如何只顯示 "自訂的標籤",處理上有些麻煩。

現在搭配官方「標籤」小工具後,由於可以自訂要顯示的標籤,那麼 V1 的不方便之處就得到了解決。


2. 切換模式

summary-title-mode-Blogger 按下標籤出現文章列表 V2﹍可切換摘要及標題模式

本篇的工具會在官方「標籤」小工具上方,顯示兩個切換模式的按鈕:

  • 摘要模式:選擇此模式後,按下標籤會顯示 Blogger 預設的文章摘要內容(也就是跳至標籤頁面)。
  • 標題模式:選擇此模式後,按下標籤會顯示該標籤的文章標題列表。

這個小工具可以將預設值設定為 "摘要模式",方便訪客瞭解文章及網站的風格。顯示文章封面圖、摘要的話,版面也比較好看。

而站長或熟客可自行選擇 "標題模式",方便查找網站中的文章及資料。

幾年前曾為這個功能寫了「讓 Blogger標籤/搜尋頁面 能隨時切換標題模式與文摘模式」,但修改方式非常複雜、麻煩,而且對不熟悉範本的讀者來說很危險,一不小心就會把範本改壞。

現在這個版本安裝起來不但簡單、而且安全多了。曾安裝過舊版的讀者,請小心參考原文說明,倒推回去將範本恢復原狀,再來安裝本篇的版本


3. 選項會自動記憶

由於程式使用了 cookie,只要切換過模式一次,就會自動記憶設定。將來再進入網站時會讀取 cookie,不用每次都重新切換模式,非常方便。


4. 動態切換上下頁

blogger-label-post-list-toc-2-Blogger 按下標籤出現文章列表 V2﹍可切換摘要及標題模式

當標籤的文章數過多時,文章列表會自動分頁,且上、下頁切換都是使用 Ajax 動態載入,速度飛快、不會重整頁面,可節省大量查找文章及資料的時間。



二、準備動作


1. 安裝「標籤」小工具

  • 如前所述,網站請先安裝官方的「標籤」小工具
  • 如果網站確定只安裝過一次「標籤」小工具,那麼可跳到「2. 安裝 CSS」
  • 記下「標籤」小工具設定的標題,到後台「範本」→「編輯 HTML」,游標點進範本區塊,按 Ctrl-F 搜尋標題字串
  • 如下圖,搜尋到小工具的標題後,在同一行可找到小工具的 id,例如圖中的 "Label1",將此字串記下來,之後會用到。

blogger-label-widget-id-Blogger 按下標籤出現文章列表 V2﹍可切換摘要及標題模式


2. 安裝 CSS

請到後台「範本」→「編輯 HTML」,游標點進範本區塊,按 Ctrl-F 搜尋 </head> 這個字串,找到後在此字串的前一行,插入以下程式碼:

<script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'></script>
<style>
/*標籤文章列表 V2*/
.labelTOC2_caption {
font-size: 20px;
}
#labelTOC2 ol {
padding-right: 0;
}
#labelTOC2 li {
padding: 5px 0;
border-bottom: 1px solid #eee;
text-indent: 0;
}
#labelTOC2 a,
#labelTOC2_info a, #labelTOC2_nav a {
text-decoration: none;
}
#labelTOC2_info {
text-align: left;
font-size: 11px;
font-family: arial, sans-serif;
padding-top: 5px;
border-top: 1px solid #e9eaed;
}
#labelTOC2_info a {
color: #ccc;
}
.labelTOC2_title {
display: inline-block;
font-weight: bold;
width: calc(100% - 100px);
padding-right: 10px;
vertical-align: top;
}
#labelTOC2_postIndex {
margin: 5px 0;
text-align: center;
}
#labelTOC2_switchPage,
#labelTOC2_nav {
background-color: #eee;
margin: 5px 0;
padding: 3px;
}
#labelTOC2_switchPage a,
#labelTOC2_switchPage span,
#labelTOC2_nav a {
box-sizing: border-box;
display: inline-block;
width: 50%;
padding: 0;
border-left: 1px dashed #aaa;
text-align: center;
}
#labelTOC2_switchPage a:hover,
#labelTOC2_nav a:hover {
background-color: rgba(100, 100, 100, 0.1);
}
#labelTOC2_switchPage a:first-child,
#labelTOC2_switchPage span:first-child,
#labelTOC2_nav a:first-child {
border-left: 0;
}
</style>

第一行綠色字串可參考「引用 jQuery 的注意事項」,檢查範本是否已安裝過 jQuery,如果已經安裝過請刪除此行,以免重複安裝。

其餘的部分,如果對 CSS 熟悉可自行修改參數。



三、安裝程式碼


接著請搜尋 </body> 這個字串,找到後在此字串的前一行,插入以下程式碼:


以下參數修改請參照以上程式碼行號:

E:如果確定網站只安裝過一次「標籤」工具的話,那麼 id 通常就是 "Label1";如果不確定的話,請按照「二、準備動作」→「1. 安裝標籤小工具」的步驟,修改小工具的 id 字串

F:這一行的設定決定此工具第一次執行時,所顯示的模式。一般來說,這一行的參數建議設定為 0,預設使用 "摘要模式",對訪客比較好,因為訪客不一定知道切換模式的用處、或是不熟悉怎麼操作這個工具。

G~H:修改兩種模式的按鈕字串;如果熟悉 IMG 標籤語法的話,這裡也可填入含 IMG 標籤的圖片網址。

I:可修改文章列表每頁顯示的文章數

J~K:更改上、下頁的圖示;若要使用圖片,可參考 G~H 行的說明。

L~M:修改相關字串

O:由於「Google Drive 關閉外連」功能,綠色字串的 JS 網址是無法外連的,請參照「WFU BLOG 外連 JS 變更及操作說明」,將這個連結下載後存成 JS 檔,上傳到自己的空間或 Dropbox。取得自己的 JS 檔外連後,置換本行的綠色網址字串。


以上儲存後即可看到效果,若想先測試操作一下,請前往範例網頁:



更多實用工具:

4 則留言:

  1. 這個功能感覺是《多層樹狀標籤》和《最新回應》的結合體!!

    回覆刪除
    回覆
    1. 之後多層樹狀標籤 V2,也會加入這個功能,就不用另外安裝這篇的工具了 ^^

      刪除
  2. 有一個可能是bug的問題,例如當按下摘要模式時,選擇A標籤,然後再按標題模式,選擇B標籤,此時A標籤的連結就不能夠再點選了,除非回到首頁重頭再來。

    回覆刪除
    回覆
    1. 謝謝提供錯誤狀況,試了一下知道是怎麼回事了,因為:

      1. "摘要模式" 會刷新頁面,且 "摘要模式" 時,點擊 A 標籤後,A 標籤無法再點擊是 Blogger 的設計機制。

      2. "標題模式" 不會刷新頁面,採 Ajax 動態載入,所以原本 "A 標籤無法再點擊" 的狀態會持續保留

      我想這個狀況發生機會很低,訪客不太會兩個模式頻繁切換,如不在意的話可以忽略;如果在意的話,只能直接改範本,強制取消 Blogger 原本的設計機制。在範本中把原本的程式碼:

      <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>

      強制改成以下:

      <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>

      有兩處都要修改,這樣標籤連結就一律可以點擊。

      刪除

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
提問請附網址、詳細描述狀況,如提供的資訊不足,則無法回覆。
◎ 請在相關文章留言,與文章無關的主題請至「Blogger 中文論壇」。
◎ 若詢問 CSS 、非官方範本問題、或貴站為商業網站 ,請參考「本站諮詢頁面」→「1. 諮詢服務」
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 若發現留言不見了,通常是因為 "複製貼上" 的內容常被系統判定為垃圾留言,請不用擔心,我會定期將留言恢復。
◎ 本站「已關閉自刪留言功能」。