2016年11月9日

Blogger 相關文章 V4﹍行動版專用

A+
不少讀者都詢問過「相關文章 V2 (含縮圖功能)」能否裝在手機版,實際上如果真的這麼做的話,一定馬上就破版,因為行動裝置有著各種不一樣的螢幕寬度,加上直立、橫躺的操作,各種專為行動版而設計的工具一定要符合 RWD 才行。

除此之外,V2 的版面也不適合做成 RWD,如果要將「相關文章 + 縮圖」放在行動裝置,也許擺設上需要 "左半部縮圖、右半部文章標題" 這樣的配置。

因此這個為行動版設計的「相關文章 V4」,就是採取這樣的版面。如果你的行動版網站,不想只放純文字的相關文章,那麼可以考慮 V4 這個版本。



<< 請注意!本篇文章含會員加值文章內容,需點數兌換 >>

(圖片出處: pexels.com)


一、相關文章特點


1. V4 介紹

如果沒用過本站相關文章工具的讀者,以下簡單介紹一下 V4 的特點:

  • 自動從該篇文章的標籤,隨機挑選指定篇數的文章來顯示
  • 可自訂縮圖尺寸
  • 可自訂版面 CSS
  • 需要使用 PICASA 圖床(從 Blogger 上傳)才能正常處理縮圖

下面是行動版的模擬效果圖:

blogger-related-posts-v4-demo-Blogger 相關文章 V4﹍行動版專用


2. 其他適合行動裝置的版本

以下的相關文章版本,沒有縮圖,以純文字顯示:




二、準備動作


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

<script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'></script>
<style>
/* 相關文章 V4 */
.rltPost4_caption {
margin: 15px 0;
font-size: 14px;
font-weight: bold;
line-height: 20px;
}
.rltPost4_post {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
margin-bottom: 10px;
}
.rltPost4_title {
padding-left: 10px;
font-size: 14px;
font-weight: bold;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
line-height: 20px;
height: 60px;
}
</style>

第一行綠色字串可參考「引用 jQuery 的注意事項」,檢查範本是否已安裝過 jQuery,如果已經安裝過請刪除此行,以免重複安裝。

其餘的部分,如果對 CSS 熟悉可自行修改參數。



三、安裝程式碼


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


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

F:顯示相關文章的數量(例如設為 5 代表最多顯示 5 篇,若該篇文章的標籤,沒有足夠的相關文章,則不一定能顯示到 5 篇)

G:設定縮圖的寬度

H:設定縮圖的高度

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

J:文章沒有縮圖時的替代圖片,可改為自訂圖片網址(只限 PICASA 圖片)。

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




四、聯絡表單


加值文章關閉留言板功能,使用上有任何問題請用下面的表單與我聯繫:




五、常見 FAQ


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

Q1: "相關文章推薦" 的大標題有時候會顯示不出來,有時候可以,不知道可能是哪裡有問題呢?

Ans: 可能該篇文章的標籤沒有其他文章,就無法產生相關文章。


Q2: 我昨天換了圖源(為了增加專頁的瀏覽量)之後,「相關文章」都抓不到圖片,只能顯示預設圖片,不知道為什麼?

Ans: 抓不到圖片表示部落格 feed 抓不到縮圖資料,可能性有很多種,圖床不對、格式不對、隱私權設定不對...。要讓 Blogger 抓到縮圖,最簡單的方法是文章裡第一張圖片,從後台編輯文章的畫面上傳,就絕對抓得到了。


Q3: 我某些文章可以顯示相關文章、某些文章不行?

Ans: 除了「官方文件」註明標籤名稱不得使用的字元 &<>@!+, 之外,注意到你的標籤使用了 "#",也請不要使用這個字元,相關文章就能正常顯示了。


更多實用工具: