[ Blogger ] [ XML ] 如何在行動版網頁加入文字版 Related Posts 相關文章功能

繼上一篇文章 [ Blogger ] [ XML ] 如何在文章下方加入文字版 Related Posts 相關文章功能

*註：本篇文章的程式碼參考來源為這個部落格，但該篇文章也是參考他人的作法，並非程式碼原作者，而文章內註明的原作者網站已失去連結，所以原作者已不可考，因此程式碼在本站是以 Creative Commons 3.0 釋出。若你是程式碼原作者，認為這侵犯到你的著作權的話，請直接聯絡站長協助修改或撤下這篇文章。

文字版 Related Posts 相關文章功能除了可以在電腦版網頁呈現，只要把語法放置在適當的位置，在 Blogger 行動版網頁一樣也可以顯示喔！

只是要在行動版網頁加入文字版 Related Posts 功能，必須要先在行動版網頁顯示 Label 標籤，這樣 Related Posts 的程式碼才能藉由 Label 標籤顯示相關文章。

關於如何在行動版網頁加入 Label 標籤，請移駕至以下頁面學習：

[ Blogger ] [ XML ] 如何在 Blogger 行動版網頁加入 Label 標籤

如果行動版網頁順利呈現 Label 標籤，就開始學習如何在行動版網頁加入文字版 Related Posts 吧！

本文開始~

首先請到 Blogger 管理介面 -> 範本 -> 編輯 HTML

在程式碼視窗內按下鍵盤 " Ctrl + F " 搜尋字串 " mobile-post "

（使用 Mac OS X 的話，請按 " Command + F "）

會搜尋到以下語法：

<b:includable id='mobile-post' var='post'>

按下鍵盤 " Control + F " ，搜尋以下字串：

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

然後在 </b:loop> 前面加入以下  程式碼：


<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=RelatedLabels&max-results=10"' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>

P.S. max-results=10 是設定「顯示標籤數」最多為 10 個，一樣可以依照自己的需求更改數值！

最後在你想要顯示的 post-footer-line 加入以下程式碼：


<b:if cond='data:blog.pageType == "item"'>
<script type='text/javascript'>
ShowRelatedPosts('<data:post.url/>');
</script>
</b:if>

*請注意：以下圖為例的話，上面的程式碼是被包含在 <div class='post-footer-line post-footer-line-3'> 這個 Class 裡面，實際上的應用要看你個人的需求，你可以把上面的程式碼放在任何一個 post-footer-line ，或甚至是放在 post-header-line。此外， post-footer-line-3 這個 Class 是多建立出來的，原本是沒有這個 Class 的喔！

按下儲存範本之後，行動版網頁的文章就會顯示 Related Posts 囉！

題外話，一旦使用這個功能，你就必須特別注意文章標籤的使用，盡量不要一篇文章標了一大堆標籤，不然 Related Posts 會列出「完全不相關」的文章喔！

如何在文章下方加入文字版 Related Posts 相關文章功能的教學就到這邊~

我們下次見~

Search

2015年8月29日星期六