
隨機文章程式碼介紹:
本文分享的隨機文章程式碼是由 ChatGPT 協助撰寫,主要是透過 Blogger JSON Feed 抓取文章,並在本機端利用 JavaScript 處理資料,不需要任何外部函式或第三方資源。其運作流程為:- 先發送一次 API 請求,取得全部文章的總數。
- 再發送第二次 API 請求,從全部文章中隨機選擇一個區段抓取 50 篇文章。
- 在本機端瀏覽器上,利用 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 協助優化。
0 留言