讓 Blogger 過長的文章自動產生數字分頁﹍系列文加強版

上一個版本「讓 Blogger 自動顯示系列文章」留言 #5 WHY 詢問「有時文章過長，想幫文章變更為好幾頁 ( 寫好幾篇 )，能否讓【 自動顯示系列文章 】的顯示結果不出現標題，而出現數字」。基本上「文章分頁」算是常見的功能，當文章內容較長，分頁功能可以讓讀者稍微喘口氣。雖然有的網站是為了增加瀏覽次數而使用這個功能，但畢竟太過火而引起讀者反感，總是得不償失，相信站長們心中自有一把尺。

在 Blogger 要做出分頁機制，並不是很好設計，需要說明的地方不少，因此把篇幅留給使用說明。建議先看 上一篇 →「一、系列文的原理」瞭解設計的原理，後續內容比較能理解。

點此看範例網頁

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

文章分頁的效果大致像這樣：




系列相關文章的效果大致像這樣：

一、安裝準備動作

若曾安裝舊版程式碼，請先完整移除。在修改範本之前，如果第一次安裝本站工具的讀者，建議先閱讀「備份範本的訣竅」系列文章。

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

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js'></script>
<style>
/* 文章分頁 系列文 start */
#postSeries { /* 整個區塊 */
font-size: 14px;
}
.postSeries_title { /* 系列文標題 */
text-decoration: none!important;
font-weight: bold;
color: #666!important;
}
.postNav_title { /* 分頁功能 標題 */
display: inline-block;
text-decoration: none!important;
width: 20%;
text-align: right;
}
.postNav_page {
display: inline-block;
width: 70%;
}
.postNav_displayNum { /* 分頁按鈕 */
padding: 5px 12px;
margin-right: 10px;
color: #666;
background-color: #eee;
}
.postNav_current { /* 目前分頁 */
font-weight: bold;
color: #fff;
background: #359BED;
padding: 5px 12px;
margin-right: 10px;
}
/* 文章分頁 系列文 end */
</style>

第一行可參考「引用 jQuery 的注意事項」，檢查範本是否已安裝過 jquery，以免重複安裝。

如果對 CSS 熟悉，可自行修改 CSS 參數。

二、安裝程式碼

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

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

E：要使用分頁功能，請保持紅色字串 "Y"；只想使用系列文功能，可改為 "N"

F：要使用分頁功能時，文章標題必須包含 1, 2, 3, 等序號數字。如果序號要用括弧包覆，例如 (1)，那麼此處藍色字串必須填入 "()"；若不需包覆字元請維持空字串 "" 即可。

G：可自訂分頁功能的提示字串

H：在系列文模式，可設定要顯示的篇數，系統會自動以亂數挑選；若要顯示全部的系列文，此參數請設為 0。

I：系列文標示目前頁面文章的圖示，可使用 http 開頭的圖片網址

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

三、使用方式

1. 文章標題

使用分頁功能的文章，假設有四篇，這四篇必須符合以下要件：

• 有共同的標籤
• 有部分共同的文章標題字串
• 文章標題必須包含數字序號

2. 執行方式

這四篇文章的內容，都必須放入以下字串，通常放在文章最後面，請在 HTML 模式下編輯：

<div id="postSeries" title="填入共同標題字串"></div>


3. 文章範本

如果不想每次在文章中手動輸入以上字串，來啟動文章分頁功能，可參考「上一篇」→「三、使用系列文功能的方法」→「1. 文章範本」的方式，將字串存入文章範本。

四、使用技巧範例

1. 分頁範例功能

例如我的這篇「為健康把關的57堂課__飲食篇」心得內容太長了，必須分成兩頁的長度才適合訪客閱讀，那麼使用預設的程式碼參數，可啟用分頁功能，然後將兩篇文章的標題設定為以下：

• 為健康把關的57堂課__飲食篇 (1)
• 為健康把關的57堂課__飲食篇 (2)

然後編輯這兩篇文章，在最後面加入以下語法：

<div id="postSeries" title="為健康把關的57堂課"></div>
如此在這兩篇文章的網頁，結尾處就能自動產生分頁效果了。效果類似下圖：




2. 相關文章+顯示固定文章數

除了使用分頁功能，經由正確的設定，也可啟用相關文章功能。例如我寫了不少 CSS 相關的文章，不過若在文末將所有 CSS 相關文章全部列出來，數量太多實在太佔版面了！

可以使用預設的程式碼參數，然後所有相關文章的標題務必包含 "CSS" 這個字串，然後編輯所有相關文章，在最後面加入以下語法：

<div id="postSeries" title="CSS">CSS 技巧相關文章：</div>
如此在所有 CSS 相關文章的網頁，都只會亂數挑選 5 篇文章來顯示。

點此看相關文章範例

3. 完整系列文功能

有些系列文章例如小說連載、遊記，是有順序性的，必須全部列出供讀者參考。不過本文這個小工具必須處理多種互斥的設定實屬不易，如果你的部落格在使用這個工具時，有部分文章必須跟預設參數不一樣時，可參考以下的處理方式。

例如我的部落格已經使用了前述兩種 "分頁" 及 "相關文章" 的狀況，現在又有個系列文「有錢人想的和你不一樣」必須在文末列出所有系列文章，目前一共 15 篇，才能讓讀者有脈絡可循，那麼務必讓所有系列文章的標題包含 "有錢人想的和你不一樣" 這個相同的字串，然後編輯所有系列文章，在最後面加入以下語法及參數設定：

<div id="postSeries" title="有錢人想的和你不一樣">相關系列文章：</div>
<script>
var postSeries = {
random: 0,
pointer : "☜"
};
</script>
重點在於 random 的參數改為 0，覆蓋掉範本中的參數，如此文末就能一次列出所有系列文了。

點此看系列文範例網頁

4. 篩選字串的技巧

利用設定語法中 title 的參數，可以有篩選出超乎想像特定相關、系列文章的可能性，這方面得靠讀者的創造力了，請參照「上一篇」→「四、注意事項」以及「五、應用方式」來瞭解各式應用方法。

五、常見 FAQ

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


更多實用工具：

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