最近接到一個需求：「能不能點擊首頁文章的大圖，就直接跳到文章網址？否則要點 "繼續閱讀"才能進入」。仔細想想的確很有道理，這才是友善的操作介面設計，以前怎麼都沒想過！於是現在 WFU BLOG 首頁文章封面圖，改為以最大尺寸呈現，並且加上文章頁面的連結。以下就來看看要怎麼做到這樣的效果。
<< 請注意！本篇文章含會員加值文章內容，需點數兌換 >>
(圖片出處: pexels.com)
一、增加點擊率
跟 "繼續閱讀"相比，封面圖的面積不但大多了，附上文章的超連結後，訪客的滑鼠也不必移動太遠就能按到，可說是非常友善且直覺的設計。
而且，大大的封面圖對於吸引點擊，有十足的加分效果。就像 Facebook 分享文章時，如果能產生大縮圖，那麼吸引點擊的效果，根據實測統計，將遠勝只顯示文章標題(沒有縮圖)的效果。
控制 FB 分享文章產生縮圖的技巧，可參考：
許多 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 搜尋
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>可參考「引用 jQuery 的注意事項」，檢查範本是否已安裝過 jQuery，如果已經安裝過請刪除此行，以免重複安裝。
3. 安裝程式碼
然後在範本中，繼續搜尋
存檔後即可看到效果。
想先看效果的話，也可前往 WFU BLOG 的首頁、或標籤頁面，按下封面圖即可前往文章頁面。
四、聯絡表單
如果是兌換加值文章內容的讀者，使用上有任何問題請用下面的表單與我聯繫：
更多 Blogger 使用技巧：