Search in This Site

㊕ 天氣逐漸轉涼,早晚需注意保暖以免著涼:D ◆ Welcome to Laird Studio! 歡迎蒞臨萊爾德工作室! ◎ 本站的留言系統全面採用 Google+ ,歡迎多多與我們互動! ☏ 對網站有任何問題或建議,都非常歡迎使用"Guestbook"留言板,讓我們知道您的想法喔 (。◕∀◕。)

2015年7月18日 星期六

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

標籤: , , , , ,

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




相信大家都有注意到我們文章的下方會有一個 Related Posts 相關文章的功能吧~

這個功能對一個網站來說是非常重要的,假如讀者看完一篇文章後,因為 " 相關文章 " 這個功能又看到了他們有興趣的文章,這樣除了能增加他們停留在網站的時間,對他們也有無比的好處。


Laird Studio 使用的 Related Posts 其運作原理是利用 Blogger 的 " 標籤 " 功能,當一篇文章是使用多個標籤的時候,程式就會從這些標籤中的文章裡面隨機挑選五篇 ( 預設 ) 顯示出來。

而這個功能目前只有文字版本,如果站長想要圖片版本,建議可以使用 Linkwithin 隨機文章小工具即可。


講了那麼多,到底 Related Posts 這個功能是怎麼做出來的呢~

趕快來一睹為快吧~

本文開始~




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

請複製以下程式碼,然後在 </head> 標籤之前貼上:

<script type='text/javascript'>
      //<![CDATA[ 
      <!-- Script functions for Related Posts: RelatedLabels(), RemoveDuplicatedPosts(), contains(), ShowRelatedPosts()--> 
                                                             var relatedPostsNum = 0; 
                                                             var relatedTitles = new Array(); 
      var relatedUrls = new Array(); 
      var relatedDates = new Array(); 
      function RelatedLabels(json) { 
        for (var i = 0; i < json.feed.entry.length; i++) {
          var entry = json.feed.entry[i]; 
          relatedTitles[relatedPostsNum] = entry.title.$t;
          relatedDates[relatedPostsNum] = entry.published.$t.substr(0,10); 
          for (var j = 0; j < entry.link.length; j++) { 
            if (entry.link[j].rel == 'alternate') { 
              relatedUrls[relatedPostsNum] = entry.link[j].href; 
              relatedPostsNum++; 
              break; 
            } 
          } 
        } 
      } 
      function RemoveDuplicatedPosts(PostUrl) { 
        var tmpUrls = new Array(0); 
        var tmpTitles = new Array(0); 
        var tmpDates = new Array(0); 
        function contains(a, e) { 
          for(var j = 0; j < a.length; j++) 
            if (a[j]==e) 
              return true; 
          return false; 
        } 
        for(var i = 0; i < relatedUrls.length; i++) { 
          if(!contains(tmpUrls, relatedUrls[i]) && PostUrl != relatedUrls[i]) { 
            tmpUrls.length += 1; 
            tmpUrls[tmpUrls.length - 1] = relatedUrls[i]; 
            tmpTitles.length += 1; 
            tmpTitles[tmpTitles.length - 1] = relatedTitles[i]; 
            tmpDates.length += 1; 
            tmpDates[tmpDates.length - 1] = relatedDates[i]; 
          } 
        } 
        relatedTitles = tmpTitles; 
        relatedUrls = tmpUrls; 
        relatedDates = tmpDates; 
      } 
      function ShowRelatedPosts(PostUrl) { 
        RemoveDuplicatedPosts(PostUrl); 
        var r = Math.floor((relatedTitles.length - 1) * Math.random()); 
        var i = 0; 
        if (relatedTitles.length > 0) { 
          document.write('Related Posts: <ul>'); 
          while (i < relatedTitles.length && i < 5) { 
            document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a> - ' + relatedDates[r] + '</li>'); 
            if (r < relatedTitles.length - 1) 
              r++; 
            else 
              r = 0; 
            i++; 
          } 
          document.write('</ul>'); 
        } 
      } 
      //]]> 
    </script>



接著按下鍵盤 Control + F ,搜尋以下字串:( Mac 請按下: CMD + F )

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


然後在 </b:loop> 前面加入以下 <!-- Fixed for Related Posts --> 程式碼:

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



2015 / 11 / 26 更新

*請注意:假如你在 </b:loop> 之前加入上述的程式碼,儲存範本之後,網站發生版面錯亂或文章內容顯示不出來等問題,請確認 <b:if cond='data:post.labels'> 這整段程式碼是否與下面相符,如果皆相同,請試著把 <span class='post-labels'> 以及 </span> 刪除後,再加入上面的 < Fixed for Related Posts > 程式碼在 </b:loop> 之前

<span class='post-labels'>   (可省略)
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'>
<data:label.name/>
</a>
<b:if cond='not data:label.isLast'>

</b:if>
</b:loop>
</b:if>
</span>   (可省略)



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

<!-- Fixed for Related Posts --> 
<b:if cond='data:blog.pageType == "item"'> 
  <script type='text/javascript'> 
    ShowRelatedPosts(&#39;<data:post.url/>&#39;); 
  </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 的教學是針對電腦版網頁,如果你也想要在行動版網頁加入 Related Posts 的話,請移駕至以下網頁繼續學習:

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



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

我們下次見~



TOP