在這個「Blogger社群討論串」討論的主題為 "Blogger 較新的文章與較舊的文章之連結",也就是 "上一篇/下一篇文章" 的功能(不是指首頁或搜尋頁面的 "上一頁/下一頁" 分頁功能)。在文章頁面時,這兩個 Blogger 在頁面下方所設計的按鈕,說實在一直以來認為是個滿雞肋的擺設。試想,時間有限的情況下訪客多半是性急的,豈能奢望訪客有閒情逸致像玩刮刮樂般,來點點看「較新的文章/較舊的文章」會出現什麼寶藏?
或許在十年前部落格剛興起的時候,網站數量還不多,在當時的時空背景,訪客的確有可能如此逛網站。但在資訊爆炸的今天,沒有先把牛肉搬出來,是不會有人買單的。想讓訪客點擊「較新的文章/較舊的文章」,唯有先把文章標題秀出來,這才是一個正確的網頁設計。
不過在 Blogger 要做到這件事不太容易,以下大致先說明一下原理,想直接安裝「改造較新/較舊文章按鈕」,請直接跳「二、安裝程式碼」,安裝完的效果大致像下圖這樣──
從「Blogger 範本__(三)文章及留言區塊的程式碼」→「一、上下頁區塊」,可找到較新/較舊文章按鈕的程式碼。很可惜的是我們線索很少,只能從「較新/較舊文章的連結」來想辦法找到對應的文章標題。
從「Blogger 最新文章」→「一、從 Json 資料找縮圖」,我們可以瞭解一些 Json 的概念。從 Json 中能找到縮圖資料,自然也能找到文章標題。但我們不可能為了找到某篇文章的標題,而讀取整個網站的 feed,當文章很多時,載入速度會是個悲劇。
所幸 Blogger API 提供了一個參數「path」,可以經由文章網址來撈 feed 資料,利如這篇「使用 PICASA 的三大好處」網址為:
那麼在網址輸入以下字串可得到該篇文章的 feed(json格式):
在得到的 json 格式資料裡面,文章標題字串的位置就在 json.feed.entry[0].title.$t。如果曾研究過「最新文章」或「最新回應」的程式碼,相信這樣的解說足以知道如何操作了。
到後台「範本」→「編輯 HTML」,請搜尋</body> 這個字串,找到後在此字串的前一行,插入以下程式碼:
以上 K 行的內容為了節省空間而壓縮了程式碼,如想瞭解原始碼請下載「newer-older-post-button-131028.js」,不過這個檔案包含了 HTML/JS,所以是無法外連的。
如果對效果不滿意想修改程式碼參數,請繼續往下看。
首先聲明一下,為了讓大多數使用者安裝方便,將 CSS 也寫入了程式碼之中,這樣可以少幾個安裝步驟,因為對於 Blogger 範本不熟的使用者,只要多一個步驟,就是多了一分安裝失敗的可能性。而看得懂原始碼的資深讀者,可以自行修改 CSS 樣式,或是將 CSS 搬到</head> 之前的位置。
以下說明可以修改的參數,請對照程式碼行號──
F:請根據自己的版面寬度,調整文章標題區塊的寬度,例如想要加寬可以嘗試 "300px" 等數值。
G:較新/較舊文章按鈕中間夾著一個首頁按鈕,預設值 "N" 會將首頁按鈕隱藏,若想顯示首頁按鈕請改為 "Y"。
另外,若想將首頁按鈕改為圖案,可參考「Blogger 範本__(三)文章及留言區塊的程式碼」→「一、上下頁區塊」,將代表「首頁」的字串改為圖檔的 HTML 碼即可。
H、I:這兩行的圖案網址,可置換為自訂圖案網址;如果不想出現圖案,將網址字串清空,留下兩個雙引號 ""即可。
另外,如果要使用預設圖案,網址字串的 "s50" 可經由調整數值,更改圖案大小,例如改為 "s40" 就變的比較小、改為 "s60" 就變的比較大,其原理可參考「Blogger 熱門文章+任意尺寸縮圖」→「一、PICASA 圖片規則」。
開頭所提的「Blogger社群討論串」,+Pan Kuan 提供了其他部落格會使用的浮動按鈕樣式資訊,可將「較新/較舊文章按鈕」改為左、右箭頭的浮動按鈕。有了本文從文章 feed 取得文章標題的技巧後,下一篇將會修改這兩個按鈕,讓其功能更為實用。
或許在十年前部落格剛興起的時候,網站數量還不多,在當時的時空背景,訪客的確有可能如此逛網站。但在資訊爆炸的今天,沒有先把牛肉搬出來,是不會有人買單的。想讓訪客點擊「較新的文章/較舊的文章」,唯有先把文章標題秀出來,這才是一個正確的網頁設計。
不過在 Blogger 要做到這件事不太容易,以下大致先說明一下原理,想直接安裝「改造較新/較舊文章按鈕」,請直接跳「二、安裝程式碼」,安裝完的效果大致像下圖這樣──
一、取得文章標題的原理
從「Blogger 範本__(三)文章及留言區塊的程式碼」→「一、上下頁區塊」,可找到較新/較舊文章按鈕的程式碼。很可惜的是我們線索很少,只能從「較新/較舊文章的連結」來想辦法找到對應的文章標題。
從「Blogger 最新文章」→「一、從 Json 資料找縮圖」,我們可以瞭解一些 Json 的概念。從 Json 中能找到縮圖資料,自然也能找到文章標題。但我們不可能為了找到某篇文章的標題,而讀取整個網站的 feed,當文章很多時,載入速度會是個悲劇。
所幸 Blogger API 提供了一個參數「path」,可以經由文章網址來撈 feed 資料,利如這篇「使用 PICASA 的三大好處」網址為:
http://wayne-fu.blogspot.com/2013/10/google-drive-picasa-photo-space.html
那麼在網址輸入以下字串可得到該篇文章的 feed(json格式):
http://wayne-fu.blogspot.com/feeds/posts/summary?alt=json-in-script&path=/2013/10/google-drive-picasa-photo-space.html
在得到的 json 格式資料裡面,文章標題字串的位置就在 json.feed.entry[0].title.$t。如果曾研究過「最新文章」或「最新回應」的程式碼,相信這樣的解說足以知道如何操作了。
二、安裝程式碼
到後台「範本」→「編輯 HTML」,請搜尋
以上 K 行的內容為了節省空間而壓縮了程式碼,如想瞭解原始碼請下載「newer-older-post-button-131028.js」,不過這個檔案包含了 HTML/JS,所以是無法外連的。
如果對效果不滿意想修改程式碼參數,請繼續往下看。
三、修改參數
首先聲明一下,為了讓大多數使用者安裝方便,將 CSS 也寫入了程式碼之中,這樣可以少幾個安裝步驟,因為對於 Blogger 範本不熟的使用者,只要多一個步驟,就是多了一分安裝失敗的可能性。而看得懂原始碼的資深讀者,可以自行修改 CSS 樣式,或是將 CSS 搬到
以下說明可以修改的參數,請對照程式碼行號──
F:請根據自己的版面寬度,調整文章標題區塊的寬度,例如想要加寬可以嘗試 "300px" 等數值。
G:較新/較舊文章按鈕中間夾著一個首頁按鈕,預設值 "N" 會將首頁按鈕隱藏,若想顯示首頁按鈕請改為 "Y"。
另外,若想將首頁按鈕改為圖案,可參考「Blogger 範本__(三)文章及留言區塊的程式碼」→「一、上下頁區塊」,將代表「首頁」的字串改為圖檔的 HTML 碼即可。
H、I:這兩行的圖案網址,可置換為自訂圖案網址;如果不想出現圖案,將網址字串清空,留下兩個雙引號 ""即可。
另外,如果要使用預設圖案,網址字串的 "s50" 可經由調整數值,更改圖案大小,例如改為 "s40" 就變的比較小、改為 "s60" 就變的比較大,其原理可參考「Blogger 熱門文章+任意尺寸縮圖」→「一、PICASA 圖片規則」。
四、小結
開頭所提的「Blogger社群討論串」,+Pan Kuan 提供了其他部落格會使用的浮動按鈕樣式資訊,可將「較新/較舊文章按鈕」改為左、右箭頭的浮動按鈕。有了本文從文章 feed 取得文章標題的技巧後,下一篇將會修改這兩個按鈕,讓其功能更為實用。