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

pixabay.com

接續前面兩篇教學，由於朋友想建立一個展示作品集的網頁，因此希望網站能擁有「點擊圖片進入該篇文章」的功能。而在預設的情況下，圖片點開後會是以 「Blogger 圖片燈箱」 顯示，無法得知觀眾對哪個作品有興趣。

本篇將會教你如何修改才能讓桌面 (Desktop) 與行動裝置 (Mobile) 版的界面能都擁有點擊圖片進入文章頁面的功能。

流程

其實關鍵就是在文章呈現方式的 HTML 程式碼中插入 <a expr:href='data:post.canonicalUrl' target='_blank'><img expr:src='data:post.firstImageUrl' /></a>讓 Blog 以文章的第一張圖作為封面。習翠熊維尼

搜尋 <data:post.body/>

正常情況下應該會找到兩筆 ，它們分別代表著桌面 (Desktop) 與行動裝置 (Mobile) 版的界面。

程式碼區段中有  <b:includable id='mobile-post' var='post'> 的是行動裝置版本；如果是 <b:includable id='post' var='post'> 則為桌面版本。

找到 <data:post.body/> 之後，用以下程式碼取代即可。圖片的寬度可以用 width='800px' 來依桌面或行動裝置自訂。

桌面版

<b:if cond='data:post.url'>

<b:if cond='data:blog.url != data:post.url'>

<a expr:href='data:post.url'><data:post.title/></a>

<a expr:href='data:post.canonicalUrl' target='_blank'><img align='center' expr:src='data:post.firstImageUrl' width='800px'/></a>

<div class='home-snippet'> 

<data:post.snippet/> 

</div>

<b:else/>

<data:post.body/> 

</b:if>

<!-- 桌面版程式碼 -->

行動版

<div class='mobile-post-outer'>

<a expr:href='data:post.url'>

<b:if cond='data:post.title'>

<h3 class='post-title entry-title' itemprop='name'>

<b:if cond='data:post.link'>

<a expr:href='data:post.link'><data:post.title/></a>

<b:else/>

<b:if cond='data:post.url'>

<b:if cond='data:blog.url != data:post.url'>

<a expr:href='data:post.url'><data:post.title/></a>

  <a expr:href='data:post.canonicalUrl' target='_blank'><img align='center' expr:src='data:post.firstImageUrl' width='300px'/></a>

<b:else/>

<data:post.title/>

</b:if>

<b:else/>

<data:post.title/>

</b:if>

</b:if>

</h3>

</b:if>

<!-- 行動裝置程式碼 -->

結語

經過這樣改造之後，文章的點擊面積會比原始的繼續閱讀或標題大。不但對讀者友善，也有助於提昇訪客體驗和站長收集資料。

雖然朋友要的網頁效果是改出來了，但行動裝置版的圖片卻會靠左對齊，即使用置中語法也調不回來。

等有空再來調整細節吧。

延伸閱讀

讓 Blogger 行動裝置 (Mobile) 版面顯示全文

讓 Blogger 文章無限捲動 (Infinite Scrolling) 的方法