提升讀者停留時間：為 Blogger 新增「響應式相關文章」卡片 (完整SOP)
想讓讀者在您的網站上停留更久、瀏覽更多文章嗎？在每篇文章的結尾處，提供一個引人注目的「相關文章」區塊，是引導讀者深度探索、降低跳出率最有效的方法之一。
然而，Blogger 內建的功能在這方面有所欠缺。本篇教學將提供您一套經過驗證的完整解決方案，結合功能強大的腳本與現代化的 CSS (Cascading Style Sheets)，為您的 Blogger 網站新增一個專業、美觀且能自動適應手機、電腦版面的響應式 (Responsive) 相關文章卡片系統。
程式碼總覽 (The Code Library)
本教學會使用到三組程式碼，您可以先大致瀏覽，我們會在下一個章節說明如何將它們安裝到您的範本中。
A. 核心功能腳本 (主要邏輯)
這段程式碼負責抓取與目前文章有相同標籤 (Label) 的文章、處理資料、並動態生成相關文章列表的 HTML。
<b:if cond='data:blog.pageType == "item"'><style type='text/css'>/* Related Posts Container Base Style */#related-posts {
padding-top: 5px;
}</style><script type='text/javascript'>//<![CDATA[
var relatedTitles = new Array();var relatedTitlesNum = 0;var relatedUrls = new Array();var thumburl = new Array();function related_results_labels_thumbs(json){for(var i=0;i<json.feed.entry.length;i++){var entry=json.feed.entry[i];relatedTitles[relatedTitlesNum]=entry.title.$t;try{thumburl[relatedTitlesNum]=entry.media$thumbnail.url;}catch(error){s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){thumburl[relatedTitlesNum]=d;}else{thumburl[relatedTitlesNum]='https://placehold.co/600x338/FD7E14/FFFFFF?text=No+Image';}}if(relatedTitles[relatedTitlesNum].length>50)relatedTitles[relatedTitlesNum]=relatedTitles[relatedTitlesNum].substring(0,50)+"...";for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){relatedUrls[relatedTitlesNum]=entry.link[k].href;relatedTitlesNum++;}}}}function removeRelatedDuplicates_thumbs(){var tmp=new Array(0);var tmp2=new Array(0);var tmp3=new Array(0);for(var i=0;i<relatedUrls.length;i++){if(!contains_thumbs(tmp,relatedUrls[i])){tmp.length+=1;tmp[tmp.length-1]=relatedUrls[i];tmp2.length+=1;tmp3.length+=1;tmp2[tmp2.length-1]=relatedTitles[i];tmp3[tmp3.length-1]=thumburl[i];}}
relatedTitles=tmp2;relatedUrls=tmp;thumburl=tmp3;}function contains_thumbs(a,e){for(var j=0;j<a.length;j++)if(a[j]==e)return true;return false;}function printRelatedLabels_thumbs(){for(var i=0;i<relatedUrls.length;i++){if((relatedUrls[i]==currentposturl)||(!(relatedTitles[i]))){relatedUrls.splice(i,1);relatedTitles.splice(i,1);thumburl.splice(i,1);i--;}}var r=Math.floor((relatedTitles.length-1)*Math.random());var i=0;if(relatedTitles.length>0){document.write('<h2>'+relatedpoststitle+'</h2>');}document.write('<div class="card-list-container">');while(i<relatedTitles.length&&i<maxresults){var postURL=relatedUrls[r];var postTitle=relatedTitles[r];var thumbnailURL=thumburl[r];document.write('<a class="article-card" href="'+postURL+'">'+'<img class="card-thumbnail" src="'+thumbnailURL+'" alt="'+postTitle+'" onerror="this.onerror=null;this.src=\'https://placehold.co/600x338/FD7E14/FFFFFF?text=No+Image\';"/>'+'<div class="card-content">'+'<h3 class="card-title">'+postTitle+'</h3>'+'</div>'+'</a>');if(r<relatedTitles.length-1){r++;}else{r=0;}
i++;}document.write('</div>');
}//]]></script></b:if>B. 觸發執行腳本 (設定與呼叫)
這段程式碼負責呼叫上面的核心功能，並讓您可以自訂標題與顯示數量。
<b:if cond='data:blog.pageType == "item"'><div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'/>
<script expr:src='"/feeds/posts/default/-" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"' type='text/javascript'/>
</b:loop>
<script type='text/javascript'>
var currentposturl="<data:post.url/>";
var maxresults=5;
var relatedpoststitle="您可能也會喜歡";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div></b:if>C. 卡片樣式 CSS (外觀設計)
這段 CSS 負責將相關文章列表美化成響應式的卡片佈局。
/* --- Card Layout Styles for Related Posts --- */
.card-list-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 25px;
padding: 20px 0;
}
.article-card {
display: flex;
flex-direction: column;
text-decoration: none;
background-color: #fff;
border: 1px solid #e9ecef;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 4px 12px rgba(0,0,0,0.08);
transition: all 0.3s ease;
}
.article-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(0,0,0,0.12);
}
.card-thumbnail {
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
display: block;
}
.card-content {
padding: 20px;
flex-grow: 1;
display: flex;
flex-direction: column;
justify-content: center;
}
.card-title {
margin: 0;
font-size: 1.1em;
line-height: 1.5;
color: #34495e;
}安裝標準作業流程 (SOP)
請依照以下四個步驟，將程式碼安裝到您的 Blogger 範本中。
-
進入 HTML 編輯模式 (並備份！)
⚠️ 絕對必要： 在修改任何程式碼之前，請務必先備份！
前往您的 Blogger 後台，點選「主題」。點擊「自訂」按鈕旁的下拉箭頭，選擇「備份」以下載目前的範本。備份後，再次點擊下拉箭頭，選擇「編輯 HTML」。
-
貼上「核心功能腳本」
在 HTML 編輯器中，使用 Ctrl + F 或 Cmd + F 搜尋 </head> 標籤。將 A. 核心功能腳本 的完整程式碼，貼在 </head> 標籤的正上方。
-
貼上「觸發執行腳本」
再次使用搜尋功能，找到 <data:post.body/> 標籤。這代表您文章內文的位置。將 B. 觸發執行腳本 的完整程式碼，貼在 <data:post.body/> 標籤的正下方。
-
貼上「卡片樣式 CSS」
搜尋 <b:skin>。您會找到類似 <b:skin><![CDATA[ ... ]]></b:skin> 的區塊，這是您範本存放所有 CSS 的地方。將 C. 卡片樣式 CSS 的完整程式碼，貼在 ]]></b:skin> 的正上方。
-
儲存範本
點擊右下角的「儲存」(磁碟片圖示) 按鈕。
客製化選項
安裝完成後，您可以透過修改「B. 觸發執行腳本」中的幾個變數，來微調功能：
- 顯示數量：
找到 var maxresults=5;
修改數字 5 來決定要顯示幾篇文章。 - 區塊標題：
找到 var relatedpoststitle="您可能也會喜歡";
修改引號中的文字，來改變區塊的標題。
現在，您的文章頁下方就會自動出現基於相同標籤、且外觀專業的相關文章卡片了！
Tags
Blogger技巧