Blogger 隨機文章程式碼：在側邊欄展示文章清單

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

隨機文章程式碼介紹：

本文分享的隨機文章程式碼是由 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 後台的「版面配置」頁面， 點擊「新增小工具」。


2、在小工具中選擇「HTML/JavaScript」，然後輸入標題與程式碼，按下「儲存」即可展示隨機文章。


3、程式式碼效果如下圖，隨機文章會看到縮略圖+標題，點擊標題會前往文章頁面。


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