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

Blogger 相關文章 V2__安裝懶人包

$
0
0
舊版相關文章」的安裝方式稍微麻煩、複雜一些,如果對 Blogger 範本的操作不太熟的讀者,可能就無法安裝成功。因此,這個新版本改成安裝懶人包的方式,算是一個步驟就能完成安裝,相信不會再有安裝失敗的情形發生。

另外,WFU BLOG 的工具更新不一定會有版本號,但這個相關文章使用了 V2 的版本號,代表有重大變革,因此稍後會有詳細介紹。

有了這些新的功能,此版本可說是 Blogger 平台功能最強的「相關文章」工具,其勝過 LinkWithin 的理由可參考「舊版相關文章」→ 文章開頭的說明及舉例;而不建議安裝第三方工具的原因及影響請參考「為何部落格最好避免第三方外掛」。






以上範例網頁顯示的是裁切成正方形的 90x90 (px) 縮圖效果。



一、V2 版的特色及提醒


1. 抽樣方式進化

舊版抽樣的母體,為每個標籤近期的 N 篇文章(可自訂);新版的抽樣母體不必再額外設定,會從每個標籤的所有文章來抽樣→ 這代表年代再久遠的文章都有機會現身。

順帶一提,LinkWithin 雖掛名 "相關文章" 工具,其實抽樣的文章多半不相關,若掛名 "隨機文章" 比較恰當。


2. 任意尺寸縮圖進化

舊版任意尺寸縮圖的技術比較不成熟,選擇保持原圖比例時,當寬度固定後,每張縮圖的高度會不一致;新版的任意尺寸縮圖,不但原圖比例能保持,也能裁切成任意尺寸的縮圖,讓版面保持一致、美觀


3. 圖片可在大陸顯示

根據「讓大陸讀者看到 Picasa 圖片」的原理,縮圖的通訊協定一律轉換為大陸可讀取的 https


4. 更多相關文章功能

新版的此功能,版面改的比較簡潔、直覺;按下「更多相關文章」按鈕,便會重新篩選出一組新的相關文章。


5. CSS 可自訂

新版所有區塊的 CSS 全部開放自訂。


另外,有兩點注意事項需要先瞭解一下:






二、安裝程式碼


安裝過舊版相關文章的話,請先將舊版程式碼完整移除。

1. CSS 樣式

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

<style>
/* 相關文章2 */
.rltPost2_bar { /* 標題欄 */
}
.rltPost2_caption { /* 標題文字 */
font-size: 16px;
font-weight: bold;
line-height: 20px;
}
.rltPost2_allPost { /* 相關文章區塊 */
display: table-row;
}
.rltPost2_post { /* 個別文章區塊 */
padding: 5px;
display: table-cell;
}
.rltPost2_post:hover {
background: #ecf5ff;
text-decoration: none;
}
.rltPost2_post:hover .rltPost2_picFrame {
border: 1px solid transparent;
}
.rltPost2_picFrame{ /* 圖片外框 */
padding: 2px;
border: 1px solid #ddd;
}
.rltPost2_pic { /* 圖片 */
border-radius: 5px;
}
.rltPost2_title { /* 文章標題 */
font-size: 13px;
font-weight: bold;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.rltPost2_more { /* 更多文章按鈕 */
vertical-align: middle;
display: table-cell;
font-size: 60px;
}
.rltPost2_more:hover {
background: #ecf5ff;
}
</style>



2. 主程式碼

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



可先存檔看效果,預設參數將顯示裁切成 120x80 (px) 的長方形縮圖,類似本文留言區塊上方的相關文章效果(或是下圖)。




注意事項:由於前陣子發生「Google Drive(js檔)流量限速」的情形,為了避免將來某天這個小工具無預警罷工,建議讀者參考以上文章連結,自行將 js 檔分流:
  • 將程式碼 R行的 js 檔 "https://googledrive.com/host/0BykclfTTti-0SlU3SDg5RUVtNlk/related-post-2-140516-min.js" 上傳到自己的 Google Drive 空間 → 取得自己的 js 檔連結 → 將自己的 js 檔連結置換原本的字串。

需要修改參數的話,請跳到下個段落。想看正方形縮圖效果可前往範例網頁:




三、修改參數


如果想要自訂參數的話,請對照程式碼行號──

E:顯示相關文章的數量

F:設定縮圖的寬度

G:設定縮圖的高度

H:建議不要變更預設值,"Y" 代表縮圖會從原圖適當地裁切成指定的尺寸。如非想要讓縮圖變形,那麼參數改為 "N" 的話,代表縮圖強制從原圖變形為指定的尺寸。

I:相關文章工具的標題文字

J:可自訂 "更多相關文章" 按鈕的字元或圖示,也可使用 http 開頭的圖片網址。

K:文章沒有縮圖時的替代圖片,可改為自訂圖片網址(只限 PICASA 圖片)。請特別注意紅字部份的參數,在圖檔名稱之前的參數 "s????"(或其他各種英文混合數字的參數),請務必改成 "s72-c"。不清楚原理的話,可參考「PICASA 圖示製作技巧」→「一、PICASA 圖片規則」。

舉個簡單的例子,最常看到的 PICASA 圖片網址型態為 http://.../s1600/wfu.jpg → 請改為 http://.../s72-c/wfu.jpg

L:如果希望這個小工具出現在留言區塊之前的話,那麼不必變動此參數;如果是非官方範本、或想擺放在自訂位置,請更改本行參數──
  • 如果要填入區塊的 id,請填入 "#" + id 名稱,例如 "#related-post"。
  • 如果要填入區塊的 class,請填入 "." + class 名稱,例如 ".related-post"。



四、修改 CSS / 設定文章標題高度


如果想要自訂 CSS 的話,請對照 CSS 區塊的綠字提示,即可找到對應的區塊來修改參數。

特別提出一點,/* 文章標題 */這個區塊設計了特別的參數 -webkit-line-clamp: 3,如果是 Chrome 家族的瀏覽器,文章標題預設最多顯示三行,超過會顯示 "...",可以用來控制文章標題的高度,讓版面美觀。



五、常見 FAQ


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

Viewing all articles
Browse latest Browse all 784

Trending Articles