2014年11月30日

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

A+
上一個版本「讓 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


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


更多實用工具:

22 則留言:

  1. 感覺很強。這樣跟 wp 的版本不太一樣, wp 是還在同一篇文章裡有分頁,留言也會在同一篇,而這個是模仿分頁效果的系列文。是這樣嗎@@?

    回覆刪除
    回覆
    1. 是啊,如同文章標題,這是系列文加強版,改成用數字顯示而已。
      我不確定技術上留言是否能夠只載入第一篇,不過不能的機率大概比較大~~

      刪除
    2. 如果使用您的悄悄話系統的原理是可以作到的,只是這樣等於完全使用自製留言版了@@

      刪除
    3. 這個 idea 讓我聯想到,如果只使用 FB、G+ 等留言板,就可做到只載入第一篇的留言了~~
      官方留言板的話,載入留言的部分或許可克服,但是留言框是 iframe 所以動不了(跨域問題),覺得能做到的機會很低。

      刪除
  2. 喔喔喔,一直期待的這個功能終於給我等到了,找天來安裝上!雖然不能像WP一樣在同一頁展示,但依據Blogger來說,這點已經很好了QAQ

    回覆刪除
    回覆
    1. 看來大家都很關注「留言集中在同一頁」這件事,將來有機會研究看看~

      刪除
  3. 「留言集中在同一頁」這也是我相當關注的事,但我更集中可以像PIXNET的文章分頁一樣在同一頁啊~~(要說明其實頗難XDD)

    回覆刪除
    回覆
    1. 每個分頁文章都在同一頁顯示,使用動態載入就好,但 adsense 廣告無法多次載入,造成廣告顯示次數無法增加,我想更多站長無法承受這樣的損失吧~

      刪除
    2. 對於我這種僅以個人喜好來弄Blog的人來說其實沒什麼損失呢XD!我去研究一下動態載入好了~

      刪除
  4. Wayne你好:想請問一下,照此篇做法,有寫入序號,怎麼排序顛倒了http://www.hairblog.tw/2014/12/windows8-No1.html
    麻煩您,謝謝喔

    回覆刪除
    回覆
    1. 我看你的設定是分頁功能,由於設定的文章標題字串有一個特殊字元 "、" 可能 Blogger 把他編碼了(可檢視原始碼,變成了"&#12289;"),所以程式辨識標題錯誤,自動跳到系列文功能。

      當以系列文功能顯示時,會依照文章標題來排序,而你兩篇文章標題是不一樣的,所以目前的排序是合理的。

      你先說要顯示分頁功能還是系列文功能,我再回答怎麼做比較恰當。

      刪除
    2. 一句話點醒夢中人!哈哈!我剛剛自己修正了一下,麻煩幫我看一下這樣做對嗎??

      我需要的是系列文,我所加入的是本文中「3. 完整系列文功能」,我把抓文的字串改為"Windows8 8.1重灌筆記",取消掉原本的"、"改用空格,再將不同的文字標題擺在數字後面(如你的"有錢人想的和你不一樣"文章標題的排序方式依樣)目前顯示順序正確了!!應該是這樣對吧??

      當以系列文功能顯示時,會依照文章標題來排序
      >>這具有點不太懂意思,文章標題指的是??

      刪除
    3. 你目前的設定是符合「系列文」的設定,所以 ok.
      你目前兩篇文章標題這樣改也正確,文章排列就可以依照 1, 2 這樣的的順序了。
      最後的問題我相信你有答案了,可以試著想想為何你之前設定的文章標題是 (2) 排在前面,而現在可以 (1) 排在前面。

      刪除
    4. 最後的問題,我想應該是數字前的文章標題不一樣對吧??哈哈我只是跟著你設定,結果正確了,只是不知道這樣的觀念到底對不對??
      如果我這樣的想法沒錯,我在另外一篇文章也用了還沒修改前的方式,排序卻是正確的,難道,不是數字前的標題,而是"、"這個的關係??
      另外一篇http://www.hairblog.tw/2014/12/JapaneseStudies-Tokyo-1.html
      麻煩解惑!!謝謝喔!!

      刪除
    5. 中文的 js 排序問題,短篇幅也說不清楚,不過我相信其實你已經找到排序的規則了。如果想瞭解原理的話,跟樹狀標籤的排序是一樣的,可參考「多層樹狀標籤」留言 #1 的回覆。

      刪除
    6. 嗯嗯!!看完了!!雖然還是有點似懂非懂,不過也算解決問題了!謝謝啦^^

      刪除
  5. 這功能照理來說我的文章很適合用,但是......我好怕人家只看第一頁後面就都不想看了就跳離網頁了! 真的是萬分掙扎的功能><

    回覆刪除
    回覆
    1. 不太懂你的意思說~~難道你是指,沒有裝這個工具時,訪客比較容易繼續看其他文章;而裝了這個工具,訪客反而就跳離了??

      刪除
    2. 我想阿諾指的是本文的第一段後面所述:「當文章內容較長,分頁功能可以讓讀者稍微喘口氣。雖然有的網站是為了增加瀏覽次數而使用這個功能,但畢竟太過火而引起讀者反感,總是得不償失,相信站長們心中自有一把尺。」

      我雖然也偏向鉅細靡遺的撰文者,但文字量好難那麼豐富,有詞窮的問題。再者,原先的系列文章也比較適合我,寫到了想斷文的地方再開新篇。(提到此處,想起想問的...,來去!)

      刪除
    3. Orsino 的意思已經在你另一個 G+ 討論串溝通完了, 所以就不另外解釋了~

      刪除

張貼留言注意事項:

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