2014年3月10日

Blogger 文章列表極速版﹍(2) 依標籤排列

A+

(Pic from: forums.realmacsoftware.com)
2015.9.26 公告:本文工具已有更新版,請前往「Blogger 文章列表極速版﹍依標籤排列 (更新版)」。

上一篇「依日期排列」,適合提供給對網站不熟的訪客,讓其概略瞭解近期文章走向、發文頻率、歷年作品等等。本篇「依標籤排列」的文章列表,則適合對網站已經有一定熟悉程度的讀者,知道從哪裡可迅速找到需要的資料,當然也適合站長自己使用。

「Blogger 文章列表極速版」的系列文章,其優點請參考第一篇「依日期排列」的前言介紹。而以下先介紹「依標籤排列」這個版本的特點,想直接安裝請跳「二、安裝程式碼」。




一、「依標籤排列」版本的特點


1. 不載入全部文章:主畫面顯示所有標籤列表,但不載入所有文章列表(只載入第一個標籤的文章)。原因為這是「極速版」,載入速度只在一瞬間,因此訪客選擇要查閱的標籤後,再進行載入文章的動作即可。能省下預先載入所有文章所耗費的時間與系統資源。

2. 標籤開合按鈕:每個按鈕可收合該標籤的全部文章。

3. 自訂新文章範圍:系統可標示哪些文章為近期的新文章,因此可自行設定新文章的區間範圍。

4. 排除特定標籤:某些標籤可能沒有必要列出來讓訪客查閱,例如「站務相關」、「留言板」、或特定目的不想讓訪客知道的標籤,那麼可以設定讓這些標籤不在文章列表中出現。

5. CSS 可自訂:所有版面的 CSS、任何參數、效果都能修改,讓自己的文章列表與眾不同。



二、安裝程式碼


新開一篇文章 → 複製以下程式碼:


2015.9.26 公告:本文工具已有更新版,請前往「Blogger 文章列表極速版﹍依標籤排列 (更新版)」。


請先別存檔,以上是主程式的部分,還需要複製 "版面樣式" 的部分,如不需要修改參數,請跳至「三、安裝 CSS」。

如果想自訂參數的話,請參照程式碼行號的說明──

E:可設定最近的幾篇文章要顯示為新文章,紅字 15 代表最近的 15 文章,會標示為 "新文章"。

F:藍色字串即為標示 "新文章" 時所顯示的字樣,也可填入 http 開頭的圖片網址。

G:請填入不想顯示的標籤名稱,每個項目之間請用小寫逗號 "," 隔開,最後一個項目之後不可有逗號。如果沒有需要排除的標籤,本行請留下 tocLabel.exclude = []; 這樣的內容即可。

H:文章開合的效果,預設值 "fadeToggle" 為「淡入淡出」的效果;若改為 "slideToggle" 則有「滑動開合」的效果

2014.3.14 功能增補──

I:標籤若不標示有新文章,請改為 "N"。

J:若不展開第一個標籤的文章,請改為 "N"。



三、安裝 CSS


接在「二、安裝程式碼」這部分的程式碼後面,貼上以下 CSS 程式碼:

<style>
.tocLabelTitle { /* 標籤按鈕 */
display: table-cell;
width: 200px; /* 按鈕的寬度 */
padding: 5px 10px;
font-size: 20px;
text-align: center;
cursor: pointer;
color: #ffffff;
font-family: Droid Serif, "標楷體", sans-serif;
font-weight: bold;
text-decoration: none;
text-shadow: 0px 1px 0px #3d768a;
-moz-box-shadow: 0px 10px 14px -8px #276873;
-webkit-box-shadow: 0px 10px 14px -8px #276873;
box-shadow: 0px 10px 14px -8px #276873;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #599bb3), color-stop(1, #408c99));
background: -moz-linear-gradient(top, #599bb3 5%, #408c99 100%);
background: -webkit-linear-gradient(top, #599bb3 5%, #408c99 100%);
background: -o-linear-gradient(top, #599bb3 5%, #408c99 100%);
background: -ms-linear-gradient(top, #599bb3 5%, #408c99 100%);
background: linear-gradient(to bottom, #599bb3 5%, #408c99 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#599bb3', endColorstr='#408c99',GradientType=0);
background-color: #599bb3;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
}
.tocLabelTitle:hover {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #408c99), color-stop(1, #599bb3));
background: -moz-linear-gradient(top, #408c99 5%, #599bb3 100%);
background: -webkit-linear-gradient(top, #408c99 5%, #599bb3 100%);
background: -o-linear-gradient(top, #408c99 5%, #599bb3 100%);
background: -ms-linear-gradient(top, #408c99 5%, #599bb3 100%);
background: linear-gradient(to bottom, #408c99 5%, #599bb3 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#408c99', endColorstr='#599bb3',GradientType=0);
background-color:#408c99;
}
.tocLabelTitle:active {
position: relative;
top: 1px;
}
.tocLabel { /* 個別標籤區塊 */
margin: 0px 5px 15px;
}
.tocLabelToggle { /* 標籤開合區塊 */
display: none;
margin: 20px 10px 30px;
}
.tocPostNo { /* 文章編號 */
float: left;
font-size: 16px;
width: 30px;
text-align: right;
line-height: 1.6em;
}
.tocPostTitle { /* 文章標題 */
margin-left: 35px;
font-size: 16px;
line-height: 1.6em;
}
#tocInfo { /* 資訊區塊 */
text-align: left;
margin-top: 40px;
font-family: helvetica, arial, sans-serif;
text-shadow: 1px 1px 1px lavender;
font-size: 11px;
padding-top: 5px;
border-top: 1px solid #e9eaed;
}
#tocInfo a {
color: #ccc;
text-decoration: none;
}
.tocLabelNewText { /* 最新文章標籤標示 */
display: table-cell;
color: #990000;
font-weight: bold;
font-style: italic;
padding-left: 10px;
vertical-align: middle;
}
.tocNewText { /* 最新文章標示 */
color: #990000;
font-weight: bold;
font-style: italic;
margin-left: 10px;
}
</style>

請特別注意第四行的紅色字串,如不滿意標籤按鈕的寬度,可自行調整 200 這個數值。

現在可以將文章發佈,接著將這篇文章的連結放到部落格上方的水平選單上(或安裝「浮動導覽列」、「下拉選單」功能),提供訪客有很好的導覽效果。

2014.3.14 補充:留言 #10  FreeTong Leung 提供了新文章提醒字串的文字閃爍語法,需要此功能的話請按留言內容修改 CSS。

如果有 CSS 基礎概念的話,那麼可以自行修改參數,讓自己的文章列表有截然不同的風貌,可參考綠字部分的註解得知區塊的內容。如果尚未看過前言提供的效果連結,請按下面的按鈕:




四、注意事項


根據這篇「官方說明文件」,標籤的名稱不得使用以下字元:

&<>@!+,

以前不了解為何如此,現在寫了這個小工具後終於知道原因了,執行的時候程式一直當掉,後來才查出原來本站有個標籤名稱為「電腦- Google 相關-G+ 相關」,其中的一個字元正是以上列出的加號 "+",現在改成全形符號的名稱「電腦- Google 相關-G+ 相關」後,程式就可正常執行了。

如果使用本篇的工具而執行不正常時,請先仔細檢查一下標籤的名稱是否誤用了以上紅字的字元。


文章列表極速版各版本:

37 則留言:

  1. 恩,這次我可以顯示出來了!謝謝!

    不過,想請教文章標籤的排列順序能調整嗎?
    另外還有個問題,如果一篇文章有一個以上的標籤,偵測好像也會怪怪的,例如,"吃東西才不會肚子餓的最新文章列表""wayne文章列表極速版"裡抓到的有落差,想請問這是什麼原因造成的呢?謝謝!

    回覆刪除
  2. 有些還看不懂
    1. tocLabel.exclude = ["站務", "留言板"]; 我是用樹狀標籤AAA-BBB-CCC, exclude 這一部份是要填那一層的標籤
    2. 如果我只想列出旅遊標籤的列表, 可以嗎?

    謝謝!

    回覆刪除
  3. <2095625859415201089>(以上內容請勿刪除,從括號之後開始留言)謝謝阿冠的測試,沒預想過單一標籤超過 50 篇、以及超過 100 篇的狀況,因此在你的 "吃東西才不會肚子餓" 這個標籤出現了許多 bug,不過現在已經修復了。
    [quote]文章標籤的排列順序能調整嗎?[/quote]
    這個問題請參考「多層樹狀標籤」→「留言 #1」的回答。目前這個小工具能做的就是,將相同字串開頭的標籤名稱集中在一起。

    另外,"吃東西才不會肚子餓" 這個標籤由於超過一百篇文章,文章編號區塊可能會超出預設值,而導致版面亂掉,可在 CSS 的設定區域找到 .tocPostNo,然後將這部分的 width 改為比較大的數值,例如 30px(若還不行,就設更大)。

    回覆刪除
  4. <7607460402031435216>(以上內容請勿刪除,從括號之後開始留言)[quote]我是用樹狀標籤AAA-BBB-CCC, exclude 這一部份是要填那一層的標籤[/quote]
    請填入完整的樹狀標籤名稱

    [quote]如果我只想列出旅遊標籤的列表, 可以嗎?[/quote]
    感覺上是很客製的需求,除非很多留言都希望有這個功能,才會考慮增加這一項。目前要做的這一點,不好意思,只好請將你所有 "旅遊標籤" 以外的標籤,全部填入排除名單了~

    回覆刪除
  5. 我發現一篇文章有兩個以上標籤他全都會列出來! 整篇列表變得好長喔@@

    所以我現在的作法只能把多的標籤添加到"不要顯示的標籤"那邊

    除了這樣做還有其他更快的方式嗎?

    回覆刪除
  6. <2128828561976927898>(以上內容請勿刪除,從括號之後開始留言) 天啊! 我改得好累@@
    把文章多的用來做seo的標籤通通塞進去"不要顯示的標籤"那一欄位看得都要眼花了 >"<

    回覆刪除
  7. <5318263867833645302>(以上內容請勿刪除,從括號之後開始留言)原來是為了做 SEO,設定了這麼多標籤,難怪我看你很多的標籤只有一篇文章。

    網站文章的主題集中,也許比較適合使用這個列表,訪客可以在一個標籤下找到許多資訊。也許依照你目前的分類型態,還不需要 "依標籤" 排列的文章列表吧;不然就是你需要再思考如何文章分類、或設定標籤了。

    回覆刪除
  8. <4513578568824225329>(以上內容請勿刪除,從括號之後開始留言) 真的! 我該好好再來整理標籤了! 我個人真的覺得標籤一格格的分類會讓人好找文章! 雖說側藍就有數狀文章列表了~但是一樣...就是要滿足各方使用者才會想要用這個標籤急速文章列表

    來腦力激盪去~~

    回覆刪除
  9. <1126075796670559041>(以上內容請勿刪除,從括號之後開始留言)說到側欄的樹狀標籤,將來會出新版本,按下標籤後可出現該標籤的文章列表。因此將來的話,有使用樹狀標籤的人,應該比較不需要這個版本的文章列表吧~(沒使用樹狀標籤的話,還是需要這個文章列表)

    回覆刪除
    回覆
    1. 真是好消息!那我可以先不用這個版本了^_^

      刪除
  10. 馬上服用 , 言身寸 言身寸 !

    有一個使用者的提議,
    首項標籤不要馬上展開, 因為這一個不一定是需要查看的.
    如果可以, 有 "New" 的, 才會第一時間展開.
    或是, 全部標籤也不展開, 有 "New" 的, 在標籤後面, 加上 "New" 字樣.
    謝謝開發程式碼 ^_^

    回覆刪除
  11. <2312763089281616648>(以上內容請勿刪除,從括號之後開始留言)是好消息也是壞消息,這個case很久以前就計畫寫了,不過不曉得何時會進入排程...XD (記得我還跟阿冠提過這件事)

    回覆刪除
  12. <2034920819453190688>(以上內容請勿刪除,從括號之後開始留言)謝謝您的建議!
    1. 設計成第一個標籤展開的用意為,沒看過這個工具的訪客,在全部文章隱藏的狀態下,也許摸不著頭緒這個頁面是做什麼用。第一個標籤展開可減少訪客用腦的時間、預防跳離頁面的機率。或是您有沒有其他的設計構想?

    2. 有新文章的標籤特別標示出來,這個構想我覺得滿不錯的,也可以吸引訪客想去點擊!如果修改後,會在此留言更新。

    回覆刪除
  13. <1364198866804353771>(以上內容請勿刪除,從括號之後開始留言)或者打開的是, 最後最新的文章那一個"標籤".
    一來有提示, "標籤"是可以打開的.
    二來, New 就在這裡.

    回覆刪除
  14. <157921865579816386>(以上內容請勿刪除,從括號之後開始留言)好的,研究看看 :)

    回覆刪除
  15. <1364198866804353771>(以上內容請勿刪除,從括號之後開始留言)
    把這個"文章列表"放到"網頁"裡, 變相成為手機版的標籤頁, 在手機尋找貼文時, 方便得多.
    And ^_^
    手多多, 加入"New"字變色特效
    .tocNewText { /* 最新文章標示 */
    font-weight: bold;
    font-style: italic;
    -webkit-animation: color-change 1s infinite alternate ease-in-out;
    -moz-animation: color-change 1s infinite alternate ease-in-out;
    -o-animation: color-change 1s infinite alternate ease-in-out;
    -ms-animation: color-change 1s infinite alternate ease-in-out;
    animation: color-change 1s infinite alternate ease-in-out;
    }
    @-webkit-keyframes color-change {0%{color: green;} 50%{color: red;} 100%{color: blue;}}
    @-moz-keyframes color-change {0%{color: green;} 50%{color: red;} 100%{color: blue;}}
    @-ms-keyframes color-change {0%{color: green;} 50%{color: red;} 100%{color: blue;}}
    @-o-keyframes color-change {0%{color: green;} 50%{color: red;} 100%{color: blue;}}
    @keyframes color-change {0%{color: green;} 50%{color: red;} 100%{color: blue;}}

    回覆刪除
  16. <2176651778165850494>(以上內容請勿刪除,從括號之後開始留言)謝謝,這個效果很棒,我把您的語法增加到「2014.3.14 補充」的部份了。

    另外,主程式碼增加了兩項功能:
    1. 標籤名稱旁可選擇是否標示「新文章」的提示
    2. 第一個標籤可選擇是否展開文章列表。

    已經安裝的讀者請重新安裝所有的程式碼(包含CSS),並參考「2014.3.14 功能增補」、「2014.3.14 補充」這兩個部份的說明。

    回覆刪除
  17. <8920781736684435208>(以上內容請勿刪除,從括號之後開始留言)
    言身寸 言身寸
    我再把變色功能加到 .tocLabelNewText
    效果真好.

    回覆刪除
  18. <625006616088868774>(以上內容請勿刪除,從括號之後開始留言)不客氣~寫謝謝您提供 CSS 語法 :D

    回覆刪除
  19. 版主您好

    很高興看到你的許多好文
    其中這篇"文章列表極速版__(二)依標籤排列"
    我依文內步驟處理, 卻無法執行, 不知步驟是不是哪裡出問題沒完成?想請你幫忙解決
    MYBLOG是 http://chaomingwu.blogspot.tw/

    1.我重新開一篇新文章,標題是"文章表列", 然後在「HTML」模式複製貼上你文章內的程式碼,
    預覽畫面連結如下
    https://chaomingwu.blogspot.com/b/post-preview?token=VeBcIkUBAAA.T2E9gdmGmx_YFzYhDbedYQ.ljS_QFoiuG7DL2UE8QIEfA&postId=1606729648145620490&type=POST

    2.問題來了, 畫面只出現5大標籤, 但每個標籤都點不出對應的文章標題(不知是與我的範本格式有關否?)

    3.另你在文內最後所述: 「現在可以將文章【存檔】,接著將這篇文章的連結放到部落格上方的水平選單上(或安裝「浮動導覽列」、「下拉選單」功能),提供訪客有很好的導覽效果。」
    請問"存檔"這個動作是指在下方所附連結畫面中, 直接按"儲存"鍵嗎?還是要按"發佈"鍵, 然後再將發佈後該篇的網址來連結到部落格上方的水平選單?
    https://www.blogger.com/blogger.g?blogID=412198888260008025#editor/target=post;postID=1606729648145620490;onPublishedMenu=posts;onClosedMenu=posts;postNum=0;src=link
    (文章表列HTML)

    4.我的網頁選單開在右側「網誌所有文章列表」, 因為連結的網址不論是「預覽」畫面網址或是該文「發佈」出去的網址, 點進去後看到的就像上方第1點所附連結畫面, 還是無法下拉出對應的文章標題

    以上問題請教, 感謝!

    回覆刪除
  20. <8141076328181734553>(以上內容請勿刪除,從括號之後開始留言)您好, 根據你的敘述、以及你所有附的網址,我猜你那篇文章根本還沒發布喔!你的網址不是預覽畫面、就是後台的網址。請按照你寫文章的流程,最後按「發布」即可。
    (看來您誤會"存檔"這兩個字了,我來修改一下內文)

    回覆刪除
  21. <618053435852025298>(以上內容請勿刪除,從括號之後開始留言)我依指示發布後,也只顯示網誌標籤而已, 還是無法下拉出每個標籤對應的文章標題,但若依你之前另一篇按日期排列來列表則可以如期顯示沒問題;由於我的blogger只有最簡單的單層標籤,而非樹狀多層, 我在猜是不是這個原因才無法套用你的程式碼呢?若是, 則程式碼該如何做修正?感謝!

    回覆刪除
  22. <9105585746997719981>(以上內容請勿刪除,從括號之後開始留言)好的,既然已經發布了,請提供文章網址,來看看是什麼原因~

    回覆刪除
  23. <5913657794689358522>(以上內容請勿刪除,從括號之後開始留言)
    "所有文章表列"
    http://chaomingwu.blogspot.tw/2014/04/blog-post_2.html

    回覆刪除
  24. <5440517856761114806>(以上內容請勿刪除,從括號之後開始留言)我測試了「文章列表」依日期排列,發現同樣所有的按鈕都不能按 → 因此判斷與你網站的某些 js 相衝 → 看了你的網頁原始碼,發現 jquery 的版本太舊,可能是這個原因 → 請將你範本中 1.3.2/jquery.min.js 這個字串改成 1.8.2/jquery.min.js 再試試看.

    回覆刪除
  25. <6441394148100179482>(以上內容請勿刪除,從括號之後開始留言)
    謝謝版主
    果然是jquery 版本太舊的問題
    依你的指示修正後
    目前已ok了
    版主實在是太厲害了
    再次感激你的協助解惑

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

    回覆刪除
  27. 版主您好,若我只想針對某一 tag 列表,是不是把 tocLabel.exclude 改成 tocLabel.include...
    即可呢?感謝。

    回覆刪除
  28. <8321688388277310937>(以上內容請勿刪除,從括號之後開始留言)呵呵,我沒有寫 tocLabel.include 這個程式啊,所以這樣無法執行的~

    請參考留言 #2 的回覆,如果將來有更新版的話,再將這個功能寫進去,目前只能當作客製 case 處理了。

    回覆刪除
  29. 版主您好,很高興拜讀到您的文章,對我的部落格排版有很大的改良。
    目前有遇到一個問題就是安裝了這篇文章【Blogger 文章列表極速版__(2) 依標籤排列】以及【讓 Blogger 按下標籤後出現文章列表】,在我的部落格當中,點擊之後沒有出現文章列表,是否可協助查看一下我這邊有甚麼問題呢?

    http://taobaoschool.blogspot.tw/p/blog-page_31.html

    希望能得到您的專業幫忙,小弟感恩不盡!!

    回覆刪除
  30. 版主您好, 爬文後已經解決, 是 jQuery 版本太舊問題, 謝謝您!!

    回覆刪除
  31. 想問一下,如果New字樣想要使用圖片的話,該怎麼更換呢?嘗試過直接用圖片連結,按下之下的是成功顯示出圖片,但是在按鈕旁邊的是直接顯示圖片連結而非圖片,請問有沒辦法解決?

    回覆刪除
  32. <5156125545879295256>(以上內容請勿刪除,從括號之後開始留言)也許你直接把 "!! New !!" 改成 HTML 語法 "<img src='圖片網址'/>" 試試看

    回覆刪除
  33. <6928323202549962490>(以上內容請勿刪除,從括號之後開始留言)

    已經成功了,謝謝!不過我還有一個疑問。
    因為有使用樹狀標籤,所以會顯示出樹狀標籤的樣式,
    不知道會不會有一個版本只是單純地顯示真實標籤的呢?
    純粹是覺得顯示全部標籤不太美觀。

    回覆刪除
  34. <4755378697035226841>(以上內容請勿刪除,從括號之後開始留言)這個 idea 不錯,我也覺得樹狀標籤太長,可以增加這個功能!

    回覆刪除
  35. @上月美智, @三分鐘熱度, @小月,

    已經出更新版,增加了你們提到的功能:http://www.wfublog.com/2015/09/blogger-toc-label-sonic-update.html

    回覆刪除

張貼留言注意事項:

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