隨機文章 & 網站新配色！

Sat, 18 Apr 2026 05:36:50 +0000

有兩件事我一直沒有和大家說，就是我的部落格有「隨機文章」的功能，而且我也換了新配色了！（灑花

新配色

如果是只用 RSS 讀我的部落格的朋友們可能沒有發現 XD

之前 Stack theme 的預設白 / 灰色配色實在是太沒有個性了，隨便都可以跟別人撞 wwww，換成這個配色我每看一次就開心一次！我最喜歡的就是背景的點點，超可愛！！！

深色

我是從深色模式開始改的！酒紅、棕、粉，我覺得是我這幾年的本命色，出自我喜歡的幾件衣服：

淺色

而淺色模式，就是沿用深色的一些主題色，順勢轉成以白、粉為主的配色，還算是常見的配色，像 ikuka ㄉ第一個家就是這樣的配色~ 但就是很可愛哇 >w<

另一個特點是我把 H2 的標題改成大塊的圓角方塊，充當一點分隔線的作用，這樣文章就比較不會看起來落落長，可以一塊一塊看！

隨機文章

為什麼這麼晚才做？

幾個月前大家就有一波這個風潮了，但我一直沒有做，一直到最近有 AI 幫忙寫 code 才加上去，大家可以去網頁左邊的 sidebar 玩玩看~（手機版的話在最~右上角的抽屜裡面）

主要是因為看到大家的方法，似乎需要特別開一個頁面，點了隨機頁面到那個頁面之後，過個幾秒才會跳轉到文章。

但我不太喜歡這樣，感覺卡卡的，我就是想要按了就直接跳到隨機的文章，中間不要再隔一個頁面，這樣才可以順順地一個一個文章看下去。

做法

我的方法是用 Hugo 的 template 語法，把所有文章的網址在 hugo build 就全部塞進一個 JavaScript 的 list，然後按鈕被點到的時候就用隨機選一篇直接跳過去，完全不需要再卡一個頁面：

（說得很簡單，但要理解還是要慢慢看，不用焦慮 XD）

{{- $posts := where .Site.RegularPages "Type" "post" -}}
{{- if $posts -}}
<li>
    <a href="#" onclick="goToRandomPost(); return false;">
        隨機文章
    </a>
</li>
<script>
    function goToRandomPost() {
        var posts = [
            {{ range $posts }}
            '{{ .RelPermalink }}',
            {{ end }}
        ];
        window.location.href = posts[Math.floor(Math.random() * posts.length)];
    }
</script>
{{- end -}}

也所以，在我的每一個頁面，其實都需要把「每一個文章連結」都載入到瀏覽器，這當然常常是白做工。

不過，我的文章也就幾百篇吧，一個頁面大概就多個一張圖片的大小，我覺得還可以接受！

有了這個功能之後，我也沒事會一直點一直看我以前寫的文章，然後感嘆自己改變了（？）

JavaScript on 資工小廢物 - JN

隨機文章 & 網站新配色！

新配色

深色

淺色

隨機文章

為什麼這麼晚才做？

做法