隨機文章 & 網站新配色！

有兩件事我一直沒有和大家說，就是我的部落格有「隨機文章」的功能，而且我也換了新配色了！（灑花 新配色 如果是只用 RSS 讀我的部落格的朋友們可能沒有發現 XD 之前 Stack theme 的預設 白 / 灰 色配色實在是太沒有個性了，隨便都可以跟別人撞 wwww，換成這個配色我每看一次就開心一次！我最喜歡的就是背景的點點，超可愛！！！ 深色 我是從深色模式開始改的！酒紅、棕、粉，我覺得是我這幾年的本命色，出自我喜歡的幾件衣服： 淺色 而淺色模式，就是沿用深色的一些主題色，順勢轉成以 白、粉 為主的配色，還算是常見的配色，像 ikuka ㄉ第一個家 就是這樣的配色~ 但就是很可愛哇 >w< 另一個特點是我把 H2 的標題改成大塊的圓角方塊，充當一點分隔線的作用，這樣文章就比較不會看起來落落長，可以一塊一塊看！ 隨機文章 為什麼這麼晚才做？ 幾個月前大家就有一波這個風潮了，但我一直沒有做，一直到最近有 AI 幫忙寫 code 才加上去，大家可以去網頁左邊的 sidebar 玩玩看~（手機版的話在最~右上角的抽屜裡面） 主要是因為看到大家的方法，似乎需要特別開一個頁面，點了隨機頁面到那個頁面之後，過個幾秒才會跳轉到文章。 但我不太喜歡這樣，感覺卡卡的，我就是想要按了就直接跳到隨機的文章，中間不要再隔一個頁面，這樣才可以順順地一個一個文章看下去。 做法 我的方法是用 Hugo 的 template 語法，把所有文章的網址在 hugo build 就全部塞進一個 JavaScript 的 list，然後按鈕被點到的時候就用隨機選一篇直接跳過去，完全不需要再卡一個頁面： （說得很簡單，但要理解還是要慢慢看，不用焦慮 XD） 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 {{- $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 -}} 也所以，在我的每一個頁面，其實都需要把「每一個文章連結」都載入到瀏覽器，這當然常常是白做工。 不過，我的文章也就幾百篇吧，一個頁面大概就多個一張圖片的大小，我覺得還可以接受！ 有了這個功能之後，我也沒事會一直點一直看我以前寫的文章，然後感嘆自己改變了（？）