讓 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) 的方法
留言