2014年5月16日

[小工具]讓 Blogger 按下標籤後出現文章列表

A+
2016.3.28 公告:目前已發佈新版,請前往「Blogger 標籤文章列表 V2

前陣子在 +coke tech 的「首頁」看到,怎麼這個標籤分類工具有點眼熟?原來就是「Blogger 文章列表極速版__依標籤排列」。當初設計這個工具的原意本不在此,不過現在看起來,當成 Blogger 標籤工具也是一個很棒的應用!

其實長久以來,一直陸續有看到這樣的需求──「能不能讓 Blogger 按下標籤後出現文章列表」,尤其從別的部落格平台轉戰 Blogger 的使用者特別會詢問。因此感謝 +coke tech 的巧思,那麼就來動手調校一下原本的文章列表。




一、如何修改文章列表


因為原本的「文章列表__依標籤排列」是放在文章裡面,所以標籤按鈕做得又大又寬。現在要放在側邊欄這個狹小的區塊,加上很多使用者的側邊欄設定得很小,常常不到 300px,甚至低於 250px,因此連帶字體大小也需要更改。

在主程式不變的架構下,WFU 將 CSS 修改為適合在側邊欄顯示的狀態,及隱藏 "新文章" 的標示,來減少寬度。不過每個使用者的範本都不一樣,最終想要適合自己版面的話,可能還是需要一點 CSS 基礎,才能改得漂亮。



二、安裝程式碼


在修改範本之前,如果第一次安裝本站工具的讀者,建議先閱讀「備份範本的訣竅」系列文章。

接著請到後台 → 版面配置 → 新增小工具 → 選擇「HTML/JavaScript」→ 填入標題、以及以下程式碼:


如果只想列出部份標籤的話,那麼 G 行可以填入不想顯示的標籤名稱,每個項目之間請用小寫逗號 "," 隔開,最後一個項目之後不可有逗號。

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

現在可以存檔看效果,也可先到 DEMO 網頁試玩一下:




三、CSS 修改


1. CSS 區塊擺放位置

請對照程式碼行號,R~BG 行的 CSS 區塊,如果放在小工具的區塊也是能執行,只是網頁執行效率比較差一點(不一定感覺得出來)。而好處是,程式碼全部放在一起,管理上比較方便,將來如果要移除工具的話不會漏掉。

對於網頁高手而言,請自行將 R~BG 行的 CSS 區塊放在範本中 </head> 之前即可。


2. 修改字體

每個人的範本都不一樣,如果字體大小、顏色不如預期的話,修改的地方如下:
  • 標籤:綠字 /* 標籤按鈕 */ 的區塊
  • 文章標號:綠字 /* 文章編號 */ 的區塊
  • 文章標題:綠字 /* 文章標題 */ 的區塊

可以新增的參數舉例如下:
  • 字體大小: font-size: ??px;
  • 字體顏色: color: #aaa;


3. 修改項目符號

每個標籤前面的預設符號為 "",這也是經由 CSS 設定出來的。要修改的話,請詳閱以下的步驟:

A. 進入這個網頁:「CSS & Javascript Character Entity Calculator




B. 按照上圖 A~C 順序,貼上自訂的字元(例如"") → 按下 Convert → 在 CSS Value 那一行會產生對應的轉換字串(例如 "\25CF")


C. 參照程式碼 AB 行,將紅色字串置換成上個步驟 B 所產生的轉換字串即可。

想要修改項目符號的顏色,也可在 AA~AD 這個區間自行增添 CSS 參數。



四、小提醒


由於前陣子才發生「Google Drive(js檔)疑似流量有限速」的情形,而本文的小工具,由於放在側邊欄,預期 js 檔被執行的機率很高。為了避免將來某天這個小工具無預警罷工,建議讀者自行將 js 檔分流:

  • 將程式碼 L 行的 js 檔 "https://googledrive.com/host/0BykclfTTti-0NGhwZ2tQMU45VDA/blogger-label-toc-140512-min.js" 上傳到自己的 Google Drive 空間 → 取得自己的 js 檔連結 → 將自己的 js 檔連結置換原本的字串

以上流程不清楚如何操作的話,一樣參考「Google Drive(js檔)疑似流量有限速」這篇文章即可。


更多實用工具:

26 則留言:

  1. 版主你好~
    由於我最近剛開始使用blogger看見您的教學後,覺得受益良多~
    目前有使用您此篇的方式!!!!!!
    這是我的blog:http://orz9rzorz.blogspot.tw/
    期待您更多的教學!!!!!

    回覆刪除
  2. <6544859468766304931>(以上內容請勿刪除,從括號之後開始留言)你好,謝謝支持 :)
    歡迎訂閱本站的文章~

    回覆刪除
  3. 這真是夢寐以求的程式碼!!!
    可惜要設定的是"不顯示的標籤名稱",而非欲顯示的標籤,
    文章&標籤量多起來的話,設定"不顯示的標籤名稱"其實滿痛苦的QQ

    回覆刪除
  4. <5048182167511994874>(以上內容請勿刪除,從括號之後開始留言)的確標籤多的時候,這樣設定比較好。如果有更新版的時候,再跟其他需求一起更改~

    回覆刪除
  5. 因為在手機上瀏覽時,blogger 沒有像 pixnet 的介面那麼完善,我把這篇語法用在blogger的分頁,這樣在手機上也能看見文章分類。感謝!

    回覆刪除
  6. <2419893888027334996>(以上內容請勿刪除,從括號之後開始留言)我看了你裝的「文章列表+讚」、及本篇的「標籤文章列表」,都有同樣的狀況 → 按鈕按下後,無法收合文章列表 → 我推測是 jquery 版本的問題 → 在你的側邊欄看到「Recent Posts」、「Related Posts」小工具,使用了很舊的 jquery 版本 1.4.2。

    如果你有發現按鈕無法收合的狀況:

    1. 你可以將 1.4.2 的字串改為 1.8.2

    2. 可以移除「Recent Posts」, 因為這功能非常簡單,不需要用 jquery 寫,在後台安裝「資訊提供」這個小工具就有一模一樣的效果了。(要顯示文章縮圖的話,可裝本站的最新文章小工具)

    這樣按鈕應該就能收合了。

    回覆刪除
  7. 你好,關於先前的問題(http://goo.gl/FTml5q),我安裝了這篇的新版後,的確能顯示全部文章了,謝謝。

    但就出現了新的問題,就是文章依了發表日期排列,
    之前舊版本是依文章標題排列,但新版本卻是依文章的發表日期排列,
    由於我的文章標題絕大部分開頭都是數字日期,依發表日期排列,反而會亂。

    所以,想再請問有方法可依文章標題排列,且也能顯示全部文章嗎?

    舊版,依文章標題排列:http://1z2x1z.blogspot.com/p/blog-page_6.html,
    新版,依文章發表日期排列:http://1z2x1z.blogspot.com/p/blog-page_23.html

    謝謝。

    回覆刪除
  8. <8804623217899724901>(以上內容請勿刪除,從括號之後開始留言)你好,先依照標籤分類後、再依文章標題排序,這樣的用途畢竟比較偏少數,因此不會特地來修改程式碼。如果一定要這麼做的話,將視為客製案子,請參考「諮詢服務」→「2. 客製諮詢」,謝謝。

    回覆刪除
  9. <721793972668681326>(以上內容請勿刪除,從括號之後開始留言)
    原來已超出了範疇……那就算了,
    是怎也好,最後真的謝謝你了。

    回覆刪除
  10. 您好!我嘗試裝“讓 Blogger 按下標籤後出現文章列表”,
    到後台 → 版面配置 → 新增小工具 → 選擇「HTML/JavaScript」→ 填入標題、以及您上面的程式碼按儲存后,一直出現pleas wait在轉圈的情況,不知道問題出在哪裡,請指教,謝謝!

    回覆刪除
  11. <6200542434668840162>(以上內容請勿刪除,從括號之後開始留言)到你的網站看了,沒發現有安裝這個工具喔~

    回覆刪除
  12. <344277098279059415>(以上內容請勿刪除,從括號之後開始留言)
    您好!
    我就是裝不上去。
    我現在裝上去,麻煩您有時間看看。謝謝!

    回覆刪除
  13. <740996671384527136>(以上內容請勿刪除,從括號之後開始留言)剛剛再試裝一次,居然裝上了,我前2天一直裝不上。感恩!

    回覆刪除
  14. <4634032631806454482>(以上內容請勿刪除,從括號之後開始留言)請教:1,裝完“讓 Blogger 按下標籤後出現文章列表”這個小工具后,下面出現"Label TOC"的字樣。
    2,裝完”Blogger 數字分頁導覽 + Ajax 動態頁面載入效果“這個小工具后出現”Ajax Page Navigation“的字樣
    如何使這2個字樣不顯示在網頁上面呢?
    謝謝!

    http://ourfashland.blogspot.hk/

    回覆刪除
  15. <5206347654097198210>(以上內容請勿刪除,從括號之後開始留言)WFU BLOG 的版權聲明及版權圖示: http://www.wfublog.com/2013/06/wfu-blog-copyright.html

    回覆刪除
  16. <1306923718078330562>(以上內容請勿刪除,從括號之後開始留言)明白,謝謝!

    回覆刪除
  17. 文章數超過10筆,會一直縮排,請問怎麼辦呢?
    http://638207.blogspot.tw/p/sitemap_59.html

    回覆刪除
  18. <5802371240543149392>(以上內容請勿刪除,從括號之後開始留言)看了你的網址,既然你放在文章內,而不是側邊欄的話,那麼用這個版本比較適合: http://www.wfublog.com/2015/09/blogger-toc-label-sonic-update.html

    回覆刪除
  19. <783410307992412479>(以上內容請勿刪除,從括號之後開始留言)
    謝謝您的解答,感恩~

    回覆刪除
  20. 版主您好 目前遇到問題就是 blogger如果設定不公開的話 語法會無法作用 請問該如何解決
    感激

    回覆刪除
  21. <2946476371831310449>(以上內容請勿刪除,從括號之後開始留言)
    補充一下,是只有設定邀請的人才能觀看

    回覆刪除
  22. <7598798864724869935>(以上內容請勿刪除,從括號之後開始留言)你好,一定要設定為公開,才能讀取網站 feed 資料。沒公開的話,任何需要讀取 feed 的 blogger 工具都是沒有作用的,例如最新文章、最新留言。

    回覆刪除
  23. <3616002972447724146>(以上內容請勿刪除,從括號之後開始留言)
    原來如此,感謝您的回覆!!
    您的網誌真是受用,可以學到很多東西,辛苦了
    謝謝

    回覆刪除
  24. <565445327187259236>(以上內容請勿刪除,從括號之後開始留言)不客氣 ^^

    回覆刪除
  25. Wayne你好,這個小工具很讚很好用,想請問有辦法使用雙層標籤後再顯示文章列表嗎? 謝謝

    回覆刪除
  26. <6739166679948424580>(以上內容請勿刪除,從括號之後開始留言)你好,請見開頭的公告,目前有出新版,你可搭配樹狀標籤使用,將來樹狀標籤也會有更新版,包含這項功能。

    回覆刪除

張貼留言注意事項:

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