[小工具]讓 Blogger 自動顯示系列文章

過去在撰寫系列文時，比較頭痛的一點是，在文末想列出所有的相關系列文章時，是一件麻煩的事情。而更麻煩的是，每增加一篇系列文，那麼之前所有的系列文，還得一篇篇去手動新增最新一篇的連結！因此整理系列文列表這件事，真是考驗耐心的絕佳試煉...

現在使用了本篇的系列文小工具後，不但安裝很簡單，操作上也完全不費力，一切以自動化流程實現，以後處理系列文這件事，就可以高枕無憂了！

不但如此，這個小工具還有不少絕佳應用，看完安裝及使用說明後，請務必參考「五、應用方式」。

點此看範例網頁

<< 請注意！本篇文章含會員限定內容 >>

一、系列文的原理

1. 構想出處

最早是從 コーさん 這篇「自訂相關文章進階版」(連結已失效)得到聯想，コーさん 的作法是列出某標籤的所有文章，在某種程度上可視為系列文章，只要將文章的標籤控制得宜即可。


2. 需求及設計

WFU 的構想則是利用設定 "特定字串"，系統會篩選部落格包含此 "特定字串" 的文章標題，經比對標籤及排序後於文末列出，這就成了真正的系列文工具。

而設計上為了與該頁面的那篇文章不重複，系列文列表中的該篇文章，將不以超連結顯示，並增加一個指示圖案以供區別。

另外，由於本站不屬於美食、旅遊、攝影等需要大量圖片的性質，因此這個小工具目前只針對自己的需求，先做出文字的列表。

二、安裝主程式碼

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

接著請到後台「範本」→「編輯 HTML」，搜尋 </body> 這個字串，找到後在此字串的前一行，插入以下程式碼：

請對照以上程式碼行號：

E：藍色圖示可改為自訂的字元，或使用 http 開頭的圖片網址

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

I：此行的註釋文字代表，只有該文章「使用系列文功能」時，才會執行這個小工具；沒有使用系列文功能的文章，就不會執行程式碼，以減少瀏覽器的負擔。

以上安裝完主程式碼後，接下來說明如何在文章中使用「系列文功能」。

三、使用系列文功能的方法

1. 文章範本

只要在文章中加入一行 HTML 語法，該篇文章就能自動執行「系列文功能」。而在後台文章範本中加入這行語法，又可讓這件事的操作更方便。




請到 Blogger 後台 → 設定 → 文章和留言，在文章範本之中，貼上這行 HTML 語法：

<div id="postSeries" title="填入系列文字串"><b>相關系列文章：</b></div>


2. 修改字串

做完上一點的動作後，以後只要開新文章時，都會出現這一行語法。若新文章不需要此功能，將這行字串刪除即可。若需要系列文功能，接下來請依照自己的需求修改字串。

在撰寫系列文標題時，建議一部分使用共同的字串，例如「如何用語法保護網頁文章著作權__（一）附加版權宣告」這系列的文章，都使用了相同的字串 "如何用語法保護網頁文章著作權"，我們便可將這個字串放進 title 的參數裡面，就像下面這樣：

<div id="postSeries" title="如何用語法保護網頁文章著作權"><b>相關系列文章：</b></div>

而藍色字串 "相關系列文章：" 也可改為自訂標題。

只要依照以上說明來設定字串，系統就會自動抓取文章標題中含 "如何用語法保護網頁文章著作權" 字串的文章來形成系列文功能，可點擊以上舉例的系列文章「如何用語法保護網頁文章著作權__（二）阻止全文轉載」來看效果。


3. 自訂 CSS

想自訂「系列文區塊」的話，可到後台範本 → 自訂 → 進階 → 新增 CSS，貼上以下 CSS 程式碼：

#postSeries {
margin: 20px 0px;
}

以上只是舉例，參數可依需求調整。

想要設計出與眾不同的區塊版面，可參考這篇「特殊文字區塊實作範例」，來增加 CSS 參數，下圖是本站以前每次都要花不少時間、辛辛苦苦用手工刻出的系列文效果：

四、注意事項

比較麻煩的一點是，javascript 對於 UNICODE(中文)的排序結果，跟我們想像的不太一樣，如果系列文使用了 "一"、"二"、"三" 這樣的字串，排序結果會讓人大大的意外，如下圖：




因此如果想要有正確的排序，有以下兩種建議：

1. 使用英數字串來排序，避免使用中文數字
2. 系列文超過十篇時，建議補零位數，例如 "01"、"02"、"03"，否則 "11"、"12" 的排序會在 "2"、"3" 的前面。

可參考「有錢人想的和你不一樣」系列文的效果，這系列目前有 15 篇，可注意標題的設定方式。就算將來寫了第 16、17 篇，舊文章的系列文列表也能自動排入新的文章。

五、應用方式

雖然這個小工具主要用途為系列文，不過若能發揮創意，相信還有很多不錯的應用、或更棒的用途。以下舉幾個 WFU BLOG 的實例──

1. 相關主題文章

相關的文章主題不一定是系列文的形式，因此文章標題不會大部分的字串都相同。不過我們可以取一個最小的公約數，設定某個關鍵字，讓這個小工具把所有符合關鍵字的文章標題都抓出來。

例如 WFU 寫了好幾篇有關 javascript 的學習筆記(並非全部都是系列文)，相信對於想要學習 js 的讀者，看完一篇一定也想看看其他的相關心得，那麼文末若能將所有 js 相關筆記列出是再好不過的了。

由於這些筆記的文章標題一定會有這個關鍵字 "javascript"，那麼我們可以這麼設定語法參數，同時更改一下大標題：

<div id="postSeries" title="javascript"><b>Javascript 相關筆記：</b></div>
想看看效果如何嗎？請點這篇「Javascript 優良部分(筆記)__糟糕與不良的部分」，可看到標題含 "javascript" 字串的文章都被篩選出來了！


2. 大事紀要索引

有看過本站導覽列下方「公佈欄區塊」的讀者，一定知道本站每年都製作了大事紀要。不同年份的大事紀要，也可以利用這個小工具，讓想要查詢過往年份的讀者方便許多。我們可以這麼設定語法參數，同時更改一下大標題：

<div id="postSeries" title="更新紀要索引"><b>其他年度紀要：</b></div>
執行效果可參考今年度的「2014 BLOG 更新紀要索引」。


3. 多重關鍵字篩選

除了以上第 1 點「相關主題文章」提到的使用 "關鍵字" 來篩選，這個小工具最強大之處，在於還能夠使用 "多重關鍵字" 來進行篩選。

例如本站寫了一、兩百篇的 Blogger 相關文章，都會用到 "Blogger" 這個關鍵字，而大約有將近十篇的 Blogger 相關筆記，文章標題大概像是這樣："Blogger 小技巧 (筆記)"、"Blogger 新手入門（筆記）" 等等。要怎麼將這幾篇 Blogger 筆記當成系列文的模式列出來呢？

我們觀察到，標題相同的關鍵字為 "Blogger"(請注意大小寫) 及 "筆記"。這兩組關鍵字並沒有連在一起，所以無法使用之前的設定方法，不過可將這兩組關鍵字用空格 " " 來隔開，語法設定如下：

<div id="postSeries" title="Blogger 筆記"><b>Blogger 相關筆記：</b></div>
執行效果可參考這篇「Blogger 文章相關工具及技巧 (筆記)」，這樣的設定會將標題含有這兩組關鍵字的所有文章篩選出來，這算是目前發現最棒的應用了！

六、需求建議

由於一方面目前 WFU 使用系列文沒有縮圖的需求，另一方面如果使用縮圖的話，或許效果很接近「Blogger 相關文章 V2」，那麼版面上在距離很近的位置，擺了兩個構圖效果相似的工具可能不太恰當。

因此對於這個小工具有什麼延伸構想，歡迎提出討論，如果有不錯的結果，或許可衍生出另一個版本。

七、常見 FAQ

日後若有常見問題，會持續補充在此。

Q1: 在手機板的瀏覽器看自己測試的文章並不會並顯示系列文耶?（可是用手機看教學文測試文章卻有顯示）

Ans: 原因請參考這篇「Blogger 行動版範本修改技巧」，任何修改或小工具都無法在「官方版行動範本」顯現，只有選擇「自訂」行動範本才行。

但其實 WFU 目前也都是使用官方行動範本，而測試文章能顯示的原因為，把全部程式碼放在文章之中的話，那麼哪種行動範本都能顯示。操作的方法為，在「三、使用系列文功能的方法」的那一行 HTML 語法，後面貼上「二、安裝主程式碼」的全部程式碼即可 → 最方便的操作就是將這些語法全部複製到文章範本之中。


Q2: 留言 #13 表示，文章後面沒有顯示相關聯的系列文章？

Ans: 我注意到你使用兩個關鍵字 "溫尼伯daycare"，請詳讀「五、應用方式」→「3. 多重關鍵字篩選」，建議關鍵字不要連在一起，請注意英文大小寫，有沒有跟你的文章標題吻合。


Q3: 留言 #26~#27 表示，"母奶"系列文章，每一篇都只有抓到兩篇，總共應該是6篇才對.....哪邊錯了呢？

Ans: 這個 "系列文" 工具的設計原理，是從 "相同標籤" 的所有文章中，篩選出文章標題包含 "指定字串" 的系列文。因此請將包含指定字串的文章，設定相同的標籤，就能全部篩選出來了。


Q4: 網站升級為 HTTPS 後小工具失效？

Ans: 請在範本 </head> 前一行，插入以下 jQuery 程式碼即可：

<script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'></script>


更多實用工具：

• 本站使用的 Blogger hack 及工具整理