讓 Blogger 首頁能點擊圖片就進入文章頁面

最近接到一個需求：「能不能點擊首頁文章的大圖，就直接跳到文章網址？否則要點 "繼續閱讀" 才能進入」。仔細想想的確很有道理，這才是友善的操作介面設計，以前怎麼都沒想過！

於是現在 WFU BLOG 首頁文章封面圖，改為以最大尺寸呈現，並且加上文章頁面的連結。以下就來看看要怎麼做到這樣的效果。

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

(圖片出處: pexels.com)

一、增加點擊率

跟 "繼續閱讀" 相比，封面圖的面積不但大多了，附上文章的超連結後，訪客的滑鼠也不必移動太遠就能按到，可說是非常友善且直覺的設計。




而且，大大的封面圖對於吸引點擊，有十足的加分效果。就像 Facebook 分享文章時，如果能產生大縮圖，那麼吸引點擊的效果，根據實測統計，將遠勝只顯示文章標題(沒有縮圖)的效果。

控制 FB 分享文章產生縮圖的技巧，可參考：

• 分享文章到 Facebook 的 Meta 設定﹍縮圖+標題+摘要+作者資訊
• 選擇喜歡的圖片當作 Blogger 文章封面圖

許多 Blogger 非官方範本也是利用這樣的原理，在首頁以卡片式的版面呈現，每篇文章只顯示大縮圖及文章標題，且點擊圖片就能直接進入文章頁面，類似 Blogger 動態檢視範本的某些版面。




上圖為「雅痞書店」的效果，採取類似的設計方式，而且點擊標題、縮圖、繼續閱讀這三處都能跳到文章頁面，可減少讀者操作上的時間。

二、修改範本的方法

有兩種方式可以達成本篇的任務，第一種比較麻煩，範本內容要大改，如果對程式碼、或 Blogger 範本、或 HTML/CSS 不熟悉的話，很有可能發生災難，請小心操作以下的內容。

在修改範本之前，如果第一次安裝本站工具的讀者，建議先閱讀「備份範本的訣竅」系列文章。

1.使用判斷式

製作的原理是使用 Blogger 判斷式語法，請先瞭解「Blogger 頁面判斷式的各種應用」，接著運用「Blogger 頁面判斷語法__五個實用範例說明」→「三、在首頁顯示自訂尺寸縮圖及文章摘要」，就可完成約 80% 的工作了。

摘要一下我們要做的事：

• 將原本顯示文章內容的區塊，利用判斷式，在首頁時重新安排版面。
• 例如將版面設定為，依序顯示文章標題、文章中的第一張圖、摘要。
• 最後利用 CSS 美化版面。

2.實際範例

請先依照「Blogger 頁面判斷語法__五個實用範例說明」→「三、在首頁顯示自訂尺寸縮圖及文章摘要」，做完第 2 點之前的動作。

接著將第 2 點的程式碼，改為以下內容：

<b:if cond='data:blog.url == data:blog.homepageUrl'> <!--首頁時使用縮圖及文摘-->
<b:if cond='data:post.firstImageUrl'> <!--檢查文章是否使用圖片-->
<div class='home-thumbnail'> <!--可用 home-thumbnail 這個 class 設定封面圖 CSS 樣式-->
<a expr:href='data:post.canonicalUrl' target='_blank'><img expr:src='data:post.firstImageUrl' /></a> <!--使用文章第一張圖當作封面圖 點擊後連往文章網址-->
</div>
</b:if>
<div class='home-snippet'> <!--可用 home-snippet 這個 class 設定文摘 CSS 樣式-->
<data:post.snippet/> <!--文摘-->
</div>
<b:else/> <!--非首頁時，使用 Blogger預設版面-->
<data:post.body/> <!--文章內容-->
</b:if>
<!--<data:post.body/>--> <!--此行為註解、保留原本的程式碼-->
基本上所有的說明及修改方法，都標示在綠字的註釋，就不另外解釋了。

如果熟悉 Blogger 判斷式、HTML、CSS，可以根據自己的需求，來修改首頁的版面配置。

三、簡易的 JS 程式碼

1. 提醒

第二種修改方法比較簡單，算是懶人包，加入一段 JS 碼即可自動幫封面圖加上連結。

不過採用這個方法之前需要先提醒一下：

• 若採第一種方法，版面比較整齊畫一
• 若採第二種方法，繼續閱讀之前沒有放圖片的話，首頁就不會出現圖片
• 會採第二種方法的站長，通常每篇文章的編排有固定格式，例如文章開頭就是封面圖，接著才是文字
  

2. 準備動作

確定採第二種方法的話，一樣請先備份範本。

接著到後台「範本」→「編輯 HTML」，游標點進範本區塊，按 Ctrl-F 搜尋 </head> 這個字串，找到後在此字串的前一行，插入以下程式碼：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

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


3. 安裝程式碼

然後在範本中，繼續搜尋 </body> 這個字串，找到後在此字串的前一行，插入以下程式碼：

存檔後即可看到效果。

想先看效果的話，也可前往 WFU BLOG 的首頁、或標籤頁面，按下封面圖即可前往文章頁面。

四、聯絡表單

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

稱呼：(必填)

電子郵件：(必填)

本文標題或網址：(必填)

會員編號：(必填)

請詳細描述您的需求、問題或意見，如提供的資訊不足，可能無法回覆：(必填)

更多 Blogger 使用技巧：