Quantcast
Channel: WFU BLOG
Viewing all articles
Browse latest Browse all 784

Blogger 文章列表 RWD 版﹍(3) 依日期排列+讚統計

$
0
0
2015.5.27 更新:本次更新的程式碼內容,主要是為了配合行動裝置的需求,改為自適應(RWD)版面,並稍微精簡程式碼。由於原有的架構沒有改變,因此並未修改版本號碼,直接在原文章網址做更正,有需要的讀者請直接更新程式碼。


「文章列表極速版」系列的優點可參考這篇「文章列表依日期排列」→「一、文章列表極速版的特點」,而這篇增加的「讚」統計數據,可以為文章列表加分不少,同時也提供了讀者挑選文章的指標,導覽效果比基本款好一些。

以下先簡單介紹一下特色,想直接安裝請跳「二、安裝程式碼」。




一、「讚」統計功能特點


1. 顯示速度極快:兩年前寫過「文章列表+"讚"統計」的舊版本,不過當時技術不夠,顯示讚按鈕的速度較慢。

2. 三種統計數據:Facebook 的 "讚" 統計數據,官方從過去以來經過多次修正,現在的資料庫其實分別有三種數據:
  • 統計
  • 分享數統計
  • 留言數統計

而本系列的文章列表,將一律使用三種數據的總和,意思就是說,若文章列表顯示了 20 個 "讚",其實是代表 "讚" + "分享" + "留言" 三種數據的加總。

3. 可自訂爆表數量:沿用舊版本的設計,使用者能夠自訂 "爆表數量",若設定了 "99",則代表超過 99 個讚以後,一律顯示為 "" 這樣的字串(或自訂字串)。




二、安裝程式碼


請新開一篇文章 → 複製以下程式碼後存檔:


以下修改請參照程式碼行號的說明──

A:可參考「如何使用jQuery版本」,檢查範本是否已安裝過 jquery。若已經安裝過,可刪除本行。

G:一次載入的文章數,基本上預設值 50 已經速度很快了。

H:讚統計爆表數量,預設值 99代表超過這個數字後會顯示 "爆"。

I:讚爆表時顯示的字串。

J:按鈕文字的設定,例如改成 "Load More"。

K:按鈕文字的設定,例如改成 "Load All"。

L:文章開合的效果,預設值 "fadeToggle" 為「淡入淡出」的效果;若改為 "slideToggle" 則有「滑動開合」的效果。

M:"讚" 的圖示網址,可使用自訂的圖示網址。如果使用不同尺寸的圖片,可能需要修改 CSS 以符合版面美觀。

N:月份的字串設定,可改為中文或自訂字串。

P:由於過去發生「Google Drive(js檔)流量限速」的情形,為了避免將來某天這個小工具無預警罷工,建議讀者有空的時候,參考以上文章連結,自行將綠色字串的 js 檔分流。


如果沒有要修改 CSS 的話,完成以上修改後即可存檔。請特別注意 P 行的分流動作, 也請注意 js 檔名的日期字串,當本站的工具沒有出新的版本號、只做小部分修改時,會直接修改 js 檔的日期字串,作為小改版的依據。WFU 會將舊的日期版號直接刪除,以最新的日期版號代替,而沒有做分流動作的讀者,安裝的工具隨時可能因為舊版號檔案被刪除而失效



三、修改 CSS


如果要自行修改 CSS 的話,每個區塊都有註釋可參考。例如發現 "讚" 或統計數字被擠到下一行(或使用了自訂的 "讚" 圖示),可能需要改兩個地方:
  • /* 文章標題 */這個區間,修改 width 的數值。
  • /* 讚區塊 */這個區間,修改 width 的數值。

現在可以將文章發佈,接著將這篇文章的連結放到部落格上方的水平選單上(或安裝「浮動導覽列」、「下拉選單」功能),提供訪客較佳的導覽效果。

如果尚未看過前言提供的效果連結,請按下面的按鈕:




四、RWD 效果


2015.5.27 新增內容──

行動版的效果,模擬 iPhone4 直立的畫面如下:

blogger-toc-date-like-count-mobile


模擬 iPhone6 橫躺的畫面如下,由於寬度足夠,效果跟網頁版一致:

blogger-toc-date-like-count-web


文章列表極速版各版本:

Viewing all articles
Browse latest Browse all 784

Trending Articles