2014年6月1日 星期日

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

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

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

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

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



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


一、系列文的原理


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


更多實用工具:
0 0
如這篇文章對你有幫助,歡迎「分享」到 FB、「追蹤」粉絲團、「訂閱」最新文章

沒有留言:

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
◎ 請在相關文章留言,與文章無關的主題可至「Blogger 社團」提問。
◎ 請避免使用 Safari 瀏覽器,否則無法登入 Google 帳號留言(只能匿名留言)!
◎ 提問若無法提供足夠的資訊供判斷,可能會被無視。建議先參考這篇「Blogger 提問技巧及注意事項」。
◎ CSS 相關問題非免費諮詢,建議使用「Chrome 開發人員工具」尋找答案。
◎ 手機版相關問題請參考「Blogger 行動版範本的特質」→「三、行動版範本不一定能執行網頁版工具」;或參考「Blogger 行動版範本修改技巧 」,或本站 Blogger 行動版標籤相關文章。
◎ 非官方範本問題、或貴站為商業網站,請參考「Blogger 免費諮詢 + 付費諮詢
◎ 若是使用官方 RWD 範本,請參考「Blogger 推出全新自適應 RWD 官方範本及佈景主題」→ 不建議對範本進行修改!
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 為了過濾垃圾留言,所有留言不會即時發佈,請稍待片刻。
◎ 本站「已關閉自刪留言功能」。

TOP