到首頁點擊「🎲 隨機文章」就可以隨機選一篇文章來閱讀！
這個功能跟「歷史上的今天」一樣，是爲了在文章數越來越多時，可以讓第一次到訪的讀者有一些方向可以看，而不會被文章列表嚇到。
如果你也想做一個
- 新增檔案 content/random.md
---
title: "隨機文章跳轉中..."
layout: "random"
---
- layouts/_default/random.html
{{ partial "header.html" . }}
<div class="article-meta">
<h1><span class="title">{{ .Title }}</span></h1>
</div>
<main>
<div style="text-align: center; margin-top: 50px;">
<h2 id="status">🎲 隨機選取中...</h2>
<p id="msgText">正在讀取文章清單，請稍候...</p>
{{/* 1. 抓取網址並處理成逗點分隔字串 */}}
{{- $urlList := slice -}}
{{- range .Site.RegularPages -}}
{{- if and (ne .RelPermalink "/") (ne .RelPermalink "/random/") (ne .RelPermalink "/search/") -}}
{{- $urlList = $urlList | append .RelPermalink -}}
{{- end -}}
{{- end -}}
{{- $csvUrls := delimit $urlList "," -}}
{{/* 2. 把網址存在一個隱藏的 div 屬性裡，避開 JS 語法報錯 */}}
<div id="url-data" data-urls="{{ $csvUrls }}" style="display: none;"></div>
</div>
<script>
(function() {
const msgText = document.getElementById('msgText');
const dataEl = document.getElementById('url-data');
if (dataEl && dataEl.dataset.urls) {
// 3. 從 HTML 屬性拿回字串，並拆解成陣elle
const urls = dataEl.dataset.urls.split(',');
if (urls.length > 0 && urls[0] !== "") {
const randomIndex = Math.floor(Math.random() * urls.length);
const randomUrl = urls[randomIndex];
console.log("成功抓取文章數:", urls.length);
console.log("準備跳轉至:", randomUrl);
// 4. 跳轉
window.location.replace(randomUrl);
} else {
msgText.innerText = "錯誤：文章清單是空的。";
}
} else {
msgText.innerText = "錯誤：找不到資料載體。";
}
})();
</script>
</main>
{{ partial "footer.html" . }}
```text