Blogger 添加隨機文章教學,現代化 JavaScript 程式碼不調用外部函式庫
經營部落格或資訊類網站時,為了吸引訪客瀏覽更多頁面,通常會在本文內容以外的區域展示文章連結,如最新文章、相關文章或隨機文章。其中「隨機文章」是從全站文章隨機挑選幾篇展示,相較於依照時間(最新)或瀏覽次數(熱門)抓取,隨機文章可以讓讀者看到更多不同內容。相對地,網站管理者需定期檢視文章,避免展示過時或無效的文章。


隨機文章程式碼介紹:

本文分享的隨機文章程式碼是由 ChatGPT 協助撰寫,主要是透過 Blogger JSON Feed 抓取文章,並在本機端利用 JavaScript 處理資料,不需要任何外部函式或第三方資源。其運作流程為:
  1. 先發送一次 API 請求,取得全部文章的總數。
  2. 再發送第二次 API 請求,從全部文章中隨機選擇一個區段抓取 50 篇文章。
  3. 在本機端瀏覽器上,利用 JavaScript 整理抓取到的資料,從這 50 篇文章中隨機挑選 10 篇文章,並生成 HTML 元素用於網站展示。


Blogger 隨機文章程式碼:

<style>
#random-posts img {
  float:left; margin-right:10px; width:80px; height:60px;
  background:#F5F5F5; padding:3px; object-fit:cover;
}
ul#random-posts{list-style:none;padding:0;}
#random-posts li{margin-bottom:10px;display:flex;align-items:center;}
#random-posts a{color:#000;text-decoration:none;}
#random-posts a:hover{color:#3f00ff;}
</style>

<ul id="random-posts"></ul>

<script>
(async()=>{
  const feed='/feeds/posts/default?alt=json',
        show=10, //要顯示的隨機文章數量
        fetchCount=50; //向 Blogger Feed 抓取文章數量
  try{
    const total=(await (await fetch(feed+'&max-results=0')).json())
      .feed.openSearch$totalResults.$t;
    if(total==0)return;

    const start=Math.max(1,Math.floor(Math.random()*(total-fetchCount+1))+1);
    const entries=(await (await fetch(`${feed}&start-index=${start}&max-results=${fetchCount}`)).json())
      .feed.entry||[];
    const list=document.getElementById('random-posts');

    entries.sort(()=>0.5-Math.random()).slice(0,show).forEach(e=>{
      const title=e.title.$t,
            link=e.link.find(l=>l.rel==='alternate').href,
            thumb=e.media$thumbnail?.url;
      list.innerHTML+=`
        <li>${thumb?`<img src="${thumb}" alt="${title}" loading="lazy"/>`:''}
        <div><a href="${link}" rel="nofollow">${title}</a></div></li>`;
    });
  }catch(err){console.error("抓取失敗:",err);}
})();
</script>


程式碼預設每次抓取 50 篇(fetchCount=50)並展示 10 篇(show=10),兩處數值皆可自行修改,每當切換/刷新網頁時都會顯示不同文章。每次發送 API 請求抓取文章最多為 150 篇(建議 30-50),抓取數值越大,最終產生的文章清單隨機性越高,但資料量增加會稍微影響載入速度。


為 Blogger 網站添加隨機文章:

1、進入 Blogger 後台的「版面配置」頁面, 點擊「新增小工具」。
Blogger 添加隨機文章教學,現代化 JavaScript 程式碼不調用外部函式庫

2、在小工具中選擇「HTML/JavaScript」,然後輸入標題與程式碼,按下「儲存」即可展示隨機文章。
Blogger 添加隨機文章教學,現代化 JavaScript 程式碼不調用外部函式庫

3、程式式碼效果如下圖,隨機文章會看到縮略圖+標題,點擊標題會前往文章頁面。
Blogger 添加隨機文章教學,現代化 JavaScript 程式碼不調用外部函式庫

內容更新:本篇文章於 2025 年 9 月重新撰寫,程式碼是由 ChatGPT 生成,若有其他需求,可將程式碼交由 AI 協助優化。