yoz.log

留言板

contact@yozlog.com (YoZ 柚子) — Mon, 04 May 2026 22:35:00 +0900

看很多人都有，所以偷偷的也做了一個留言板頁面。

歡迎跟我打招呼！

留言區

謝謝你看完我的文章，現在你可以在本篇文章留言，或是寄 Email（contact@yozlog.com）給我分享你的看法，也可以單純在文末回覆表情符號😎，或到本站留言板留下足跡。

最後謝謝你訂閱我的 RSS feed，我們下次見！

在 Linux 上安裝 NUT 管理 UPS 不斷電系統

contact@yozlog.com (YoZ 柚子) — Wed, 29 Apr 2026 06:00:00 +0800

前言
#

我在〈Home Lab 私人伺服器架設日誌｜Pt.1 硬體選購〉中有提到，當初在挑選 UPS 時，就是以支援 NUT 為前提挑選，最後決定購買 CyberPower CP1500PFCLCDa。

我目前的 homelab 架構是：

主要的 ProxmoxVE 自組伺服器
備用的 Synology NAS

ProxmoxVE 中的 NUT 設定為 netserver 模式，提供 UPS 狀態給 Synology NAS 或後續增添的新設備查詢，並在 Synology NAS 上設定 NUT 為 netclient 模式，從 ProxmoxVE 取得 UPS 狀態。

本篇文章主要分享我如何在 ProxmoxVE 上安裝 NUT 並設定為 netserver 模式，並監控電源達成斷電時自動關機以保護硬體。

NUT 是什麼？
#

NUT (Network UPS Tools) 是一套開源自由的工具，用來監控和管理不同品牌的不斷電系統（UPS），只要該品牌的 UPS 有支援，NUT 就能透過驅動程式與硬體溝通，提供網路協議讓遠端電腦查詢狀態，並在斷電時自動觸發關機程序。

它的架構包含：

nut-driver：驅動程式，負責與對應的 UPS 硬體通訊。
nut-server：NUT 資料伺服器 (upsd)，讀取驅動程式提供的 UPS 資訊，將狀態透過網路提供給客戶端。
nut-client：監控狀態並執行如關機等動作，包含 upsmon、ups 及 upscmd 等元件。

安裝 NUT
#

apt update
apt install nut -y

接上 UPS，找 USB ID
#

執行：

lsusb | grep -i ups
# 或是
lsusb

會看到類似以下的結果：

Bus XXX Device XXX: ID xxxx(vendorid):xxxx(productid) 裝置名稱

找到對應的裝置名稱，以我的 UPS 為例是 Cyber Power System, Inc. PR1500LCDRT2U UPS，記住對應的 ID，接下來在設定 UPS 連線裝置時會用到。

設定 NUT 模式 `nut.conf`
#

編輯設定檔：

nano /etc/nut/nut.conf

更改 MODE，這邊以 netserver為例：

MODE=netserver

MODE 可選擇：

standalone：獨立模式，最常見，upsd 和 upsmon 在同一台機器運行，直接連接到本地 UPS，保護單一主機。
netserver：網路伺服器模式，類似 standalone，但額外提供 UPS 資料給其他遠端客戶端，需注意 upsd.conf 的網路安全設定。
netclient：網路客戶端模式，只運行 upsmon，從遠端 NUT 伺服器取得 UPS 狀態，不直接連 UPS 硬體。

設定 UPS 連線裝置 `ups.conf`
#

編輯設定檔案：

nano /etc/nut/ups.conf

2.貼上：

[cyberpower] # 這裡可以自訂 UPS 設備名稱
 # 要使用的驅動，大部分都是 usbhid-ups
 driver = usbhid-ups
 port = auto
 # `vendorid` 和 `productid` 是從執行 `lsusb` 得到的對應 ID
 vendorid = xxxx
 productid = xxxx
 # 下行裝置描述可以自訂
 desc = "CyberPower CP1500PFCLCDa"

driver 的部分會因 UPS 品牌而異，通常各品牌對應的 driver 如下：

APC：usbhid-ups 或 apcsmart
CyberPower、Tripp Lite、Minuteman：usbhid-ups
Eaton：usbhid-ups 或 snmp-ups

可透過以下命令查看是否已安裝對應驅動。

ls /lib/nut/

設定 upsd 使用者 `upsd.users`
#

編輯設定檔

nano /etc/nut/upsd.users

在文件最末行貼上：

[admin]
	password = 自訂密碼
	actions = set
	actions = fsd
	instcmds = all
[upswired]
	password = 自訂密碼
	upsmon primary
[observer]
	password = 自訂密碼
	upsmon secondary

設定權限

chmod 640 /etc/nut/upsd.users
chown root:nut /etc/nut/upsd.users

設定 upsd 監聽 `upsd.conf`
#

編輯設定檔

nano /etc/nut/upsd.conf

貼上：

LISTEN 0.0.0.0 3493

如果你是用 standalone 模式，可以寫：

LISTEN 127.0.0.1 3493

設定監控與系統關機策略 `upsmon.conf`
#

編輯 upsmon 設定檔：

nano /etc/nut/upsmon.conf

UPS 監控設定

文件中分為多個區塊，首先找到負責監控設定的 MONITOR 區塊，新增：

MONITOR system powervalue username password ("primary" | "secondary")

其中：

system：為 UPS 識別碼，格式為 UPS 設備名稱@主機名[:端口]，以本文為例，使用 cyberpower@localhost。
powervalue：供電權重，通常設 1。
username / password：upsd.users 中的帳號密碼，以本文為例，使用 upswired 自訂密碼。
primary / secondary：主要設備（與 UPS 直接有線連接的設備）或是從屬設備，在本文中使用 primary。

依序在底下區塊確認是否有以下設定：

MINSUPPLIES 1
# 它代表這台伺服器需要至少幾個正常運作的電源供應器，通常是 1 個。
SHUTDOWNCMD "/usr/sbin/shutdown -h +0"
# 這是電池電量危急時執行的關機指令
POLLFREQ 5
# 它代表 `upsmon` 每幾秒查詢一次 UPS 狀態，通常設定為 `5` 秒
POLLFREQALERT 5
# 它代表 UPS 切換到電池供電時 `upsmon` 每幾秒查詢一次 UPS 狀態，通常跟 `POLLFREQ` 一樣設定為 `5` 秒，也可以設定為更小。
HOSTSYNC 15
# 裝置間關機協調等待秒數
DEADTIME 15
# 代表 UPS 通訊中斷多久後，判定它已經掛掉。
POWERDOWNFLAG /etc/killpower
# 找到 `POWERDOWNFLAG` 關機旗標檔案 - 告訴 UPS 「系統已安全關機，可以切斷電源」
RBWARNTIME 43200
# 當 UPS 偵測到「電池老化該換了」時，upsmon 會每幾小時跳一次警告。
FINALDELAY 5
# 關機前的最後緩衝時間，預設 `5` 秒，之後執行 `SHUTDOWNCMD`

在 NOTIFYCMD 區塊中加入：

NOTIFYCMD /usr/sbin/upssched

這是事件發生時執行的通知指令，當 UPS 發生事件（斷電、低電量等）時，自動執行 upssched 程式（事件排程器）。

顯示訊息與通知

NOTIFYMSG 區塊可以設定顯示訊息，NOTIFYFLAG 區塊可以設定訊息通知方式，文件中有列出預設的顯示訊息及通知方式，你可以取消註解並更改。

設定權限

chmod 640 /etc/nut/upsmon.conf
chown root:nut /etc/nut/upsmon.conf

設定進階事件排程 `upssched`
#

upssched 能夠設定讓 upsmon 監控的事件發生的一段時間後執行指定程式。例如在電池供電一段固定時間後關機。

編輯設定檔：

nano /etc/nut/upssched.conf

將 CMDSCRIPT 區塊中的：

CMDSCRIPT /bin/upssched-cmd

改為：

CMDSCRIPT /etc/nut/upssched-cmd

它代表 upssched 去哪找執行動作的指令，我們會在後續創建並編輯執行腳本。

找到下面這兩行，並取消註解

PIPEFN /run/nut/upssched.pipe # 事件佇列
LOCKFN /run/nut/upssched.lock # 避免重複執行

在文件下方新增核心規則

AT ONBATT * START-TIMER onbatt 30 # 斷電 → 30秒後執行「onbatt」
AT ONLINE * CANCEL-TIMER onbatt # 市電恢復 → 取消計時器
AT LOWBATT * EXECUTE lowbatt # 低電量 → 立即執行「lowbatt」

編輯動作執行腳本：

sudo tee /etc/nut/upssched-cmd << 'EOF'
#!/bin/bash
# upssched 指令處理腳本

case "$1" in
 onbatt)
 # 斷電30秒後執行 - 發送警報
 logger "UPS: 已斷電，正在使用電池"
 # 在這裡加入你的通知方式 (email、webhook 等)
 ;;
 lowbatt)
 # 電池電量危急 - 開始關機
 logger "UPS: 電池電量低，開始關機程序"
 /sbin/upsmon -c fsd
 ;;
 *)
 logger "upssched-cmd: 未知事件: $1"
 ;;
esac
EOF

設定腳本執行權限：

sudo chmod +x /etc/nut/upssched-cmd

啟動服務
#

# 啟動 UPS 驅動
upsdrvctl start
# 啟動 upsd 及 upsmon
systemctl start nut-server nut-client 
# 開機時自動啟動
systemctl enable nut-server.service nut-client.service
# 確認狀態
systemctl status nut-server nut-client

查詢 UPS 狀態 `upsc`
#

列出所有可用裝置

upsc -l

顯示所有 UPS 參數：

upsc cyberpower@localhost

以我的 UPS 為例，顯示的資訊如下：

Init SSL without certificate database
battery.charge: 100
battery.charge.low: 10
battery.charge.warning: 20
battery.mfr.date: CPS
battery.runtime: 3675
battery.runtime.low: 300
battery.type: PbAcid
battery.voltage: 27.2
battery.voltage.nominal: 24
device.mfr: CPS
device.model: CP1500PFCLCDa TW
device.serial: CYCQU2000151
device.type: ups
driver.name: usbhid-ups
driver.parameter.pollfreq: 30
driver.parameter.pollinterval: 2
driver.parameter.port: auto
driver.parameter.productid: xxxx
driver.parameter.synchronous: auto
driver.parameter.vendorid: xxxx
driver.version: 2.8.0
driver.version.data: CyberPower HID 0.6
driver.version.internal: 0.47
driver.version.usb: libusb-1.0.26 (API: 0x1000109)
input.voltage: 115.0
input.voltage.nominal: 120
output.voltage: 115.0
ups.beeper.status: enabled
ups.delay.shutdown: 20
ups.delay.start: 30
ups.load: 12
ups.mfr: CPS
ups.model: CP1500PFCLCDa TW
ups.productid: 0601
ups.realpower.nominal: 1000
ups.serial: CYCQU2000151
ups.status: OL
ups.test.result: No test initiated
ups.timer.shutdown: -60
ups.timer.start: -60
ups.vendorid: xxxx

常見 ups.status 解說：
- OL：On Line power（線上供電）──UPS 使用市電正常供電
- OB：On Battery（電池供電）──UPS 偵測停電，切換到電池模式
- LB：Low Battery（電池電量低）──電池即將耗盡的警告狀態
- CHRG：Charging（充電中）──UPS 電池正在從市電充電
- DISCHRG：Discharging（放電中）──電池正在向設備供電

也可以顯示指定參數，例如：

upsc 設備名稱@localhost ups.status

控制 UPS 的即時命令 `upscmd`
#

upscmd 透過伺服器 upsd 將命令傳送給驅動程式，由驅動程式管理硬體，例如啟動／停止電池測試及蜂鳴器開關等等。並不是每款 UPS 都支援所有的即時命令，可以使用下面的命令查詢你那款 UPS 有支援哪些：

upscmd -l 設備名稱

接著使用下面的命令執行：

upscmd -u 用戶 -p 自訂密碼 -w -t 秒數 設備名稱 即時命令

-u 用戶＆-p 自訂密碼：指定要連線到伺服器 upsd 的用戶，也可以不加，這樣的話執行命令後會跳出互動式提示要你輸入用戶及密碼。要使用的用戶必須在 upsd.users 中設定權限──instcmds = all，所以這裡使用 admin。
-w：如果不使用 -w 的話，命令成功發送到 NUT 伺服器 upsd 就會回傳 OK。加上 -w 會在發送命令後進入等待狀態，讓命令不僅是被發送到 NUT伺服器，還要成功傳遞給了 UPS 硬體，並由 UPS 硬體執行完畢且回傳確認訊號。但 -w 需要 upsd 和驅動程式都支援「TRACKING」功能才能使用。
-t 秒數：與 -w 搭配使用，不設定秒數的話，預設會等待 10 秒。超過指定時間仍未收到硬體回傳的確認訊號，程式就會判斷為超時並停止等待，回傳超時錯誤訊息。

以下提供一個範例：

upscmd -u admin -p 自訂密碼 -w -t 30 cyberpower beeper.enable

用戶指定為 admin
使用 -w 搭配等待時間 30 秒
設備為 cyberpower
執行「開啟蜂鳴器」的即時命令：beeper.enable

測試斷電
#

拔掉 UPS 電源，執行：

upsc 設備名稱@localhost ups.status

應該要顯示 OB，也就是 On Battery（電池供電），接著觀察關機策略是否正常運作。

或是執行下面命令，直接測試一次關機流程是否正常。

upsmon -c fsd

用 Docker 部署 Twikoo 留言區供 Hugo 網站使用

contact@yozlog.com (YoZ 柚子) — Sun, 08 Mar 2026 02:00:00 +0800

介紹
#

Twikoo 是一款免費、開源、自由且可自架的網站評論系統，也就是留言區，用戶需要自行整合前後端。

後端能使用下列幾種方式部署，其中也包含幾個常見的函式即服務 (FaaS)。

騰訊雲
Vercel
Railway
Zeabur
Hugging Face
AWS Lambda
Cloudflare Workers
Node.js
Docker。

前端則支援網站架設工具，如 Hexo、Hugo 和 VitePress 中的幾個常用主題，也可透過 CDN 導入。

官方 GitHub 頁面列出許多特色可點擊查看。

部署方式
#

我自己是在自架居家伺服器上透過 Docker 部署後端，並在 Hugo 中導入 CDN，再用 Cursor vibecode 了一下留言區整體外觀，因為我使用的主題 Blowfish 並沒有現成的模板。

下面依序說明我部署 Twikoo 的步驟。

Docker 容器與反向代理
#

我直接參考官方文檔的教學，撰寫 Docker compose 部署。

反向代理的部分我使用 Cloudflare Tunnel 取代傳統的反向代理服務，如果你的網域也是從 Cloudflare 上購買，可參考這種方式，網路上也有許多完整的教學。

完成後，輸入網址查看，會看到類似下方的資訊。

code: 100
message: "Twikoo 云函数运行正常，请参考 https://twikoo.js.org/frontend.htmL 完成前端的配置"
version: "1.7.1"

編輯網站配置文件 config.toml
#

找到/config/_default路徑中的網站配置文件/params.toml，並在其中新增：

[article]
 showComments = true

你也可以在文章的 front matter 中添加showComments，設定為true或false，個別調整每篇文章是否顯示留言區。

接著還要添加：

[twikoo]
 version = "Twikoo 版本號碼（可輸入後端網址進入頁面查看，例如本站目前使用的 1.7.1）"
 server = "Twikoo 伺服器網址（例如：https://xxx.mysite.com/）"

這邊的設定會在下面提到的留言區模板comments.html中作為變數被調用。

留言區模板 comments.html
#

在/layouts/partials路徑下創建comments.html，並貼上下面的程式碼。

我主要在 class 中添加設定留言區背景顏色、透明度、深淺色主題下的配色等等，並參考官方教學，稍微修改了一下（上一步設定的變數），透過 CDN 導入 Twikoo 的前端腳本。

<section
 class="comments-block mt-6 p-5 sm:p-6 rounded-xl border border-neutral-200 dark:border-neutral-700 bg-neutral-100/50 dark:bg-neutral-800/50 shadow-sm"
 aria-label="留言區"
>
 <div class="flex items-center gap-2 mb-4">
 <span class="text-xl" aria-hidden="true">💬</span>
 <h2 class="m-0 text-lg font-semibold text-neutral-800 dark:text-neutral-200">
 留言區
 </h2>
 </div>
 <div id="tcomment" class="comments-block__inner"></div>
 <script src="https://cdn.jsdelivr.net/npm/twikoo@{{ .Site.Params.twikoo.version }}/dist/twikoo.min.js"></script>
 <script>
 twikoo.init({
 envId: '{{ .Site.Params.twikoo.server }}',
 el: '#tcomment',
 path: window.location.pathname
 })
 </script>
</section>

完成後在終端執行命令：hugo，重新生成網站並部署到伺服器，或用hugo server，先臨時架設本地開發伺服器，進入文章就可以看到留言區，並進行近一步的設定。

多語言網站 i18n 設定
#

如果你是多語言網站，可以把上面程式碼中提到留言區的兩個部分改成{{ i18n "comments.title" }}

並在 i18n 中對應的語言設定檔中加入翻譯，舉繁體中文zh-TW.yaml為例：

comments:
 title: "留言區"

Twikoo 設定
#

進入文章頁面後，會在留言區右下方看到齒輪圖示，初次點擊會要求你設定一串密碼作為往後的管理員密碼，以進入後台。

設定後台包括四個大項：

Comment：查詢、篩選留言。
Configuration：細項設定。
Import：匯入其它後端的留言資料庫。
Export：匯出當前後端中的留言資料庫。

其中，點擊 Configuration 可以看到 General、Plugin、Privacy、Spam、Instant notification、Email notification 及 Email notification test 等細項可設定，有興趣可以摸索看看，比較重要的有像是「跨網域請求」、「阻擋垃圾訊息」、「САРТСНА」及「郵件通知」等，每個設定欄位都有對應的說明可參考。

Hugo Blowfish 主題｜切換文章列表樣式按鈕

contact@yozlog.com (YoZ 柚子) — Sat, 07 Mar 2026 03:30:00 +0800

前言
#

從我創建個人部落格「YoZ Blog」以來，我在主頁與文章列表頁面都是使用「卡片列表」的樣式呈現文章，我認為較美觀，但後來發現文章越寫越多，這樣的樣式比起簡單的「列表」，似乎會妨礙到快速地找尋文章，且許多寫部落格的人也都使用單純的列表樣式，便產生了增加一個功能，透過按鈕切換文章列表樣式的功能，於是我透過 Cursor 稍微更改（vibecode）了 Blowfish 主題（2.93 版本）。

成品可以直接到 YoZ Blog 的主頁觀看。

下面直接說明這個過程。

創建切換按鍵 Javascript
#

首先先建立/assets/js/switch-article-view.js：

(() => {
 const activeClasses = ["bg-primary-500", "border-primary-500", "text-white"];
 const inactiveClasses = [
 "bg-transparent",
 "border-neutral-300",
 "text-neutral-700",
 "dark:text-neutral-200",
 "dark:border-neutral-600",
 ];

 const setupToggle = (config) => {
 const container = document.getElementById(config.toggleId);
 const card = document.getElementById(config.cardId);
 const list = document.getElementById(config.listId);
 if (!container || !card || !list) return;

 const buttons = Array.from(container.querySelectorAll("[data-view]"));
 if (!buttons.length) return;

 const setView = (view) => {
 card.classList.toggle("hidden", view !== "card");
 list.classList.toggle("hidden", view !== "list");

 buttons.forEach((btn) => {
 const isActive = btn.dataset.view === view;
 btn.setAttribute("aria-pressed", isActive ? "true" : "false");
 btn.classList.remove(...(isActive ? inactiveClasses : activeClasses));
 btn.classList.add(...(isActive ? activeClasses : inactiveClasses));
 });
 };

 buttons.forEach((btn) => {
 btn.addEventListener("click", () => setView(btn.dataset.view || "card"));
 });

 setView(container.dataset.defaultView || "card");
 };

 [
 { toggleId: "recent-articles-toggle", cardId: "recent-articles-card", listId: "recent-articles-list" },
 { toggleId: "posts-view-toggle", cardId: "posts-card-view", listId: "posts-list-view" },
 { toggleId: "term-view-toggle", cardId: "term-card-view", listId: "term-list-view" },
 ].forEach(setupToggle);
})();

創建列表模式模板
#

列表模板的樣式相當簡單，只顯示「文章日期」與「文章標題」，例如：2026-03-07 Hugo Blowfish 主題｜切換文章列表樣式按鈕。

創建/layouts/partials/recent-articles/title-list.html：

{{ $recentArticles := 5 }}
{{ if index .Site.Params.homepage "showRecentItems" }}
 {{ $recentArticles = .Site.Params.homepage.showRecentItems }}
{{ end }}

<ul class="divide-y divide-neutral-200 dark:divide-neutral-800">
 {{ range first $recentArticles (.Paginate (where .Site.RegularPages "Type" "in" .Site.Params.mainSections)).Pages }}
 <li class="py-1">
 <div class="flex items-center">
 <span class="text-sm text-neutral-500 dark:text-neutral-400 whitespace-nowrap mr-3">
 {{ .Date.Format "2006-01-02" }}
 </span>
 <a
 href="{{ .RelPermalink }}"
 class="font-semibold text-neutral-800 dark:text-neutral-100 hover:underline hover:underline-offset-2">
 {{ .Title | emojify }}
 </a>
 </div>
 </li>
 {{ end }}
</ul>

主頁最新文章
#

接著要套用到主頁上的最新文章段落。

先複製/themes/blowfish/layouts/partials/recent-articles/路徑下的main.html到/layouts/partials/recent-articles。

將原本的程式碼：

{{ $recentArticles := 5 }}
{{ $showMoreLinkDest := "/posts/" }}
{{ if .Site.Params.homepage.showRecent | default false }}
 {{ if index .Site.Params.homepage "showRecentItems" }}
 {{ $recentArticles = .Site.Params.homepage.showRecentItems }}
 {{ end }}
 <h2 class="mt-8 text-2xl font-extrabold mb-10">{{ i18n "shortcode.recent_articles" | emojify }}</h2>

 {{ if and .Site.Params.homepage.cardView (not .Site.Params.homepage.cardViewScreenWidth) | default false }}
 {{ partial "recent-articles/cardview.html" . }}
 {{ else if and .Site.Params.homepage.cardView .Site.Params.homepage.cardViewScreenWidth | default false }}
 {{ partial "recent-articles/cardview-fullwidth.html" . }}
 {{ else }}
 {{ partial "recent-articles/list.html" . }}
 {{ end }}

 {{ if .Site.Params.homepage.showMoreLink | default false }}
 {{ if index .Site.Params.homepage "showRecentItems" }}
 {{ $showMoreLinkDest = .Site.Params.homepage.showMoreLinkDest }}
 {{ end }}
 <div class="mt-10 flex justify-center">
 <a href="{{ $showMoreLinkDest | relLangURL }}">
 <button
 class="bg-transparent hover:text-primary-500 prose dark:prose-invert font-semibold py-2 px-4 border border-primary-500 hover:border-transparent rounded">
 {{ i18n "recent.show_more" | markdownify }}
 </button>
 </a>
 </div>
 {{ end }}
{{ end }}

更改為：

{{ $recentArticles := 5 }}
{{ $showMoreLinkDest := "/posts/" }}
{{ $showRecent := .Site.Params.homepage.showRecent | default false }}
{{ $isCardDefault := .Site.Params.homepage.cardView | default false }}
{{ $defaultView := cond $isCardDefault "card" "list" }}

{{ if $showRecent }}
 {{ if index .Site.Params.homepage "showRecentItems" }}
 {{ $recentArticles = .Site.Params.homepage.showRecentItems }}
 {{ end }}

 <div class="mt-8 flex flex-wrap items-center justify-between gap-3 mb-6">
 <h2 class="m-0 text-2xl font-extrabold leading-tight">
 {{ i18n "shortcode.recent_articles" | emojify }}
 </h2>
 <div
 id="recent-articles-toggle"
 class="flex items-center"
 style="gap: 0.5rem;"
 data-default-view="{{ $defaultView }}">
 {{ $btnBase := "px-3 py-1 rounded-md border text-sm font-medium transition-colors" }}
 <button
 type="button"
 class="{{ $btnBase }} recent-toggle-button {{ if eq $defaultView "card" }}bg-primary-500 border-primary-500 text-white{{ else }}bg-transparent border-neutral-300 text-neutral-700 dark:text-neutral-200 dark:border-neutral-600{{ end }}"
 data-view="card"
 aria-pressed="{{ if eq $defaultView "card" }}true{{ else }}false{{ end }}">
 卡片
 </button>
 <button
 type="button"
 class="{{ $btnBase }} recent-toggle-button {{ if eq $defaultView "list" }}bg-primary-500 border-primary-500 text-white{{ else }}bg-transparent border-neutral-300 text-neutral-700 dark:text-neutral-200 dark:border-neutral-600{{ end }}"
 data-view="list"
 aria-pressed="{{ if eq $defaultView "list" }}true{{ else }}false{{ end }}">
 列表
 </button>
 </div>
 </div>

 <div id="recent-articles-card" class="{{ if ne $defaultView "card" }}hidden{{ end }}">
 {{ if and .Site.Params.homepage.cardView (not .Site.Params.homepage.cardViewScreenWidth) | default false }}
 {{ partial "recent-articles/cardview.html" . }}
 {{ else if and .Site.Params.homepage.cardView .Site.Params.homepage.cardViewScreenWidth | default false }}
 {{ partial "recent-articles/cardview-fullwidth.html" . }}
 {{ else }}
 {{ partial "recent-articles/cardview.html" . }}
 {{ end }}
 </div>

 <div id="recent-articles-list" class="{{ if ne $defaultView "list" }}hidden{{ end }}">
 {{ partial "recent-articles/title-list.html" . }}
 </div>

 {{ if .Site.Params.homepage.showMoreLink | default false }}
 {{ if index .Site.Params.homepage "showRecentItems" }}
 {{ $showMoreLinkDest = .Site.Params.homepage.showMoreLinkDest }}
 {{ end }}
 <div class="mt-10 flex justify-center">
 <a href="{{ $showMoreLinkDest | relLangURL }}">
 <button
 class="bg-transparent hover:text-primary-500 prose dark:prose-invert font-semibold py-2 px-4 border border-primary-500 hover:border-transparent rounded">
 {{ i18n "recent.show_more" | markdownify }}
 </button>
 </a>
 </div>
 {{ end }}
 {{ $recentToggle := resources.Get "js/switch-article-view.js" }}
 {{ $recentToggle = $recentToggle | resources.Minify | resources.Fingerprint (.Site.Params.fingerprintAlgorithm | default "sha512") }}
 <script
 src="{{ $recentToggle.RelPermalink }}"
 integrity="{{ $recentToggle.Data.Integrity }}"
 defer></script>
{{ end }}

完成！

全部文章
#

接著要套用到全部文章（/posts）的段落。

將/themes/blowfish/layouts/_default路徑下的list.html複製到 /layouts/_default。

將原本的程式碼：

{{ define "main" }}
 {{ .Scratch.Set "scope" "list" }}
 {{ $enableToc := .Params.showTableOfContents | default (site.Params.list.showTableOfContents | default false) }}
 {{ $showToc := and $enableToc (in .TableOfContents "<ul") }}

 {{/* Hero */}}
 {{ if site.Params.list.showHero | default false }}
 {{ $heroStyle := print "hero/" site.Params.list.heroStyle ".html" }}
 {{ if templates.Exists ( printf "partials/%s" $heroStyle ) }}
 {{ partial $heroStyle . }}
 {{ else }}
 {{ partial "hero/basic.html" . }}
 {{ end }}
 {{ end }}

 {{/* Header */}}
 <header>
 {{ if .Params.showBreadcrumbs | default (site.Params.list.showBreadcrumbs | default false) }}
 {{ partial "breadcrumbs.html" . }}
 {{ end }}
 <h1 class="mt-5 text-4xl font-extrabold text-neutral-900 dark:text-neutral">{{ .Title }}</h1>
 <div class="mt-1 mb-2 text-base text-neutral-500 dark:text-neutral-400 print:hidden">
 {{ partial "article-meta/list.html" (dict "context" . "scope" "single") }}
 </div>
 {{ $translations := .AllTranslations }}
 {{ with .File }}
 {{ $path := .Path }}
 {{ range $translations }}
 {{ $lang := print "." .Lang ".md" }}
 {{ $path = replace $path $lang ".md" }}
 {{ end }}
 {{ $jsPage := resources.Get "js/page.js" }}
 {{ $jsPage = $jsPage | resources.Minify | resources.Fingerprint (site.Params.fingerprintAlgorithm | default "sha512") }}
 <script
 type="text/javascript"
 src="{{ $jsPage.RelPermalink }}"
 integrity="{{ $jsPage.Data.Integrity }}"
 data-oid="views_{{ $path }}"
 data-oid-likes="likes_{{ $path }}"></script>
 {{ end }}
 </header>

 {{/* Description (markdown content) */}}
 {{ $tocMargin := cond $showToc "mt-12" "mt-0" }}
 {{ $topClass := cond (hasPrefix site.Params.header.layout "fixed") "lg:top-[140px]" "lg:top-10" }}
 <section class="{{ $tocMargin }} prose flex max-w-full flex-col dark:prose-invert lg:flex-row">
 {{ if $showToc }}
 <div class="order-first px-0 lg:order-last lg:max-w-xs lg:ps-8">
 <div class="toc ps-5 lg:sticky {{ $topClass }}">
 {{ partial "toc.html" . }}
 </div>
 </div>
 {{ end }}
 <div class="min-w-0 min-h-0 max-w-prose">
 {{ .Content }}
 </div>
 </section>

 {{/* Article Grid */}}
 {{ if gt .Pages 0 }}
 {{ $cardView := .Params.cardView | default (site.Params.list.cardView | default false) }}
 {{ $cardViewScreenWidth := .Params.cardViewScreenWidth | default (site.Params.list.cardViewScreenWidth | default false) }}
 {{ $groupByYear := .Params.groupByYear | default (site.Params.list.groupByYear | default false) }}
 {{ $orderByWeight := .Params.orderByWeight | default (site.Params.list.orderByWeight | default false) }}
 {{ $groupByYear := and (not $orderByWeight) $groupByYear }}

 {{ if not $cardView }}
 <section class="space-y-10 w-full">
 {{ if not $orderByWeight }}
 {{ range (.Paginate (.Pages.GroupByDate "2006")).PageGroups }}
 {{ if $groupByYear }}
 <h2 class="mt-12 text-2xl font-bold text-neutral-700 first:mt-8 dark:text-neutral-300">
 {{ .Key }}
 </h2>
 {{ end }}
 {{ range .Pages }}
 {{ partial "article-link/simple.html" . }}
 {{ end }}
 {{ end }}
 {{ else }}
 {{ range (.Paginate (.Pages.ByWeight)).Pages }}
 {{ partial "article-link/simple.html" . }}
 {{ end }}
 {{ end }}
 </section>
 {{/* else: is cardView */}}
 {{ else }}
 {{ if $groupByYear }}
 {{ range (.Paginate (.Pages.GroupByDate "2006")).PageGroups }}
 {{ if $cardViewScreenWidth }}
 <div class="relative w-screen max-w-[1600px] px-[30px] start-[calc(max(-50vw,-800px)+50%)]">
 <h2 class="mt-12 mb-3 text-2xl font-bold text-neutral-700 first:mt-8 dark:text-neutral-300">
 {{ .Key }}
 </h2>
 <section class="w-full grid gap-4 sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5">
 {{ range .Pages }}
 {{ partial "article-link/card.html" . }}
 {{ end }}
 </section>
 </div>
 {{ else }}
 <h2 class="mt-12 mb-3 text-2xl font-bold text-neutral-700 first:mt-8 dark:text-neutral-300">
 {{ .Key }}
 </h2>
 <section class="w-full grid gap-4 sm:grid-cols-2 md:grid-cols-3">
 {{ range .Pages }}
 {{ partial "article-link/card.html" . }}
 {{ end }}
 </section>
 {{ end }}
 {{ end }}

 {{/* else: not groupByYear */}}
 {{ else }}
 {{ if $cardViewScreenWidth }}
 <div class="relative w-screen max-w-[1600px] px-[30px] start-[calc(max(-50vw,-800px)+50%)]">
 <section class="w-full grid gap-4 sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5">
 {{ if not $orderByWeight }}
 {{ range (.Paginate (.Pages.GroupByDate "2006")).PageGroups }}
 {{ range .Pages }}
 {{ partial "article-link/card.html" . }}
 {{ end }}
 {{ end }}
 {{ else }}
 {{ range (.Paginate (.Pages.ByWeight)).Pages }}
 {{ partial "article-link/card.html" . }}
 {{ end }}
 {{ end }}
 </section>
 </div>
 {{ else }}
 <section class="w-full grid gap-4 sm:grid-cols-2 md:grid-cols-3">
 {{ if not $orderByWeight }}
 {{ range (.Paginate (.Pages.GroupByDate "2006")).PageGroups }}
 {{ range .Pages }}
 {{ partial "article-link/card.html" . }}
 {{ end }}
 {{ end }}
 {{ else }}
 {{ range (.Paginate (.Pages.ByWeight)).Pages }}
 {{ partial "article-link/card.html" . }}
 {{ end }}
 {{ end }}
 </section>
 {{ end }}{{/* End of cardViewScreenWidth */}}
 {{ end }}{{/* End of groupByYear */}}
 {{ end }}{{/* End of cardView */}}
 {{/* else: .Pages not greater to zero */}}
 {{ else }}
 <section class="mt-10 prose dark:prose-invert">
 <p class="py-8 border-t">
 <em>{{ i18n "list.no_articles" | emojify }}</em>
 </p>
 </section>
 {{ end }}
 {{ partial "pagination.html" . }}
{{ end }}

更改為：

{{ define "main" }}
 {{ .Scratch.Set "scope" "list" }}
 {{ $enableToc := .Params.showTableOfContents | default (site.Params.list.showTableOfContents | default false) }}
 {{ $showToc := and $enableToc (in .TableOfContents "<ul") }}

 {{/* Hero */}}
 {{ if site.Params.list.showHero | default false }}
 {{ $heroStyle := print "hero/" site.Params.list.heroStyle ".html" }}
 {{ if templates.Exists ( printf "partials/%s" $heroStyle ) }}
 {{ partial $heroStyle . }}
 {{ else }}
 {{ partial "hero/basic.html" . }}
 {{ end }}
 {{ end }}

 {{/* Header */}}
 <header>
 {{ if .Params.showBreadcrumbs | default (site.Params.list.showBreadcrumbs | default false) }}
 {{ partial "breadcrumbs.html" . }}
 {{ end }}
 <h1 class="mt-5 text-4xl font-extrabold text-neutral-900 dark:text-neutral">{{ .Title }}</h1>
 <div class="mt-1 mb-2 text-base text-neutral-500 dark:text-neutral-400 print:hidden">
 {{ partial "article-meta/list.html" (dict "context" . "scope" "single") }}
 </div>
 {{ $translations := .AllTranslations }}
 {{ with .File }}
 {{ $path := .Path }}
 {{ range $translations }}
 {{ $lang := print "." .Lang ".md" }}
 {{ $path = replace $path $lang ".md" }}
 {{ end }}
 {{ $jsPage := resources.Get "js/page.js" }}
 {{ $jsPage = $jsPage | resources.Minify | resources.Fingerprint (site.Params.fingerprintAlgorithm | default "sha512") }}
 <script
 type="text/javascript"
 src="{{ $jsPage.RelPermalink }}"
 integrity="{{ $jsPage.Data.Integrity }}"
 data-oid="views_{{ $path }}"
 data-oid-likes="likes_{{ $path }}"></script>
 {{ end }}
 </header>

 {{/* Description (markdown content) */}}
 {{ $tocMargin := cond $showToc "mt-12" "mt-0" }}
 {{ $topClass := cond (hasPrefix site.Params.header.layout "fixed") "lg:top-[140px]" "lg:top-10" }}
 <section class="{{ $tocMargin }} prose flex max-w-full flex-col dark:prose-invert lg:flex-row">
 {{ if $showToc }}
 <div class="order-first px-0 lg:order-last lg:max-w-xs lg:ps-8">
 <div class="toc ps-5 lg:sticky {{ $topClass }}">
 {{ partial "toc.html" . }}
 </div>
 </div>
 {{ end }}
 <div class="min-w-0 min-h-0 max-w-prose">
 {{ .Content }}
 </div>
 </section>

 {{/* Article Grid + Toggle */}}
 {{ if gt .Pages 0 }}
 {{ $cardView := .Params.cardView | default (site.Params.list.cardView | default false) }}
 {{ $cardViewScreenWidth := .Params.cardViewScreenWidth | default (site.Params.list.cardViewScreenWidth | default false) }}
 {{ $groupByYear := .Params.groupByYear | default (site.Params.list.groupByYear | default false) }}
 {{ $orderByWeight := .Params.orderByWeight | default (site.Params.list.orderByWeight | default false) }}
 {{ $groupByYear := and (not $orderByWeight) $groupByYear }}
 {{ $defaultView := cond $cardView "card" "list" }}

 <div class="mt-8 mb-2 flex justify-end">
 <div
 id="posts-view-toggle"
 class="flex items-center"
 style="gap: 0.5rem;"
 data-default-view="{{ $defaultView }}">
 {{ $btnBase := "px-3 py-1 rounded-md border text-sm font-medium transition-colors" }}
 <button
 type="button"
 class="{{ $btnBase }} recent-toggle-button {{ if eq $defaultView "card" }}bg-primary-500 border-primary-500 text-white{{ else }}bg-transparent border-neutral-300 text-neutral-700 dark:text-neutral-200 dark:border-neutral-600{{ end }}"
 data-view="card"
 aria-pressed="{{ if eq $defaultView "card" }}true{{ else }}false{{ end }}">
 卡片
 </button>
 <button
 type="button"
 class="{{ $btnBase }} recent-toggle-button {{ if eq $defaultView "list" }}bg-primary-500 border-primary-500 text-white{{ else }}bg-transparent border-neutral-300 text-neutral-700 dark:text-neutral-200 dark:border-neutral-600{{ end }}"
 data-view="list"
 aria-pressed="{{ if eq $defaultView "list" }}true{{ else }}false{{ end }}">
 列表
 </button>
 </div>
 </div>

 <div id="posts-card-view" class="{{ if ne $defaultView "card" }}hidden{{ end }}">
 {{ if $groupByYear }}
 {{ range (.Paginate (.Pages.GroupByDate "2006")).PageGroups }}
 {{ if $cardViewScreenWidth }}
 <div class="relative w-screen max-w-[1600px] px-[30px] start-[calc(max(-50vw,-800px)+50%)]">
 <h2 class="mt-12 mb-3 text-2xl font-bold text-neutral-700 first:mt-8 dark:text-neutral-300">
 {{ .Key }}
 </h2>
 <section class="w-full grid gap-4 sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5">
 {{ range .Pages }}
 {{ partial "article-link/card.html" . }}
 {{ end }}
 </section>
 </div>
 {{ else }}
 <h2 class="mt-12 mb-3 text-2xl font-bold text-neutral-700 first:mt-8 dark:text-neutral-300">
 {{ .Key }}
 </h2>
 <section class="w-full grid gap-4 sm:grid-cols-2 md:grid-cols-3">
 {{ range .Pages }}
 {{ partial "article-link/card.html" . }}
 {{ end }}
 </section>
 {{ end }}
 {{ end }}
 {{ else }}
 {{ if $cardViewScreenWidth }}
 <div class="relative w-screen max-w-[1600px] px-[30px] start-[calc(max(-50vw,-800px)+50%)]">
 <section class="w-full grid gap-4 sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5">
 {{ if not $orderByWeight }}
 {{ range (.Paginate (.Pages.GroupByDate "2006")).PageGroups }}
 {{ range .Pages }}
 {{ partial "article-link/card.html" . }}
 {{ end }}
 {{ end }}
 {{ else }}
 {{ range (.Paginate (.Pages.ByWeight)).Pages }}
 {{ partial "article-link/card.html" . }}
 {{ end }}
 {{ end }}
 </section>
 </div>
 {{ else }}
 <section class="w-full grid gap-4 sm:grid-cols-2 md:grid-cols-3">
 {{ if not $orderByWeight }}
 {{ range (.Paginate (.Pages.GroupByDate "2006")).PageGroups }}
 {{ range .Pages }}
 {{ partial "article-link/card.html" . }}
 {{ end }}
 {{ end }}
 {{ else }}
 {{ range (.Paginate (.Pages.ByWeight)).Pages }}
 {{ partial "article-link/card.html" . }}
 {{ end }}
 {{ end }}
 </section>
 {{ end }}{{/* End of cardViewScreenWidth */}}
 {{ end }}{{/* End of groupByYear */}}
 </div>

 <div id="posts-list-view" class="{{ if ne $defaultView "list" }}hidden{{ end }}">
 {{ if $groupByYear }}
 {{ range (.Paginate (.Pages.GroupByDate "2006")).PageGroups }}
 <h2 class="mt-12 mb-3 text-2xl font-bold text-neutral-700 first:mt-8 dark:text-neutral-300">
 {{ .Key }}
 </h2>
 <ul class="divide-y divide-neutral-200 dark:divide-neutral-800">
 {{ range .Pages }}
 <li class="py-1">
 <div class="flex items-center">
 <span class="text-sm text-neutral-500 dark:text-neutral-400 whitespace-nowrap mr-3">
 {{ .Date.Format "2006-01-02" }}
 </span>
 <a
 href="{{ .RelPermalink }}"
 class="font-semibold text-neutral-800 dark:text-neutral-100 hover:underline hover:underline-offset-2">
 {{ .Title | emojify }}
 </a>
 </div>
 </li>
 {{ end }}
 </ul>
 {{ end }}
 {{ else }}
 <ul class="divide-y divide-neutral-200 dark:divide-neutral-800">
 {{ if not $orderByWeight }}
 {{ range (.Paginate (.Pages.GroupByDate "2006")).PageGroups }}
 {{ range .Pages }}
 <li class="py-1">
 <div class="flex items-center">
 <span class="text-sm text-neutral-500 dark:text-neutral-400 whitespace-nowrap mr-3">
 {{ .Date.Format "2006-01-02" }}
 </span>
 <a
 href="{{ .RelPermalink }}"
 class="font-semibold text-neutral-800 dark:text-neutral-100 hover:underline hover:underline-offset-2">
 {{ .Title | emojify }}
 </a>
 </div>
 </li>
 {{ end }}
 {{ end }}
 {{ else }}
 {{ range (.Paginate (.Pages.ByWeight)).Pages }}
 <li class="py-1">
 <div class="flex items-center">
 <span class="text-sm text-neutral-500 dark:text-neutral-400 whitespace-nowrap mr-3">
 {{ .Date.Format "2006-01-02" }}
 </span>
 <a
 href="{{ .RelPermalink }}"
 class="font-semibold text-neutral-800 dark:text-neutral-100 hover:underline hover:underline-offset-2">
 {{ .Title | emojify }}
 </a>
 </div>
 </li>
 {{ end }}
 {{ end }}
 </ul>
 {{ end }}
 </div>
 {{/* else: .Pages not greater to zero */}}
 {{ else }}
 <section class="mt-10 prose dark:prose-invert">
 <p class="py-8 border-t">
 <em>{{ i18n "list.no_articles" | emojify }}</em>
 </p>
 </section>
 {{ end }}
 {{ partial "pagination.html" . }}

 {{ $switchView := resources.Get "js/switch-article-view.js" }}
 {{ $switchView = $switchView | resources.Minify | resources.Fingerprint (site.Params.fingerprintAlgorithm | default "sha512") }}
 <script
 src="{{ $switchView.RelPermalink }}"
 integrity="{{ $switchView.Data.Integrity }}"
 defer></script>
{{ end }}

完成！

Taxonomy
#

接著要套用到自訂的 Taxonomy 頁面，像是各個分類或標籤。

將/themes/blowfish/layouts/_default路徑下的term.html複製到/layouts/_default/term.html。

將原本的程式碼：

{{ define "main" }}
 {{ .Scratch.Set "scope" "term" }}
 {{ $showHero := .Params.showHero | default site.Params.term.showHero | default false }}
 {{ if $showHero }}
 {{ $heroStyle := print "hero/" site.Params.term.heroStyle ".html" }}
 {{ if templates.Exists ( printf "partials/%s" $heroStyle ) }}
 {{ partial $heroStyle . }}
 {{ else }}
 {{ partial "hero/basic.html" . }}
 {{ end }}
 {{- end -}}


 <header class="mt-5">
 {{ if .Params.showBreadcrumbs | default (site.Params.term.showBreadcrumbs | default false) }}
 {{ partial "breadcrumbs.html" . }}
 {{ end }}
 <h1 class="mt-5 text-4xl font-extrabold text-neutral-900 dark:text-neutral">{{ .Title }}</h1>
 <div class="mt-1 mb-2 text-base text-neutral-500 dark:text-neutral-400 print:hidden">
 {{ partial "article-meta/term.html" (dict "context" . "scope" "single") }}
 </div>
 </header>

 <section class="flex flex-col max-w-full mt-0 mb-5 prose dark:prose-invert lg:flex-row">
 {{ if .Content }}
 <div class="min-w-0 min-h-0 max-w-prose">
 {{ .Content }}
 </div>
 {{ $jsPage := resources.Get "js/page.js" }}
 {{ $jsPage = $jsPage | resources.Minify | resources.Fingerprint (site.Params.fingerprintAlgorithm | default "sha512") }}
 <script
 type="text/javascript"
 src="{{ $jsPage.RelPermalink }}"
 integrity="{{ $jsPage.Data.Integrity }}"
 data-oid="views_term_{{ .Data.Term }}"
 data-oid-likes="likes_term_{{ .Data.Term }}"></script>
 {{ end }}
 </section>

 {{ if gt .Pages 0 }}
 {{ $cardView := .Params.cardView | default (site.Params.term.cardView | default false) }}
 {{ $cardViewScreenWidth := site.Params.term.cardViewScreenWidth | default false }}
 {{ $groupByYear := .Params.groupByYear | default (site.Params.term.groupByYear | default false) }}

 {{ if not $cardView }}

 <section class="space-y-10 w-full">
 {{ range (.Paginate (.Pages.GroupByDate "2006")).PageGroups }}
 {{ if $groupByYear }}
 <h2 class="mt-12 text-2xl font-bold text-neutral-700 first:mt-8 dark:text-neutral-300">
 {{ .Key }}
 </h2>
 {{ end }}
 {{ range .Pages }}
 {{ partial "article-link/simple.html" . }}
 {{ end }}
 {{ end }}
 </section>
 {{ else if and $cardView (not $cardViewScreenWidth) }}

 {{ if $groupByYear }}

 {{ range (.Paginate (.Pages.GroupByDate "2006")).PageGroups }}
 <h2 class="mt-12 mb-3 text-2xl font-bold text-neutral-700 first:mt-8 dark:text-neutral-300">
 {{ .Key }}
 </h2>
 <section class="w-full grid gap-4 sm:grid-cols-2 md:grid-cols-3">
 {{ range .Pages }}
 {{ partial "article-link/card.html" . }}
 {{ end }}
 </section>
 {{ end }}

 {{ else }}

 <section class="w-full grid gap-4 sm:grid-cols-2 md:grid-cols-3">
 {{ range (.Paginate (.Pages.GroupByDate "2006")).PageGroups }}
 {{ range .Pages }}
 {{ partial "article-link/card.html" . }}
 {{ end }}
 {{ end }}
 </section>
 {{ end }}

 {{ else if and $cardView $cardViewScreenWidth }}

 {{ if $groupByYear }}

 {{ range (.Paginate (.Pages.GroupByDate "2006")).PageGroups }}
 <div class="relative w-screen max-w-[1600px] px-[30px] start-[calc(max(-50vw,-800px)+50%)]">
 <h2 class="mt-12 mb-3 text-2xl font-bold text-neutral-700 first:mt-8 dark:text-neutral-300">
 {{ .Key }}
 </h2>
 <section class="w-full grid gap-4 sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5">
 {{ range .Pages }}
 {{ partial "article-link/card.html" . }}
 {{ end }}
 </section>
 </div>
 {{ end }}

 {{ else }}

 <div class="relative w-screen max-w-[1600px] px-[30px] start-[calc(max(-50vw,-800px)+50%)]">
 <section class="w-full grid gap-4 sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5">
 {{ range (.Paginate (.Pages.GroupByDate "2006")).PageGroups }}
 {{ range .Pages }}
 {{ partial "article-link/card.html" . }}
 {{ end }}
 {{ end }}
 </section>
 </div>
 {{ end }}

 {{ end }}

 {{ else }}
 <section class="mt-10 prose dark:prose-invert">
 <p class="py-8 border-t">
 <em>{{ i18n "term.no_articles" | emojify }}</em>
 </p>
 </section>
 {{ end }}

 {{ partial "pagination.html" . }}
{{ end }}

更改為：

{{ define "main" }}
 {{ .Scratch.Set "scope" "term" }}
 {{ $showHero := .Params.showHero | default site.Params.term.showHero | default false }}
 {{ if $showHero }}
 {{ $heroStyle := print "hero/" site.Params.term.heroStyle ".html" }}
 {{ if templates.Exists ( printf "partials/%s" $heroStyle ) }}
 {{ partial $heroStyle . }}
 {{ else }}
 {{ partial "hero/basic.html" . }}
 {{ end }}
 {{- end -}}

 <header class="mt-5">
 {{ if .Params.showBreadcrumbs | default (site.Params.term.showBreadcrumbs | default false) }}
 {{ partial "breadcrumbs.html" . }}
 {{ end }}
 <h1 class="mt-5 text-4xl font-extrabold text-neutral-900 dark:text-neutral">{{ .Title }}</h1>
 <div class="mt-1 mb-2 text-base text-neutral-500 dark:text-neutral-400 print:hidden">
 {{ partial "article-meta/term.html" (dict "context" . "scope" "single") }}
 </div>
 </header>

 <section class="flex flex-col max-w-full mt-0 mb-5 prose dark:prose-invert lg:flex-row">
 {{ if .Content }}
 <div class="min-w-0 min-h-0 max-w-prose">
 {{ .Content }}
 </div>
 {{ $jsPage := resources.Get "js/page.js" }}
 {{ $jsPage = $jsPage | resources.Minify | resources.Fingerprint (site.Params.fingerprintAlgorithm | default "sha512") }}
 <script
 type="text/javascript"
 src="{{ $jsPage.RelPermalink }}"
 integrity="{{ $jsPage.Data.Integrity }}"
 data-oid="views_term_{{ .Data.Term }}"
 data-oid-likes="likes_term_{{ .Data.Term }}"></script>
 {{ end }}
 </section>

 {{ if gt .Pages 0 }}
 {{ $cardView := .Params.cardView | default (site.Params.term.cardView | default false) }}
 {{ $cardViewScreenWidth := site.Params.term.cardViewScreenWidth | default false }}
 {{ $groupByYear := .Params.groupByYear | default (site.Params.term.groupByYear | default false) }}
 {{ $defaultView := cond $cardView "card" "list" }}

 <div class="mt-6 mb-2 flex justify-end">
 <div
 id="term-view-toggle"
 class="flex items-center"
 style="gap: 0.5rem;"
 data-default-view="{{ $defaultView }}">
 {{ $btnBase := "px-3 py-1 rounded-md border text-sm font-medium transition-colors" }}
 <button
 type="button"
 class="{{ $btnBase }} recent-toggle-button {{ if eq $defaultView "card" }}bg-primary-500 border-primary-500 text-white{{ else }}bg-transparent border-neutral-300 text-neutral-700 dark:text-neutral-200 dark:border-neutral-600{{ end }}"
 data-view="card"
 aria-pressed="{{ if eq $defaultView "card" }}true{{ else }}false{{ end }}">
 卡片
 </button>
 <button
 type="button"
 class="{{ $btnBase }} recent-toggle-button {{ if eq $defaultView "list" }}bg-primary-500 border-primary-500 text-white{{ else }}bg-transparent border-neutral-300 text-neutral-700 dark:text-neutral-200 dark:border-neutral-600{{ end }}"
 data-view="list"
 aria-pressed="{{ if eq $defaultView "list" }}true{{ else }}false{{ end }}">
 列表
 </button>
 </div>
 </div>

 <div id="term-card-view" class="{{ if ne $defaultView "card" }}hidden{{ end }}">
 {{ if not $cardView }}
 <section class="space-y-10 w-full">
 {{ range (.Paginate (.Pages.GroupByDate "2006")).PageGroups }}
 {{ if $groupByYear }}
 <h2 class="mt-12 text-2xl font-bold text-neutral-700 first:mt-8 dark:text-neutral-300">
 {{ .Key }}
 </h2>
 {{ end }}
 {{ range .Pages }}
 {{ partial "article-link/simple.html" . }}
 {{ end }}
 {{ end }}
 </section>
 {{ else if and $cardView (not $cardViewScreenWidth) }}
 {{ if $groupByYear }}
 {{ range (.Paginate (.Pages.GroupByDate "2006")).PageGroups }}
 <h2 class="mt-12 mb-3 text-2xl font-bold text-neutral-700 first:mt-8 dark:text-neutral-300">
 {{ .Key }}
 </h2>
 <section class="w-full grid gap-4 sm:grid-cols-2 md:grid-cols-3">
 {{ range .Pages }}
 {{ partial "article-link/card.html" . }}
 {{ end }}
 </section>
 {{ end }}
 {{ else }}
 <section class="w-full grid gap-4 sm:grid-cols-2 md:grid-cols-3">
 {{ range (.Paginate (.Pages.GroupByDate "2006")).PageGroups }}
 {{ range .Pages }}
 {{ partial "article-link/card.html" . }}
 {{ end }}
 {{ end }}
 </section>
 {{ end }}
 {{ else if and $cardView $cardViewScreenWidth }}
 {{ if $groupByYear }}
 {{ range (.Paginate (.Pages.GroupByDate "2006")).PageGroups }}
 <div class="relative w-screen max-w-[1600px] px-[30px] start-[calc(max(-50vw,-800px)+50%)]">
 <h2 class="mt-12 mb-3 text-2xl font-bold text-neutral-700 first:mt-8 dark:text-neutral-300">
 {{ .Key }}
 </h2>
 <section class="w-full grid gap-4 sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5">
 {{ range .Pages }}
 {{ partial "article-link/card.html" . }}
 {{ end }}
 </section>
 </div>
 {{ end }}
 {{ else }}
 <div class="relative w-screen max-w-[1600px] px-[30px] start-[calc(max(-50vw,-800px)+50%)]">
 <section class="w-full grid gap-4 sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5">
 {{ range (.Paginate (.Pages.GroupByDate "2006")).PageGroups }}
 {{ range .Pages }}
 {{ partial "article-link/card.html" . }}
 {{ end }}
 {{ end }}
 </section>
 </div>
 {{ end }}
 {{ end }}
 </div>

 <div id="term-list-view" class="{{ if ne $defaultView "list" }}hidden{{ end }}">
 {{ if $groupByYear }}
 {{ range (.Paginate (.Pages.GroupByDate "2006")).PageGroups }}
 <h2 class="mt-12 mb-3 text-2xl font-bold text-neutral-700 first:mt-8 dark:text-neutral-300">
 {{ .Key }}
 </h2>
 <ul class="divide-y divide-neutral-200 dark:divide-neutral-800">
 {{ range .Pages }}
 <li class="py-1">
 <div class="flex items-center">
 <span class="text-sm text-neutral-500 dark:text-neutral-400 whitespace-nowrap mr-3">
 {{ .Date.Format "2006-01-02" }}
 </span>
 <a
 href="{{ .RelPermalink }}"
 class="font-semibold text-neutral-800 dark:text-neutral-100 hover:underline hover:underline-offset-2">
 {{ .Title | emojify }}
 </a>
 </div>
 </li>
 {{ end }}
 </ul>
 {{ end }}
 {{ else }}
 <ul class="divide-y divide-neutral-200 dark:divide-neutral-800">
 {{ range (.Paginate (.Pages.GroupByDate "2006")).PageGroups }}
 {{ range .Pages }}
 <li class="py-1">
 <div class="flex items-center">
 <span class="text-sm text-neutral-500 dark:text-neutral-400 whitespace-nowrap mr-3">
 {{ .Date.Format "2006-01-02" }}
 </span>
 <a
 href="{{ .RelPermalink }}"
 class="font-semibold text-neutral-800 dark:text-neutral-100 hover:underline hover:underline-offset-2">
 {{ .Title | emojify }}
 </a>
 </div>
 </li>
 {{ end }}
 {{ end }}
 </ul>
 {{ end }}
 </div>
 {{ else }}
 <section class="mt-10 prose dark:prose-invert">
 <p class="py-8 border-t">
 <em>{{ i18n "term.no_articles" | emojify }}</em>
 </p>
 </section>
 {{ end }}

 {{ partial "pagination.html" . }}

 {{ $switchView := resources.Get "js/switch-article-view.js" }}
 {{ $switchView = $switchView | resources.Minify | resources.Fingerprint (site.Params.fingerprintAlgorithm | default "sha512") }}
 <script
 src="{{ $switchView.RelPermalink }}"
 integrity="{{ $switchView.Data.Integrity }}"
 defer></script>
{{ end }}

完成！

Home Lab 私人伺服器架設日誌｜Pt.1 硬體選購

contact@yozlog.com (YoZ 柚子) — Mon, 10 Nov 2025 12:00:00 +0900

前言
#

我在關於我中有提到，2022 年我儲存音樂製作素材與作品的隨身硬碟無預警秀抖，雖然救回來了但差點漏尿，於是入手了第一台 Synology NAS DS216+II 做雲端備份，順便研究起了自架服務，之後的三年間陸續架設了幾個自架服務，漸漸地硬碟容量開始耗盡、記憶體也開始無法負荷現有的服務量。

2024 年底開始就有升級 NAS 的想法，但聽說過陣子 Synology 就要推出新機型，那段時間便將部分服務先下線，將就著用。沒想到 2025 年 4 月 23 日 Synology 確實推出了新款 NAS，卻限制只有使用原廠認證的硬碟才能使用全部的功能¹，我本來就有計畫在未來慢慢脫離 Synology 系統，改用開源的 TrueNAS 系統，一得知還有硬碟限制，便下定決心趁這個機會跳槽吧。

構思藍圖
#

非專業挑選指南，僅為心得分享！

於是我便開始研究起 TrueNAS，我主要的需求有「備份及快照電腦資料」、「架設 Docker 容器服務」，過程中我得知許多人使用 Proxmox Virtual Environment（簡稱 PVE）這個專門用於「伺服器虛擬化」的開源 Linux 發行版系統，在其中創建 TrueNAS 虛擬機，將硬碟直通給 TrueNAS 讓它負責檔案備份及快照等，而架設服務等任務就交給 PVE 另外創建的虛擬機負責。

於是我就決定以這個方案進行硬體選購。

首先我先大致計算需要開設幾個虛擬機、各個虛擬機中要架設哪些 Docker 容器，並跟 Perplexity 討論出要怎樣規格的硬體才能負荷的了我的需求，還預留了一段「相當大」的空間以備未來升級使用。

硬體挑選
#

初步方向
#

我先規劃好了以下的需求，挑選適合的主機板。

	要求
預算	15000
平台	AM5，支援 Ryzen 7000/9000
記憶體	支援 DDR5 ECC UDIMM
PCIe 擴充	2 x PCIe 5.0 x16（可 16/NA 或 8/8），支援多 GPU
SATA	SATA 6Gb/s，暫定至少4顆，日後會持續擴充，兩顆一組做RAID1+0（RAID10）
M.2	2 x M.2（PCIe 5.0 x4），兩條 NVMe M.2 SSD 組 RAID1，作 Proxmox 系統碟
乙太網路	希望有原生 10GbE 插口
IPMI	支援
IOMMU	支援，讓 PVE 中的 TrueNAS 虛擬機能管理硬碟，專門負責資料備份及管理

PCIE 插槽未來打算留給一張顯卡跑自架 LLM；剩下一條拿來插 M.2 擴充卡，另外使用兩張 NVMe M.2 SSD 組 RAID1 作為 TrueNAS 的 SLOG/ZIL（寫入日誌 SSD），另外一張作為 TrueNAS 的 L2ARC（快取SSD）。

這裡應該有很多 bug，不過那時我還不太懂，總之就是這樣子安排了，如果覺得不對勁請直接忽略，而且到最後發現，其實以我的規模根本不需要額外的硬碟負責SLOG/ZIL 和 L2ARC。

選定主機板
#

經過一番研究，在眾多「妖板」中尋找過後，我找到了兩張最符合上述需求的主機板：

但 AsRock 那張只有一個 M.2 插槽，於是便選定 Supermicro H13SAE-MF，並於 6 月 1 號於淘寶上下訂，價格是 3650 人民幣，但賣家表示可能要 7 月才會進貨，反正我本來就打算 7 月回到台灣後才著手組裝，便表示沒關係，我願意等，沒想到 6 月 30 號賣家來訊表示，目前原廠一直沒有進貨消息，其實也不難理解，那陣子全球 AI 熱潮，伺服器硬體價格上漲甚至缺貨，於是我只好另尋其他主機板。

又做了一番研究後，實在找不到符合我需求的主機板，便放棄了 AMD 平台，選擇了 Intel 平台的主機板 ASUS Pro WS W680-ACE IMPI。

核心硬體補齊
#

於是我於 7 月 14 號前往光華商場原價屋購買了下述的設備。

硬體	型號	預算	價格	數量
CPU	Intel i7-14700	10000	9700	1
主機板	ASUS Pro WS W680-ACE IMPI	15000	13990	1
RAM	Kingston KSM56E46BD8KM-48HM	10000	9500	1
NVMe M.2 SSD（系統碟使用）	Micron Crucial T500 1TB	5000x1	2588	2
電供	Apexgaming GTR Plus-1000M	沒預算	3390	1

後續將服務陸續架起，並運作一段時間後，發現只有一條 48 GB 的記憶體非常緊繃，於是又於 8 月 27 日購入一條，不過才過了一個月就降價到 7800 元，當下其實覺得自己蠻像小丑的🤡，當然現在非常慶幸，因為現在不只漲價還很難找到現貨。

五金配件 from 淘寶
#

至於主機殼、機櫃及儲存硬碟我則是從淘寶購入。

硬碟礙於預算我買了「整新碟（清零碟）」，好孩子請不要學，我做了多個異地異質備份（遵循321原則），也充分地了解風險。

機櫃（淘寶連結）
我在蝦皮上看到同款的要兩倍價…

價格：840 人民幣（3505 台幣）
規格：高度 120 公分／22U／寬 600 公分／深 800 公分

這台機櫃上方出風口可以裝 4 顆風扇，原先有附兩顆 220V 的散熱風扇，但我家是 110V 的電，於是沒想太多，又去光華商場花了 1260 買了 4 顆「高風量」風扇，只能說比早餐店抽油煙機還吵啊，幸好我是把機櫃放車庫，就將就著用吧。

主機殼 - 4U 帶鎖機櫃式機箱（淘寶連結）
機箱本體＋機櫃滑軌 - 價格：325 人民幣
硬碟熱插拔模組 - 價格：285 人民幣
共 2758 台幣

整新碟（淘寶連結）
應該是將希捷 Exos X16 16 TB 企業級硬碟 2 TB 壞軌區域隔離整新成 14 TB，再次強調，風險極高。

我買了兩顆做 RAID1，還有遵循「321 原則」備份。

單顆價格是 908 人民幣（3857 台幣）。

集運過來又花了將近 700 人民幣，我還有跟其他很多東西一起運，就抓個 500 人民幣（2200 台幣）好了。

周邊設備
#

UPS 防斷電系統
我的需求是容量大約 1500VA / 1000W，且要支援開源 UPS 管理工具 Network UPS Tools (NUT)，最後在 momo 上購入這台 5990 元的 CyberPower CP1500PFCLCDa。
路由器
為了要跟一般家用設備內網隔離，原先打算購入一台新路由器，研究的過程發現軟體路由器 OPNsense，便在主系統 PVE 中開設一台 OPNsense 虛擬機作為軟路由，負責整個 Home Lab 的流量。

未來會搞一台獨立主機架設它，不然要是 OPNsense 虛擬機掛了或是 PVE 本身掛了，整個 Home Lab 就癱瘓了，連在遠端都無法用 IPMI 控制。
Switch 交換器
拿家裡倉庫裡挖出的百元交換器，還在物色適合的機器。
PDU機架型排插
買機櫃時有附，但因淘寶購入所以非台灣可用的插頭類型，原本打算另外購入，但發現用 UPS 就夠了。

總開銷
#

硬體	數量	總價
CPU	1	9700
主機板	1	13990
RAM	2	17300
NVMe M.2 SSD	2	5176
電供	1	3390
HDD	2	7714
UPS	1	5990
機箱	1	2758
機櫃	1	3505
機櫃風扇	4	1260
集運費		2200
總開銷		76159

後記
#

這篇單純只是分享初期 Home Lab 的藍圖構思以及硬體選購過程，後續我還會分享一些軟體層面及網路層面的架設心得。

我的硬體選擇絕對不是最適合的，我相信專業的來一定可以挑出更符合我的需求的硬體，但自己探索的過程也是一種樂趣，以結論來說整台伺服器非常堪用，甚至可以說某些部分還有些效能過剩，但有什麼不好呢？

參考文章
#

現在已經有繞過限制的方法了。 ↩︎

Hugo 可折疊聊天視窗短代碼 Shortcode

contact@yozlog.com (YoZ 柚子) — Mon, 03 Nov 2025 23:45:00 +0900

前言
#

在我生活向部落格中的這篇貼文中，我想直接在文內顯示我跟朋友的對話內容。我可以直接截圖放上去，但一方面我想能不放圖片就不放圖片，避免增加網站的重量，另一方面我跟朋友的對話要是要發上來應該要一直打馬賽克，於是我以 hugo stack 主题美化這篇文章提到的「聊天氣泡 Shortcode」為基礎，透過 Perplexity 協助編寫並做了許多修改，完成了這個 Shortcode，具體來說是兩個，以下會說明。

功能
#

自動配合深淺色主題
全參數可自訂
包含兩個 Shortcode（聊天視窗與對話框）
對話框 Shortcode 可單獨使用
可折疊聊天視窗
游標懸浮 Focus
多語言網站外觀文字翻譯

創建 Shortcode 短代碼
#

可折疊聊天視窗
#

在/layouts/shortcodes路徑下創建collapsible-chatbox.html。

<div class="ccb-container" data-collapsible="true">
 {{ if or (.Get "title") (.Get "count") }}
 <div class="ccb-container__header">
 {{ if .Get "title" }}
 <span class="ccb-container__title">{{ .Get "title" }}</span>
 {{ end }}
 {{ if .Get "count" }}
 <span class="ccb-container__count">{{ .Get "count" }} 則訊息</span>
 {{ end }}
 </div>
 {{ end }}
 <div class="ccb-messages">
 {{ .Inner }}
 </div>
</div>

{{/* 使用 partial 載入 JavaScript，防止重複載入 */}}
{{ partial "prevent-js-reload.html" (dict "Page" .Page "id" "collapsible-chatbox" "src" "js/collapsible-chatbox.js") }}

對話框
#

一樣在/layouts/shortcodes路徑下創建chat.html。

{{ if eq (.Get "position") "left" }}
<div class="ccb-chat ccb-chat--other">
 <div class="ccb-chat__inner">
 {{ if .Get "date" }}
 <div class="ccb-chat__date">{{ .Get "date" }}</div>
 {{ end }}
 {{ if or (.Get "name") (.Get "timestamp") }}
 <div class="ccb-chat__meta">{{ .Get "name" }}{{ if and (.Get "name") (.Get "timestamp") }}&nbsp;&nbsp;&nbsp;{{ end }}{{ .Get "timestamp" }}</div>
 {{ end }}
 <div class="ccb-chat__text">
 {{ .Inner }}
 </div>
 </div>
</div>
{{ else if eq (.Get "position") "right" }}
<div class="ccb-chat ccb-chat--self">
 <div class="ccb-chat__inner">
 {{ if .Get "date" }}
 <div class="ccb-chat__date">{{ .Get "date" }}</div>
 {{ end }}
 {{ if or (.Get "name") (.Get "timestamp") }}
 <div class="ccb-chat__meta" style="text-align: right;">{{ .Get "timestamp" }}{{ if and (.Get "name") (.Get "timestamp") }}&nbsp;&nbsp;&nbsp;{{ end }}{{ .Get "name" }}</div>
 {{ end }}
 <div class="ccb-chat__text">
 {{ .Inner }}
 </div>
 </div>
</div>
{{ end }}

創建 Partial 檔案
#

參考我先前的文章「Hugo Partial範本防止JavaScript重複載入」。

創建 JavaScript
#

手動建立或找到/static/js路徑，並新增collapsible-chatbox.js

// Collapsible Chatbox
(function() {
 'use strict';
 
 // 防止重複初始化
 if (window.CollapsibleChatboxInitialized) {
 return;
 }
 window.CollapsibleChatboxInitialized = true;

 function initCollapsibleChatbox() {
 // 選取所有可折疊的聊天容器
 const chatContainers = document.querySelectorAll('.ccb-container[data-collapsible="true"]');

 chatContainers.forEach(function(container) {
 // 避免重複初始化
 if (container.classList.contains('ccb-initialized')) {
 return;
 }
 container.classList.add('ccb-initialized');

 const messagesWrapper = container.querySelector('.ccb-messages');
 
 // 檢查高度是否超過 300px
 const contentHeight = messagesWrapper.scrollHeight;

 if (contentHeight > 300) {
 // 加上折疊樣式
 container.classList.add('ccb-collapsible');

 // 創建漸層遮罩
 const gradient = document.createElement('div');
 gradient.className = 'ccb-gradient';
 messagesWrapper.appendChild(gradient);

 // 創建展開按鈕
 const btn = document.createElement('button');
 btn.className = 'ccb-expand-btn';
 btn.innerHTML = '<span class="ccb-expand-text">展開訊息</span><span class="ccb-collapse-text" style="display:none;">收起訊息</span>';

 // 插入按鈕到容器內
 container.appendChild(btn);

 // 按鈕點擊事件
 btn.addEventListener('click', function() {
 const expandText = btn.querySelector('.ccb-expand-text');
 const collapseText = btn.querySelector('.ccb-collapse-text');

 if (container.classList.contains('ccb-collapsible')) {
 // 展開
 container.classList.remove('ccb-collapsible');
 container.classList.add('ccb-expanded');
 expandText.style.display = 'none';
 collapseText.style.display = 'inline';
 } else {
 // 收起
 container.classList.remove('ccb-expanded');
 container.classList.add('ccb-collapsible');
 expandText.style.display = 'inline';
 collapseText.style.display = 'none';
 // 平滑滾動回容器頂部
 container.scrollIntoView({ behavior: 'smooth', block: 'start' });
 }
 });
 }
 });
 }

 // DOM 載入完成後執行
 if (document.readyState === 'loading') {
 document.addEventListener('DOMContentLoaded', initCollapsibleChatbox);
 } else {
 // DOM 已經載入完成
 initCollapsibleChatbox();
 }
})();

加入 CSS 樣式
#

編輯/assets/css路徑下的custom.css，加入以下樣式：

/* ===== Collapsible Chatbox (CCB) 專用樣式 ===== */

:root {
 /* CCB 淺色模式變數 */
 --ccb-bg: #f5f5f5;
 --ccb-surface: #ffffff;
 --ccb-text: #000000;
 --ccb-text-secondary: #707070;
 --ccb-primary: rgba(0, 0, 0, 0.06);
 --ccb-primary-hover: rgba(0, 0, 0, 0.1);
 --ccb-self-bg: #b5e36d;
 --ccb-other-bg: #e9e9eb;
 --ccb-border: rgba(0, 0, 0, 0.1);
 --ccb-gradient-end: #ffffff;
 --ccb-container-bg: #ffffff;
 --ccb-container-shadow: rgba(0, 0, 0, 0.1);
}

.dark {
 /* CCB 深色模式變數 */
 --ccb-bg: #1a1a1a;
 --ccb-surface: #2a2a2a;
 --ccb-text: #ffffff;
 --ccb-text-secondary: #b1b1b1;
 --ccb-primary: rgba(255, 255, 255, 0.1);
 --ccb-primary-hover: rgba(255, 255, 255, 0.15);
 --ccb-self-bg: #b5e36d;
 --ccb-other-bg: #3a3a3a;
 --ccb-border: rgba(255, 255, 255, 0.1);
 --ccb-gradient-end: #2a2a2a;
 --ccb-container-bg: #2a2a2a;
 --ccb-container-shadow: rgba(0, 0, 0, 0.3);
}

/* ===== 聊天容器樣式 ===== */
.ccb-container {
 background-color: var(--ccb-container-bg);
 border-radius: 15px;
 padding: 20px;
 margin-bottom: 30px;
 box-shadow: 0 2px 10px var(--ccb-container-shadow);
 position: relative;
 overflow: hidden;
 transition: all 0.3s ease;
}

/* 聊天容器標題 */
.ccb-container__header {
 display: flex;
 align-items: center;
 padding-bottom: 15px;
 border-bottom: 1px solid var(--ccb-border);
 margin-bottom: 15px;
}

.ccb-container__title {
 font-size: 16px;
 font-weight: 600;
 color: var(--ccb-text);
 flex: 1;
}

.ccb-container__count {
 font-size: 12px;
 color: var(--ccb-text-secondary);
 background: var(--ccb-bg);
 padding: 4px 12px;
 border-radius: 12px;
}

/* 聊天訊息列表 */
.ccb-messages {
 position: relative;
}

/* 折疊狀態 */
.ccb-container.ccb-collapsible .ccb-messages {
 max-height: 300px;
 overflow: hidden;
 transition: max-height 0.3s ease;
}

/* 展開狀態 */
.ccb-container.ccb-expanded .ccb-messages {
 max-height: none;
}

/* 漸層遮罩 */
.ccb-gradient {
 position: absolute;
 bottom: 0;
 left: 0;
 right: 0;
 height: 100px;
 background: linear-gradient(to bottom, transparent, var(--ccb-gradient-end));
 pointer-events: none;
 z-index: 2;
 opacity: 1;
 transition: opacity 0.3s ease;
}

.ccb-container.ccb-expanded .ccb-gradient {
 opacity: 0;
}

/* 展開按鈕 */
.ccb-expand-btn {
 display: block;
 width: 100%;
 padding: 12px;
 margin-top: 15px;
 background: var(--ccb-primary);
 color: var(--ccb-text);
 border: 1px solid var(--ccb-border);
 border-radius: 10px;
 cursor: pointer;
 font-size: 14px;
 font-weight: 500;
 text-align: center;
 transition: all 0.2s;
}

.ccb-expand-btn:hover {
 background: var(--ccb-primary-hover);
}

.ccb-expand-text,
.ccb-collapse-text {
 display: inline-flex;
 align-items: center;
 gap: 8px;
}

/* ===== 聊天訊息樣式 ===== */
.ccb-chat {
 margin: 10px 0;
 padding: 10px;
 position: relative;
 transition: transform 0.2s;
 max-width: 80%;
 min-width: 15%;
}

.ccb-chat:hover {
 transform: scale(1.02);
}

/* 右側對話框（自己） */
.ccb-chat--self {
 text-align: left;
 background-color: var(--ccb-self-bg);
 color: var(--ccb-text);
 border-radius: 15px;
 width: fit-content;
 margin-left: auto;
}

.ccb-chat--self::before {
 content: "";
 position: absolute;
 right: -18px;
 bottom: 5px;
 transform: translateY(-50%);
 border-width: 15px 0 0 20px;
 border-style: solid;
 border-color: transparent transparent transparent var(--ccb-self-bg);
}

/* 左側對話框（其他人） */
.ccb-chat--other {
 text-align: left;
 background-color: var(--ccb-other-bg);
 color: var(--ccb-text);
 border-radius: 15px;
 position: relative;
 width: fit-content;
}

.ccb-chat--other::before {
 content: "";
 position: absolute;
 left: -18px;
 bottom: 5px;
 transform: translateY(-50%);
 border-width: 15px 20px 0 0;
 border-style: solid;
 border-color: transparent var(--ccb-other-bg) transparent transparent;
}

/* 消息元數據樣式（名稱和時間戳） */
.ccb-chat__meta {
 font-weight: bold;
 font-size: 0.67em;
 color: var(--ccb-text-secondary);
 margin-bottom: 5px;
}

.ccb-chat--self .ccb-chat__meta {
 text-align: right;
 color: #707070;
}

/* 日期顯示樣式 */
.ccb-chat__date {
 font-size: 0.6em;
 color: #707070;
 margin-bottom: 3px;
 opacity: 0.8;
}

.ccb-chat--self .ccb-chat__date {
 text-align: right;
}

/* 消息文本樣式 */
.ccb-chat__text {
 font-size: 0.9em;
 margin-left: 10px;
 word-break: break-word;
 color: #000000;
}

/* 深色模式下對方的訊息文字顏色 */
.dark .ccb-chat--other .ccb-chat__text {
 color: #ffffff;
}

/* 響應式設計 */
@media (max-width: 600px) {
 .ccb-chat {
 max-width: 85%;
 }
}

檔案結構
#

你的網站目錄/
├── layouts/
│ ├── partials/
│ │ └── prevent-js-reload.html ← 防重複載入
│ └── shortcodes/
│ ├── collapsible-chatbox.html ← 聊天視窗
│ └── chat.html ← 對話框
├── static/
│ └── js/
│ └── collapsible-chatbox.js ← JavaScript
└── assets/
 └── css/
 └── custom.css ← CSS 樣式

完整使用範例
#

完整功能
對話框標題＋訊息數量＋日期＋訊息時間＋名字

{{< collapsible-chatbox title="對話框" count="4" >}}
{{< chat position="left" name="小明" timestamp="00:00 date="2025年11月2日" >}}
你好好好好好好好好好好好好好好好好好好好好好好好好好好好好好好好好好
{{< /chat >}}

{{< chat position="right" name="我" timestamp="01:00" date="2025年11月2日" >}}
你好好好好好好好好好好好好好好好好好好好好好好好好好好好好好好好好好
{{< /chat >}}

{{</* chat position="right" name="小明" timestamp="01:00" date="2025年11月2日" >}}
晚安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安
{{< /chat >}}

{{< chat position="right" name="我" timestamp="01:30" date="2025年11月2日" >}}
晚安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安
{{< /chat >}}
{{< /collapsible-chatbox >}}

2025年11月2日

小明 00:00

你好好好好好好好好好好好好好好好好好好好好好好好好好好好好好好好好好

2025年11月2日

01:00 我

你好好好好好好好好好好好好好好好好好好好好好好好好好好好好好好好好好

2025年11月2日

小明 01:00

晚安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安

2025年11月2日

01:30 我

晚安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安

隱藏對話框 Header

{{< collapsible-chatbox >}}
{{< chat position="left" name="小明" timestamp="00:00" date="2025年11月2日" >}}
你好
{{< /chat>}}

{{< chat position="right" name="我" timestamp="01:00" date="2025年11月2日" >}}
你好
{{< /chat >}}
{{< /collapsible-chatbox >}}

2025年11月2日

小明 00:00

你好

2025年11月2日

01:00 我

你好

純訊息

{{< collapsible-chatbox >}}
{{< chat position="left" >}}
你好
{{< /chat >}}

{{< chat position="right" >}}
你好
{{< /chat >}}
{{< /collapsible-chatbox >}}

你好

單獨使用對話框 Shortcode

{{< chat position="left" >}}
你好
{{< /chat >}}

{{< chat position="right" >}}
你好
{{< /chat >}}

你好

可自訂參數
#

collapsible-chatbox參數

參數	類型	必填	預設值	說明
`title`	字串	否	無	聊天容器標題
`count`	字串/數字	否	無	訊息數量（如 “8”）

chat參數

參數	類型	必填	預設值	說明
`position`	字串	是	無	`"left"` 或 `"right"`
`name`	字串	否	無	發信人名稱
`timestamp`	字串	否	無	時間（如 “00:00”）
`date`	字串	否	無	日期（如 “2025年11月2日”）

多語言網站外觀文字翻譯
#

將折疊式聊天視窗 Partial 範本collapsible-chatbox.html改為：

<div class="ccb-container" data-collapsible="true">
 {{ if or (.Get "title") (.Get "count") }}
 <div class="ccb-container__header">
 {{ if .Get "title" }}
 <span class="ccb-container__title">{{ .Get "title" }}</span>
 {{ end }}
 {{ if .Get "count" }}
 <span class="ccb-container__count">{{ .Get "count" }} {{ i18n "shortcode.collapsible-chatbox.messages" }}</span>
 {{ end }}
 </div>
 {{ end }}
 <div class="ccb-messages">
 {{ .Inner }}
 </div>
</div>

{{ $scratchKey := "script-loaded-collapsible-chatbox" }}
{{ if not (.Page.Scratch.Get $scratchKey) }}
 <script>
 document.documentElement.dataset.ccbExpandText = "{{ i18n "shortcode.collapsible-chatbox.expand" }}";
 document.documentElement.dataset.ccbCollapseText = "{{ i18n "shortcode.collapsible-chatbox.collapse" }}";
 </script>
 {{ partial "prevent-js-reload.html" (dict "Page" .Page "id" "collapsible-chatbox" "src" "js/shortcodes/collapsible-chatbox.js" "fromAssets" true) }}
{{ end }}

將collapsible-chatbox.js改為：

// Collapsible Chatbox
(function() {
 'use strict';
 
 // 防止重複初始化
 if (window.CollapsibleChatboxInitialized) {
 return;
 }
 window.CollapsibleChatboxInitialized = true;

 function initCollapsibleChatbox() {
 // 從 data 屬性取得翻譯文字
 const expandText = document.documentElement.dataset.ccbExpandText || 'Expand Messages';
 const collapseText = document.documentElement.dataset.ccbCollapseText || 'Collapse Messages';

 // 選取所有可折疊的聊天容器
 const chatContainers = document.querySelectorAll('.ccb-container[data-collapsible="true"]');

 chatContainers.forEach(function(container) {
 // 避免重複初始化
 if (container.classList.contains('ccb-initialized')) {
 return;
 }
 container.classList.add('ccb-initialized');

 const messagesWrapper = container.querySelector('.ccb-messages');
 
 // 檢查高度是否超過 300px
 const contentHeight = messagesWrapper.scrollHeight;

 if (contentHeight > 300) {
 // 加上折疊樣式
 container.classList.add('ccb-collapsible');

 // 創建漸層遮罩
 const gradient = document.createElement('div');
 gradient.className = 'ccb-gradient';
 messagesWrapper.appendChild(gradient);

 // 創建展開按鈕（使用翻譯文字）
 const btn = document.createElement('button');
 btn.className = 'ccb-expand-btn';
 btn.innerHTML = '<span class="ccb-expand-text">' + expandText + '</span><span class="ccb-collapse-text" style="display:none;">' + collapseText + '</span>';

 // 插入按鈕到容器內
 container.appendChild(btn);

 // 按鈕點擊事件
 btn.addEventListener('click', function() {
 const expandTextEl = btn.querySelector('.ccb-expand-text');
 const collapseTextEl = btn.querySelector('.ccb-collapse-text');

 if (container.classList.contains('ccb-collapsible')) {
 // 展開
 container.classList.remove('ccb-collapsible');
 container.classList.add('ccb-expanded');
 expandTextEl.style.display = 'none';
 collapseTextEl.style.display = 'inline';
 } else {
 // 收起
 container.classList.remove('ccb-expanded');
 container.classList.add('ccb-collapsible');
 expandTextEl.style.display = 'inline';
 collapseTextEl.style.display = 'none';
 // 平滑滾動回容器頂部
 container.scrollIntoView({ behavior: 'smooth', block: 'start' });
 }
 });
 }
 });
 }

 // DOM 載入完成後執行
 if (document.readyState === 'loading') {
 document.addEventListener('DOMContentLoaded', initCollapsibleChatbox);
 } else {
 // DOM 已經載入完成
 initCollapsibleChatbox();
 }
})();

最後修改/i18n路徑下的設定檔，以zh-TW.yaml為例，在其中添加：

shortcode:
 collapsible-chatbox:
 messages: 則訊息
 expand: 查看更多訊息
 collapse: 收起訊息

Hugo Partial範本防止JavaScript重複載入

contact@yozlog.com (YoZ 柚子) — Mon, 03 Nov 2025 23:00:00 +0900

前言
#

最近在 Hugo 創建了幾個 Shortcode ，許多有導入 JavaScript，於是做了一個 Partial 範本方便以後快速使用。

Partial 範本內容
#

在/layouts/partials下新增prevent-js-reload.html

{{/*
 Usage: {{ partial "prevent-js-reload.html" (dict "Page" .Page "id" "script-id" "src" "js/script.js") }}
 Optional: add "fromAssets" true to load from assets (resources.Get + Minify + Fingerprint).
 Params:
 - Page: the .Page object (required)
 - id: unique key used to prevent loading the same script more than once per page
 - src: path to the JavaScript file (relative to static/ or assets/)
 - fromAssets: if true, load from assets pipeline instead of relURL
*/}}
{{ $id := .id }}
{{ $src := .src }}
{{ $fromAssets := .fromAssets | default false }}
{{ $scratchKey := printf "script-loaded-%s" $id }}

{{ if not (.Page.Scratch.Get $scratchKey) }}
 {{ .Page.Scratch.Set $scratchKey true }}
 {{ if $fromAssets }}
 {{ $js := resources.Get $src }}
 {{ if $js }}
 {{ $js = $js | resources.Minify | resources.Fingerprint (.Page.Site.Params.fingerprintAlgorithm | default "sha512") }}
 <script src="{{ $js.RelPermalink }}" integrity="{{ $js.Data.Integrity }}" defer></script>
 {{ else }}
 <script src="{{ $src | relURL }}" defer></script>
 {{ end }}
 {{ else }}
 <script src="{{ $src | relURL }}" defer></script>
 {{ end }}
{{ end }}

Hugo Blowfish主題｜外觀功能修改日誌

contact@yozlog.com (YoZ 柚子) — Sun, 02 Nov 2025 00:00:00 +0000

前言
#

這裡記錄了一些我的網站微調及設定，主題是使用「Blowfish」。

網站外觀
#

首頁簡介
#

參考本網站首頁，作者名下方有幾行介紹文字。

先到/config/_default/languages.toml中找到[params.author]，在下面插入

welcomeMessage = "你的介紹" # 要用 HTML 寫，非 Markdown

接著看你是用什麼主頁佈局（Layout），將/themes/blowfish/layouts/partials/home底下的對應範本複製到/layouts/partials中，並在想要的位置插入：

{{ with .Site.Params.Author.welcomeMessage }}
 <div class="max-w-2xl text-xs leading-relaxed text-neutral-700 dark:text-neutral-300" style="margin: 0.5rem 0 0.25rem 0;">
 {{ . | markdownify }}
 </div>

我是將它插在下面這段Author Headline的下方

{{ with .Site.Params.Author.headline }}
 <h2 class="mt-0 mb-0 text-xl text-neutral-800 dark:text-neutral-300">
 {{ . | markdownify }}
 </h2>
{{ end }}

Header 網站標題響應式隱藏
#

我的主網站 Yoz Music 鼓手柚子因網站標題較長，在手機上可能會在手機上可能會跟 Header 中的 Navbar 物件衝突導致換行。
Blowfish 預設只能單純隱藏網站標題文字，並沒有響應式設定，於是我在custom.css中增加以下設定，讓手機上不顯示標題文字。

@media screen and (max-width: 768px) {
 nav.flex.space-x-3 > a {
 display: none !important;
 }
}

主頁作者名換行機制
#

在 hero 或 background 佈局（Layout）如果有設定作者便會在首頁顯示「作者頭貼」與「名字」，預設則是網站名，可參考本站首頁。
在我的主網站 Yoz Music 鼓手柚子與個人部落格「YoZ Blog」中，作者名為DrummerYoZ 鼓手柚子，因字數較長，在手機上必定會換行，而原始的換行機制單純，顯示的效果不太美觀，類似於：

Drummeryoz 鼓手
 柚子

我讓它透過空格將DrummerYoZ與鼓手柚子識別為兩個部分，強制需要換行時，直接將鼓手柚子換到下一行，像是下面顯示的樣式：

DrummerYoZ
 鼓手柚子

我複製了/themes/blowfish/layouts/partials/home/background.html至/layouts/partials/home/background.html，並編輯將：

<h1 class="mb-2 text-4xl font-extrabold text-neutral-800 dark:text-neutral-200">
 {{ .Site.Params.Author.name | default .Site.Title }}
</h1>

改為：

{{ $name := .Site.Params.Author.name | default .Site.Title }}
{{ $parts := split $name " " }}
<h1 class="text-4xl font-extrabold flex flex-wrap justify-center w-full mb-0">
 <span class="whitespace-nowrap">{{ index $parts 0 }}</span>&nbsp;<span class="whitespace-nowrap">{{ index $parts 1 }}</span>
</h1>

Header 多語言網站切換按鈕隱藏文字
#

樣式請直接參考本站 Header。將/themes/blowfish/layouts/partials路徑下的translations.html複製到/layouts/partials編輯，並將下面這段直接刪除，或是註記起來。

<div
 class="text-sm font-medium text-gray-500 hover:text-primary-600 dark:hover:text-primary-400"
 title="{{ .Title }}">
 {{- i18n "global.language" | markdownify -}}
</div>

我直接把它註記起來了，免得之後需要時又要重寫。

<!--
<div
 class="text-sm font-medium text-gray-500 hover:text-primary-600 dark:hover:text-primary-400"
 title="{{ .Title }}">
 {{- i18n "global.language" | markdownify -}}
</div>
-->

3D 網格加代碼瀑布風格
#

本網站背景。參考 Hugo 動畫背景｜3D網格加代碼瀑布風格

列表 Card View 分類與標籤分別顯示
#

首先在/config/_default/params.toml中添加：

[article]
 # 其他既有參數...
 showTaxonomies = true # 必須為 true 才能顯示分類和標籤
 showCategoryAndTagSeperate = true # 控制是否分開顯示分類和標籤

接著修改 Partial 模板，將/themes/blowfish/layouts/partials/article-meta路徑下的basic.html複製到/layouts/partials/article-meta並編輯：

{{ if .Params.showTaxonomies | default (.Site.Params.article.showTaxonomies | default false) }}
 {{ if .Params.showCategoryAndTagSeperate | default (.Site.Params.article.showCategoryAndTagSeperate | default false) }}
 {{/* 分開顯示 categories 和 tags */}}
 {{ with (.GetTerms "categories") }}
 <div class="flex flex-row flex-wrap items-center">
 <span class="mr-2 font-medium">{{ i18n "categories" | title }}: </span>
 {{ range . }}
 <a class="relative mt-1 mr-2" href="{{ .RelPermalink }}">
 {{ partial "badge.html" .LinkTitle }}
 </a>
 {{ end }}
 </div>
 {{ end }}

 {{ with (.GetTerms "tags") }}
 <div class="flex flex-row flex-wrap items-center {{ if not (eq (len ($context.GetTerms "categories")) 0) }}mt-1{{ end }}">
 <span class="mr-2 font-medium">{{ i18n "tags" | title }}: </span>
 {{ range . }}
 <a class="relative mt-1 mr-2" href="{{ .RelPermalink }}">
 {{ partial "badge.html" .LinkTitle }}
 </a>
 {{ end }}
 </div>
 {{ end }}
 {{ else }}
 {{/* 原始顯示方式 */}}
 <div class="flex flex-row flex-wrap items-center">
 {{ range $taxonomy, $terms := .Site.Taxonomies }}
 {{ if and (not (eq $taxonomy "authors")) (not (eq $taxonomy "series")) }}
 {{ if (gt (len ($context.GetTerms $taxonomy)) 0) }}
 {{ range $context.GetTerms $taxonomy }}
 <a class="relative mt-1 mr-2" href="{{ .RelPermalink }}">
 {{ partial "badge.html" .LinkTitle }}
 </a>
 {{ end }}
 {{ end }}
 {{ end }}
 {{ end }}
 </div>
 {{ end }}
{{ end }}

如要為多語言網站設定翻譯，在對應的 i18n 文件（如/i18n/zh-tw.yaml）中加入：

categories: "分類"
tags: "標籤"

也可透過 front matter 為個別文章設定：

---
title: "文章標題"
date: 2025-10-30
showCategoryAndTagSeperate: true 
 # 覆蓋預設設置，預設為 true 則在此改為 false 讓這篇文章的分類與標籤在 card view 中混合顯示；預設為 false 則設為 true 只讓這篇文章的分類與標籤在 card view 中分開顯示
---

分類頁標籤
#

我是直接用 Blowfish 預設的 Shortcode Button，但是連續使用時，預設會長下面這樣：

A B C

我把它改成：

A B C

要改成這個樣式的話，將/themes/blowfish/layouts/shortcodes路徑下的button.html複製到/layouts/shortcodes並編輯，在role="button"下行加入：

style="display: inline-block; margin-right: 5px; margin-bottom: 8px;"

原比例置中文章卡片縮圖
#

我習慣以16:9的比例製作 feature image，但是 Blowfish 因為有指定高度height: 200px及容器最小寬度min-width: 300px，因此在行動裝置上可能會造成圖片被容器裁切無法完整顯示。

因此我在custom.css中添加了以下的設定，讓比例16:9的縮圖能完整顯示，主要是設定將縮圖容器的比例固定，再將縮圖置中。

/* 卡片縮圖（首頁） */
.thumbnail_card,
.thumbnail_card_related {
 aspect-ratio: 16/9; /* 固定容器成 16:9 比例 */
 min-width: 0; /* 覆蓋預設的`300px`，取消任何預設的最小寬度限制 */
 height: auto; /* 覆蓋預設的`200px`，交給 aspect-ratio 自動決定 */
}

/* 相關文章卡片縮圖 */
.thumbnail_card_related img,
.thumbnail_card img {
 top: 50%; /* 圖片左上角的 y 先移到容器高度的 50%（垂直中心線） */
 left: 50%; /* 圖片左上角的 x 先移到容器寬度的 50%（水平中心線） */
 transform: translate(-50%, -50%);/* 再往左、往上各移自己寬高的 50%，讓「圖片中心」對齊「容器中心」 */
 object-fit: contain; /* 保持圖片比例，不讓圖片被拉伸變形 */
}

切換文章列表樣式按鈕
#

於主頁最新文章、全部文章、分類等頁面切換「卡片模式」與「列表模式」兩種瀏覽方式。

參考Hugo Blowfish 主題｜切換文章列表樣式按鈕

Footer 區塊
#

橫向三區塊
#

原先 Blowfish 主題的 Footer 只有簡單橫向 Menu，請參考其官方網站。
我將Footer 分為橫向三個區塊，左邊為文字區塊；中間區塊顯示原先設定的 Menu 內容，只是改成垂直排列；右邊區塊放置聯絡表單，請直接參考本網站最下方 Footer 部分。

版權聲明
#

Copyright © 2025-2026 yoz.log. All rights reserved.
本網站全站文章禁止全文轉載，可分享除內文特別標明禁止使用任何形式分享之文章，引用請註明網站名稱及文章網址，並遵守【姓名標示-非商業性-禁止改作 4.0 國際】授權條款。如需商業使用請來信詢問。

在/config/_default/languages.toml中找到[params]段落下的copyright = "Copy, _right?_ :thinking_face:"，改為：
copyright = "Copyright © 網站創建年份-{ year } 部落格名. All rights reserved."

<div class="flex items-center justify-between">
 {{/* Copyright */}}
 {{ if .Site.Params.footer.showCopyright | default true }}
 <p class="text-sm text-neutral-500 dark:text-neutral-400">
 {{- with replace .Site.Params.copyright "{ year }" now.Year }}
 {{ . | markdownify }}
 {{- else }}
 &copy;
 {{ now.Format "2006" }}
 {{ .Site.Params.Author.name | markdownify }}
 {{- end }}
 </p>
 {{ end }}

在</p>下行加入：

<p class="text-center text-sm text-neutral-500 dark:text-neutral-400">
 輸入版權聲明詳細內容
</p>

網站運作時間統計
#

本網站已穩定運作 1年2個月3天

參考自 Hugo Stack 主题装修笔记 Part 3，該文章中的方法在我這不能用，且我還增加了多語言翻譯功能，改成像下方這樣：

上一段提到的footer.html最後一行{{ end }}下方插入：

<!-- 網站運作時間顯示區域 -->
<section class="text-center mt-4 text-xs text-neutral-600 dark:text-neutral-400">
 本網站已穩定運作
 <span id="runningdays" class="font-bold text-primary-500 dark:text-primary-400"></span>
</section>
<!-- 引用 js/running-time.js 檔案 -->
<script src="{{ "js/running-time.js" | relURL }}"></script>

接著創建在/static/js建立running-time.js並編輯：

(function() {
 let s1 = '更改成你的網站建立日期，例如：2025-11-03';
 s1 = new Date(s1.replace(/-/g, "/"));
 
 // 內建翻譯字典
 const translations = {
 'en': { years: ' years ', months: ' months ', days: ' days' },
 'zh-tw': { years: '年', months: '個月', days: '天' },
 'zh-cn': { years: '年', months: '个月', days: '天' },
 'ko': { years: '년 ', months: '개월 ', days: '일' }
 };
 
 function updateRunningTime() {
 let s2 = new Date();
 
 let years = s2.getFullYear() - s1.getFullYear();
 let months = s2.getMonth() - s1.getMonth();
 let days = s2.getDate() - s1.getDate();
 
 if (days < 0) {
 months -= 1;
 let prevMonth = new Date(s2.getFullYear(), s2.getMonth(), 0);
 days += prevMonth.getDate();
 }
 if (months < 0) {
 years -= 1;
 months += 12;
 }

 // 自動偵測當前語言（預設英文）
 let lang = document.documentElement.lang || 'en';
 lang = lang.toLowerCase();
 let t = translations[lang] || translations['en'];

 let result = years + t.years + months + t.months + days + t.days;
 
 let element = document.getElementById('runningdays');
 if (element) {
 element.innerHTML = result;
 }
 }
 
 if (document.readyState === 'loading') {
 document.addEventListener('DOMContentLoaded', updateRunningTime);
 } else {
 updateRunningTime();
 }
 
 setInterval(updateRunningTime, 60000);
})();

發布文章及總字數統計
#

已發布了 10 篇文章 · 總計 1萬2千345個字

一樣參考 Hugo Stack 主题装修笔记 Part 3。

我增加了class的類型，以配合 Blowfish 主題顏色及字體大小，且將原先只顯示x萬x千的格式改成增加百位數後並直接以數字顯示：

<!-- Add total page and word count time -->
<section class="totalcount text-center text-xs text-neutral-500 dark:text-neutral-400 mt-2">
 {{ $scratch := newScratch }}
 {{ range (where .Site.Pages "Kind" "page") }}
 {{ $scratch.Add "total" .WordCount }}
 {{ end }}
 {{ $totalWords := $scratch.Get "total" }}
 {{ if $totalWords }}
 {{ $wan := div $totalWords 10000 }}
 {{ $remainder := mod $totalWords 10000 }}
 {{ $qian := div $remainder 1000 }}
 {{ $finalRemainder := mod $remainder 1000 }}
 已發布了 {{ len (where .Site.RegularPages "Section" "posts") }} 篇文章 · 總計 
 {{ if gt $wan 0 }}{{ $wan }}萬{{ end }}{{ if gt $qian 0 }}{{ $qian }}千{{ end }}{{ if gt $finalRemainder 0 }}{{ $finalRemainder }}{{ end }}個字
 {{ end }}
</section>

文章內容相關
#

添加連結圖標
#

參考 Hugo Blowfish主題｜添加連結圖標

macOS 視窗風格可折疊程式碼區塊
#

長這樣
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
可折疊喔

參考 Hugo Blowfish 主題｜程式碼區塊樣式與折疊

新增額外 Hero 佈局樣式
#

使用 Blowfish 2.92 版本為基礎更改，共兩種。

第一種：與background樣式相同，但是只使用預設圖片當作背景（不使用文章 feature 圖）。

先複製/themes/blowfish/layouts/partials/hero路徑下的thumbAndBackground.html到/layouts/partials/hero並改名為default.html，程式碼改成下面這樣：

{{ $disableImageOptimization := site.Store.Get "disableImageOptimization" }}

{{/* === Background === */}}
{{ $useDefault := false }}
{{ $images := .Resources.ByType "image" }}
{{ $background := $images.GetMatch "*background*" }}
{{ $backgroundURL := "" }}

{{ if not (or $background $backgroundURL) }}
 {{ $default := site.Store.Get "defaultBackgroundImage" }}
 {{ if $default.url }}
 {{ $backgroundURL = $default.url }}
 {{ $useDefault = true }}
 {{ else if $default.obj }}
 {{ $background = $default.obj }}
 {{ $useDefault = true }}
 {{ end }}
{{ end }}

{{ if not (or $background $backgroundURL) }}
 {{ range slice "*cover*" "*thumbnail*" "*feature*" }}
 {{ if not $background }}{{ $background = $images.GetMatch . }}{{ end }}
 {{ end }}
{{ end }}

{{/* generate image URL if not hotlink */}}
{{ if not $backgroundURL }}
 {{ with $background }}
 {{ $backgroundURL = .RelPermalink }}
 {{ if not (or $disableImageOptimization (eq .MediaType.SubType "svg")) }}
 {{ $size := site.Store.Get "backgroundImageWidth" }}
 {{ $backgroundURL = (.Resize $size).RelPermalink }}
 {{ end }}
 {{ end }}
{{ end }}

{{ $isParentList := eq (.Scratch.Get "scope") "list" }}
{{ $shouldBlur := $.Params.layoutBackgroundBlur | default (or
 (and ($.Site.Params.article.layoutBackgroundBlur | default true) (not $isParentList))
 (and ($.Site.Params.list.layoutBackgroundBlur | default true) ($isParentList))
 )
}}
{{ $shouldAddHeaderSpace := $.Params.layoutBackgroundHeaderSpace | default (or
 (and ($.Site.Params.article.layoutBackgroundHeaderSpace | default true) (not $isParentList))
 (and ($.Site.Params.list.layoutBackgroundHeaderSpace | default true) ($isParentList))
 )
}}

{{ if $shouldAddHeaderSpace | default true }}
 <div id="hero" class="h-[150px] md:h-[200px]"></div>
{{ end }}
<div class="single_hero_background nozoom fixed inset-x-0 top-0 h-[800px]">
 {{ with $backgroundURL }}
 {{ $style := "" }}
 {{ $defaultPosition := cond $useDefault site.Params.imagePosition false }}
 {{ with $.Params.imagePosition | default $defaultPosition }}
 {{ $style = printf "object-position: %s;" . }}
 {{ end }}
 <img
 id="background-image-main"
 src="{{ . }}"
 alt=""
 role="presentation"
 loading="eager"
 decoding="async"
 fetchpriority="high"
 class="absolute inset-0 h-full w-full object-cover"
 {{ if $style }}style="{{ $style | safeCSS }}"{{ end }}>
 {{ end }}
 <div
 class="from-neutral absolute inset-0 bg-gradient-to-t to-transparent mix-blend-normal dark:from-neutral-800"></div>
 <div
 class="from-neutral to-neutral absolute inset-0 bg-gradient-to-t opacity-30 mix-blend-normal dark:from-neutral-800 dark:to-neutral-800 dark:opacity-60"></div>
</div>

{{ if $shouldBlur | default false }}
 <div
 id="background-blur"
 class="fixed opacity-0 inset-x-0 top-0 h-full single_hero_background nozoom backdrop-blur-2xl"></div>
 {{ $backgroundBlur := resources.Get "js/background-blur.js" }}
 {{ $backgroundBlur = $backgroundBlur | resources.Minify | resources.Fingerprint (.Site.Params.fingerprintAlgorithm | default "sha512") }}
 <script
 type="text/javascript"
 src="{{ $backgroundBlur.RelPermalink }}"
 integrity="{{ $backgroundBlur.Data.Integrity }}"
 data-blur-id="background-blur"
 data-image-id="background-image-main"
 {{ with $background }}data-image-url="{{ .RelPermalink }}"{{ end }}></script>
{{ end }}

其實就是把主題預設的thumbAndBackground.html中下面這段刪掉

{{/* === Featured === */}}
{{ $featured := "" }}
{{ $featuredURL := "" }}
{{ with .Params.featureimage }}
 {{ if or (strings.HasPrefix . "http:") (strings.HasPrefix . "https:") }}
 {{ if site.Params.hotlinkFeatureImage }}
 {{ $featuredURL = . }}
 {{ else }}
 {{ $featured = resources.GetRemote . }}
 {{ end }}
 {{ else }}
 {{ $featured = resources.Get . }}
 {{ end }}
{{ end }}

{{ if not (or $featured $featuredURL) }}
 {{ $images := $.Resources.ByType "image" }}
 {{ range slice "*feature*" "*cover*" "*thumbnail*" "*background*" }}
 {{ if not $featured }}{{ $featured = $images.GetMatch . }}{{ end }}
 {{ end }}
{{ end }}

{{ if not (or $featured $featuredURL) }}
 {{ $default := site.Store.Get "defaultFeaturedImage" }}
 {{ if $default.url }}
 {{ $featuredURL = $default.url }}
 {{ else if $default.obj }}
 {{ $featured = $default.obj }}
 {{ end }}
{{ end }}

{{/* generate image URL if not hotlink */}}
{{ if not $featuredURL }}
 {{ with $featured }}
 {{ $featuredURL = .RelPermalink }}
 {{ if not (or $disableImageOptimization (eq .MediaType.SubType "svg")) }}
 {{ $size := site.Store.Get "backgroundImageWidth" }}
 {{ $featuredURL = (.Resize $size).RelPermalink }}
 {{ end }}
 {{ end }}
{{ end }}

{{ $isParentList := eq (.Scratch.Get "scope") "list" }}
{{ $shouldBlur := $.Params.layoutBackgroundBlur | default (or
 (and ($.Site.Params.article.layoutBackgroundBlur | default true) (not $isParentList))
 (and ($.Site.Params.list.layoutBackgroundBlur | default true) ($isParentList))
 )
}}

然後在<div class="single_hero_background nozoom fixed inset-x-0 top-0 h-[800px]">上方加入

{{ if $shouldAddHeaderSpace | default true }}
 <div id="hero" class="h-[150px] md:h-[200px]"></div>
{{ end }}

第二種：與thumbAndBackground類似，使用預設背景圖，但是 feature 圖顯示為全高全寬，參考這篇文章。

先複製/themes/blowfish/layouts/partials/hero路徑下的thumbAndBackground.html到/layouts/partials/hero並改名為BigThumbAndBackground.html，找到下面這段：

<div class="overflow-hidden rounded-md h-36 md:h-56 lg:h-72 nozoom">
 <img
 src="{{ . }}"
 alt="{{ $.Title }}"
 loading="eager"
 decoding="async"
 fetchpriority="high"
 class="w-full h-full nozoom object-cover"
 {{ with $.Params.imagePositionFeature }}style="object-position: {{ . }};"{{ end }}>
</div>

改為：

<div class="overflow-hidden rounded-md">
 <img
 src="{{ . }}"
 alt="{{ $.Title }}"
 loading="eager"
 decoding="async"
 fetchpriority="high"
 class="w-full h-fulobject-cover"
 {{ with $.Params.imagePositionFeature }}style="object-position: {{ . }};"{{ end }}>
</div>

使用方法跟預設的 style 一樣，可直接在文章Front Matter新增heroStyle: default或是heroStyle: BigThumbAndBackground，或是在/config/_default/params.toml中設定為全局heroStyle。

用 Docker 部署 Twikoo 留言區
#

在每篇文章底下顯示留言區，供讀者互動。參考〈用 Docker 部署 Twikoo 留言區供 Hugo 網站使用〉。

短代碼（Shortcode）
#

可折疊 iframe
#

參考 Hugo 可折疊 iframe Shortcode

可折疊聊天視窗
#

2025年11月2日

小明 00:00

你好好好好好好好好好好好好好好好好好好好好好好好好好好好好好好好好好

2025年11月2日

01:00 我

你好好好好好好好好好好好好好好好好好好好好好好好好好好好好好好好好好

2025年11月2日

我 01:00

晚安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安

2025年11月2日

01:30 小明

晚安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安安

或是

你好

參考 Hugo 可折疊聊天視窗短代碼 Shortcode

其他
#

RSS 收錄全文
#

在/layouts/_default/rss.xml中（如使用主題預設的，直接複製一份過來）找到：

<description>{{ .Summary | html }}</description>

將它改為：

<description>{{ .Content | html }}</description>

這樣就完成了，如果你想更靈活地控制，也可以改為：

<description>
 {{ $src := .Site.Params.rss.descriptionSource | default "content" }}
 {{ if eq $src "summary" }}
 {{ .Summary | html }}
 {{ else if eq $src "description" }}
 {{ with .Params.description }}{{ . | html }}{{ else }}{{ .Summary | html }}{{ end }}
 {{ else }}
 {{ .Content | html }}
 {{ end }}
</description>

接著在網站全局參數設定文件 params.toml 中添加：

[rss]
 # RSS 內容來源：
 # "content" - 使用完整文章內文（預設）。較長，可能讓 feed 變大。
 # "summary" - 使用 Hugo 產生的摘要（例如前 N 字或 ＜!--more--＞。較短、適合 feed。
 # "description" - 使用該頁 front matter 的 "description" 欄位；若未設定則改用摘要。
 descriptionSource = "summary"

這樣就能透過params.toml更方便地修改。

希望訂閱我 RSS 的人都能用自己喜愛的 RSS 閱讀器及更方便的方式閱讀我的文章～

Hugo 可折疊 iframe Shortcode

contact@yozlog.com (YoZ 柚子) — Sun, 02 Nov 2025 00:00:00 +0000

前言
#

在 Hugo 動畫背景｜3D網格加代碼瀑布風格這邊文章中，我想要直接在文內展示該動畫背景。我可以直接在 Markdown 檔案中編寫 HTML iframe 元素創建，但我想要限制其高度，若超過便折疊，透過按鈕選擇是否展開，這樣的話更美觀且易於閱讀，就像 Hugo Blowfish 主題程式碼區塊樣式與折疊這篇文章中提到的「可折疊程式碼區塊」，於是我透過 Perplexity 協助編寫了這個「可折疊 iframe Shortcode」。

展示
#

展示檔案路徑
#

創建/static/demo路徑，將你要展示的.html檔存放在該路徑下。

新增 CSS 設定
#

編輯/assets/css路徑下的custom.css，添加：

/* /layouts/shortcodes/iframe.html */
/* iframe 容器 */
.iframe-container {
 position: relative;
 margin: 1.5rem 0;
}

/* 折疊狀態 */
.iframe-container.collapsible {
 max-height: 400px;
 overflow: hidden;
 transition: max-height 0.3s ease;
}

/* 展開狀態 */
.iframe-container.expanded {
 max-height: none;
}

/* 漸層遮罩 */
.iframe-container.collapsible::after {
 content: "";
 position: absolute;
 bottom: 0;
 left: 0;
 right: 0;
 height: 80px;
 background: linear-gradient(to bottom, transparent, var(--color-background));
 pointer-events: none;
}

.iframe-container.expanded::after {
 display: none;
}

/* 展開按鈕 */
.iframe-expand-btn {
 display: block;
 width: 100%;
 padding: 0.5rem;
 margin-top: 0.5rem;
 background: var(--color-secondary);
 border: 1px solid var(--color-border);
 border-radius: var(--radius-base);
 cursor: pointer;
 font-size: 0.875rem;
 text-align: center;
 transition: background 0.2s;
}

.iframe-expand-btn:hover {
 background: var(--color-secondary-hover);
}

如果主題不是使用 Blowfish，上述設定的參數可能要重新檢查。

創建 iframe Shortcode 並導入 JavaScript
#

在/layouts/shortcodes下創建iframe.html，並編輯：

<div class="iframe-container">
 <iframe src="{{ .Get "src" }}" 
 width="{{ .Get "width" | default "100%" }}" 
 height="{{ .Get "height" | default "600px" }}" 
 loading="lazy">
 </iframe>
</div>
{{ if not (.Page.Scratch.Get "iframe-js-loaded") }}
 {{ .Page.Scratch.Set "iframe-js-loaded" true }}
 </script>
 {{ $collapsibleIframe := resources.Get "js/collapsible-iframe.js" }}
 {{ $collapsibleIframe = $collapsibleIframe | resources.Minify | resources.Fingerprint (site.Params.fingerprintAlgorithm | default "sha512") }}
 <script src="{{ $collapsibleIframe.RelPermalink }}" integrity="{{ $collapsibleIframe.Data.Integrity }}" defer></script>
{{ end }}

創建 JavaScript
#

編輯/assets/js/collapsible-iframe.js，如路徑不存在就手動建立。

// static/js/collapsible-iframe.js
(function() {
 const containers = document.querySelectorAll('.iframe-container');
 
 // 從 HTML 讀取翻譯文字，預設為英文，這段是為了供多語言網站顯示對應文字，可直接將`Expand Content ▼`改為`展開完整內容 ▼`；`Collapse Content ▲`改為`折疊內容 ▲`
 const iframeExpandText = document.documentElement.dataset.iframeExpandText || 'Expand Content ▼';
 const iframeCollapseText = document.documentElement.dataset.iframeCollapseText || 'Collapse Content ▲';
 
 containers.forEach(function(container) {
 // 避免重複處理
 if (container.dataset.processed) return;
 container.dataset.processed = 'true';
 
 const iframe = container.querySelector('iframe');
 const iframeHeight = parseInt(iframe.getAttribute('height')) || 600;
 
 // 只對高度超過 400px 的 iframe 啟用折疊功能
 if (iframeHeight > 400) {
 // 設定容器為折疊狀態
 container.classList.add('collapsible');
 
 // 建立展開/折疊按鈕
 const btn = document.createElement('button');
 btn.className = 'iframe-expand-btn';
 btn.innerHTML = '<span class="expand-text">' + iframeExpandText + '</span><span class="collapse-text" style="display:none;">' + iframeCollapseText + '</span>';
 
 // 將按鈕插入到容器後面
 container.parentNode.insertBefore(btn, container.nextSibling);
 
 // 按鈕點擊事件
 btn.addEventListener('click', function() {
 const expandSpan = btn.querySelector('.expand-text');
 const collapseSpan = btn.querySelector('.collapse-text');
 
 if (container.classList.contains('collapsible')) {
 // 展開
 container.classList.remove('collapsible');
 container.classList.add('expanded');
 expandSpan.style.display = 'none';
 collapseSpan.style.display = 'inline';
 } else {
 // 折疊
 container.classList.remove('expanded');
 container.classList.add('collapsible');
 expandSpan.style.display = 'inline';
 collapseSpan.style.display = 'none';
 container.scrollIntoView({ behavior: 'smooth', block: 'start' });
 }
 });
 }
 });
})();

大功告成，如果你是多語言網站，請繼續參考下面步驟。

折疊按鈕多語言設定
#

修改 Shortcode
#

修改iframe.html，將：

{{ if not (.Page.Scratch.Get "iframe-js-loaded") }}
 {{ .Page.Scratch.Set "iframe-js-loaded" true }}
 </script>
 {{ $collapsibleIframe := resources.Get "js/collapsible-iframe.js" }}
 {{ $collapsibleIframe = $collapsibleIframe | resources.Minify | resources.Fingerprint (site.Params.fingerprintAlgorithm | default "sha512") }}
 <script src="{{ $collapsibleIframe.RelPermalink }}" integrity="{{ $collapsibleIframe.Data.Integrity }}" defer></script>
{{ end }}

改為：

{{ if not (.Page.Scratch.Get "iframe-js-loaded") }}
 {{ .Page.Scratch.Set "iframe-js-loaded" true }}
 <script>
 document.documentElement.dataset.iframeExpandText = "{{ i18n "shortcode.collapsible-iframe.expand" }}";
 document.documentElement.dataset.iframeCollapseText = "{{ i18n "shortcode.collapsible-iframe.collapse" }}";
 </script>
 {{ $collapsibleIframe := resources.Get "js/collapsible-iframe.js" }}
 {{ $collapsibleIframe = $collapsibleIframe | resources.Minify | resources.Fingerprint (site.Params.fingerprintAlgorithm | default "sha512") }}
 <script src="{{ $collapsibleIframe.RelPermalink }}" integrity="{{ $collapsibleIframe.Data.Integrity }}" defer></script>
{{ end }}

編輯 i18n 設定檔
#

編輯/i18n路徑下的設定檔，以繁體中文zh-TW.yaml為例，在檔案中新增：

shortcode:
 collapsible-iframe:
 expand: "展開完整內容 ▼"
 collapse: "折疊內容 ▲"

Done!

使用方法
#

接著你就可以在 Markdown 檔案中使用：

{{< iframe src="/demo/檔名.html" width="自訂" height="自訂" >}}

不添加width或heigh的話，預設為100%及600px，可到iframe.html中修改。

Hugo 動畫背景｜3D網格加代碼瀑布風格

contact@yozlog.com (YoZ 柚子) — Sun, 02 Nov 2025 00:00:00 +0000

前言
#

原先我的主網站「YoZ Music 鼓手柚子」和生活向部落格「YoZ Blog」的背景是用 Blowfish 主題中的background佈局（Layout），訪問這兩個網站就可以看到，背景是我的舞台照上層覆蓋了半透明的單色濾鏡。

將資訊類的文章獨立移到這裡後，畢竟文章主軸跟我「個人」沒什麼關係，便將背景改回純色，但看上去就是有點單調。想到之前看到的 React Bits - Animated UI Components For React 這個網站，裡面有很多酷炫的 React 背景元件但 Hugo 不能直接使用，我便透過 Perplexity 用 JavaScript 做出了「由中心向外波動」並且能跟「游標位置互動」的3D網格動畫，並且在畫面上段空白處加入了「代碼瀑布」動畫

Demo 展示
#

新增 CSS 設定
#

編輯/assets/css路徑下的custom.css，添加：

/* 3D 網格加代碼瀑布風格動畫背景 */
/* /layouts/partials/3d-grid-n-digi-rain-bg.html */
#three-d-grid-n-digi-rain-bg {
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 z-index: -1;
 perspective: 1000px;
}

/* 文章閱讀模式 - 動畫背景透明度由全局參數配置文件 params.toml 中 animationBackground.readingModeOpacity 控制 */
.animation-bg-reading-opacity.reading-mode #three-d-grid-n-digi-rain-bg {
 opacity: var(--animation-bg-reading-opacity, 0.35);
}

創建 JavaScript
#

在/assets/js路徑下創建3d-grid-n-digi-rain-bg.js並編輯，如路徑不存在就手動建立。

const canvas = document.getElementById('3d-grid-n-digi-rain-bg');
const ctx = canvas.getContext('2d');

let width, height;
let mouseX = 0;
let mouseY = 0;
let time = 0;

// 代碼瀑布變數
const matrixChars = 'アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヲン가나다라마바사아자차카타파하거너더러머버서어저처커터퍼허고노도로모보소오조초코토포호구누두루무부수우주추쿠투푸후0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ';
const fontSize = 16;
let columns;
let drops = [];
let speeds = [];
let trails = [];
let matrixTrails = [];

// 主題檢測
function isDarkMode() {
 return document.documentElement.classList.contains('dark') ||
 document.body.classList.contains('dark');
}

function resize() {
 width = canvas.width = window.innerWidth;
 height = canvas.height = window.innerHeight;
 columns = Math.floor(width / fontSize / 3);
 drops = [];
 speeds = [];
 trails = [];
 matrixTrails = [];
 
 for (let i = 0; i < columns; i++) {
 drops[i] = Math.random() * -50 - 10;
 speeds[i] = 0.15 + Math.random() * 0.15;
 trails[i] = 10 + Math.floor(Math.random() * 15);
 matrixTrails[i] = [];
 for (let t = 0; t < 30; t++) {
 matrixTrails[i][t] = matrixChars[Math.floor(Math.random() * matrixChars.length)];
 }
 }
}

resize();
window.addEventListener('resize', resize);

document.addEventListener('mousemove', (e) => {
 mouseX = e.clientX;
 mouseY = e.clientY;
});

// 監聽主題切換
const observer = new MutationObserver(() => {
 // 主題改變時重繪
});

observer.observe(document.documentElement, {
 attributes: true,
 attributeFilter: ['class']
});

observer.observe(document.body, {
 attributes: true,
 attributeFilter: ['class']
});

// 繪製代碼瀑布
function drawMatrix() {
 const darkMode = isDarkMode();
 const bgOpacity = darkMode ? 0.05 : 0.08;
 const bgColor = darkMode ? '10, 10, 10' : '252, 252, 249';
 
 ctx.fillStyle = `rgba(${bgColor}, ${bgOpacity})`;
 ctx.fillRect(0, 0, width, height * 0.4);
 
 ctx.font = fontSize + 'px monospace';
 
 for (let i = 0; i < drops.length; i++) {
 const x = (i / columns) * width;
 const y = drops[i] * fontSize;
 const trailLength = trails[i];

 for (let t = 0; t < trailLength; t++) {
 const trailY = (drops[i] - t) * fontSize;
 
 if (trailY > 0 && trailY < height * 0.4) {
 // 定期更新字符（小概率）
 if (Math.random() > 0.95) {
 matrixTrails[i][t % 30] = matrixChars[Math.floor(Math.random() * matrixChars.length)];
 }
 const char = matrixTrails[i][t % 30];
 
 let alpha, color;
 if (t === 0) {
 // 瀑布頭部
 alpha = 0.65;
 color = darkMode ?
 `rgba(95, 211, 160, ${alpha})` :
 `rgba(45, 166, 178, ${alpha})`;
 } else {
 // 瀑布拖尾 - 漸層變暗
 alpha = Math.max(0, 1 - (t / trailLength));
 if (darkMode) {
 const green = Math.floor(200 - (t / trailLength) * 100);
 color = `rgba(74, ${green}, 109, ${alpha * 0.5})`;
 } else {
 const brightness = Math.floor(128 - (t / trailLength) * 95);
 color = `rgba(33, ${brightness}, 141, ${alpha * 0.4})`;
 }
 }
 
 ctx.fillStyle = color;
 ctx.fillText(char, x, trailY);
 }
 }
 
 // 更新位置
 drops[i] += speeds[i];
 
 // 重置
 if (drops[i] * fontSize > height * 0.4 && Math.random() > 0.975) {
 drops[i] = -trails[i];
 speeds[i] = 0.15 + Math.random() * 0.15;
 trails[i] = 10 + Math.floor(Math.random() * 15);
 
 // 重置時更新整個字符數組
 matrixTrails[i] = [];
 for (let k = 0; k < 30; k++) {
 matrixTrails[i][k] = matrixChars[Math.floor(Math.random() * matrixChars.length)];
 }
 }
 }
}

// 繪製 3D 網格
function drawGrid() {
 const darkMode = isDarkMode();
 const gridSize = 40;
 const rows = 20;
 const cols = Math.ceil(width / gridSize) + 10;
 const centerX = width / 2;
 const centerY = height / 2;
 
 // 根據主題調整顏色
 const colors = darkMode ? [
 'rgba(74, 155, 109, 0.2)',
 'rgba(95, 211, 160, 0.2)',
 'rgba(60, 179, 113, 0.25)',
 'rgba(64, 224, 208, 0.2)',
 'rgba(72, 160, 200, 0.25)'
 ] : [
 'rgba(33, 128, 141, 0.15)',
 'rgba(26, 104, 115, 0.15)',
 'rgba(29, 116, 128, 0.2)',
 'rgba(45, 166, 178, 0.15)',
 'rgba(41, 150, 161, 0.2)'
 ];
 
 // 繪製橫向網格線
 for (let i = 0; i < rows; i++) {
 ctx.beginPath();
 
 for (let j = 0; j < cols; j++) {
 const x = (j - cols / 2) * gridSize;
 const z = (i - rows / 2) * gridSize;
 
 const distance = Math.sqrt(x * x + z * z);
 const wave = Math.sin(distance * 0.01 - time * 1.5) * 25 + 
 Math.sin(z * 0.02 + time * 0.6) * 15 +
 Math.cos(x * 0.015 - time * 0.4) * 10;
 
 const mouseDistX = (mouseX - centerX) * 0.1;
 const mouseDistY = (mouseY - centerY) * 0.1;
 
 const perspective = 600;
 const scale = perspective / (perspective + z + wave);
 const projX = centerX + x * scale + mouseDistX * scale;
 const projY = centerY + (wave - z * 0.5) * scale + mouseDistY * scale;
 
 if (j === 0) {
 ctx.moveTo(projX, projY);
 } else {
 ctx.lineTo(projX, projY);
 }
 }
 
 const gradient = ctx.createLinearGradient(0, 0, width, height);
 const colorIndex = Math.floor((time * 10 + i * 5) % 5);
 gradient.addColorStop(0, colors[colorIndex]);
 gradient.addColorStop(1, colors[(colorIndex + 1) % 5]);
 
 ctx.strokeStyle = gradient;
 ctx.lineWidth = 1.5;
 ctx.stroke();
 }
 
 // 繪製縱向網格線
 for (let j = 0; j < cols; j++) {
 ctx.beginPath();
 
 for (let i = 0; i < rows; i++) {
 const x = (j - cols / 2) * gridSize;
 const z = (i - rows / 2) * gridSize;
 
 const distance = Math.sqrt(x * x + z * z);
 const wave = Math.sin(distance * 0.01 - time * 1.5) * 25 + 
 Math.sin(z * 0.02 + time * 0.6) * 15 +
 Math.cos(x * 0.015 - time * 0.4) * 10;
 
 const mouseDistX = (mouseX - centerX) * 0.1;
 const mouseDistY = (mouseY - centerY) * 0.1;
 
 const perspective = 600;
 const scale = perspective / (perspective + z + wave);
 const projX = centerX + x * scale + mouseDistX * scale;
 const projY = centerY + (wave - z * 0.5) * scale + mouseDistY * scale;
 
 if (i === 0) {
 ctx.moveTo(projX, projY);
 } else {
 ctx.lineTo(projX, projY);
 }
 }
 
 const gradient = ctx.createLinearGradient(0, 0, width, height);
 const colorIndex = Math.floor((time * 10 + j * 5) % 5);
 gradient.addColorStop(0, colors[colorIndex]);
 gradient.addColorStop(1, colors[(colorIndex + 1) % 5]);
 
 ctx.strokeStyle = gradient;
 ctx.lineWidth = 1.5;
 ctx.stroke();
 }
}

function animate() {
 time += 0.016;
 
 const darkMode = isDarkMode();
 const bgColor = darkMode ? 'rgba(10, 10, 10, 1)' : 'rgba(252, 252, 249, 1)';
 
 ctx.fillStyle = bgColor;
 ctx.fillRect(0, 0, width, height);
 
 drawGrid();
 drawMatrix();
 
 requestAnimationFrame(animate);
}

animate();

創建 Partial 模板
#

在/layouts/partials路徑下創建3d-grid-n-digi-rain-bg.html模板並編輯：

<canvas id="3d-grid-n-digi-rain-bg"></canvas> <!-- 創建畫布元素 -->
{{ $js := resources.Get "js/3d-grid-n-digi-rain-bg.js" | resources.Minify | resources.Fingerprint (site.Params.fingerprintAlgorithm | default "sha512") }}
{{ if $js }}<script src="{{ $js.RelPermalink }}" integrity="{{ $js.Data.Integrity }}"></script>{{ end }} <!-- 載入 JavaScript --> 

設定網站全局參數配置文件 params.toml
#

編輯/config/_default/params.toml並在文件中加入：

# 動畫背景（可選，不設或設為空則不顯示）
[animationBackground]
 # 是否啟用動畫背景（可選，預設 false；完全不顯示）
 enabled = false
 # 要載入的 partial 名稱（不含 .html），例如 "3d-grid-n-digi-rain-bg"，檔案必須放在`layouts/partials/`下
 partial = "3d-grid-n-digi-rain-bg"
 # 顯示頁面："all" 每頁都顯示｜"home" 僅首頁｜"sections" 僅在下方 sections 列出的區塊顯示
 show = "all"
 # 僅當 show = "sections" 時有效。列出要顯示背景的 section 目錄名稱，例如 ["posts", "series"]
 sections = ["posts", "series"]
 # 透明度 0.0～1.0（可選，預設 1）
 opacity = 0.85
 # 是否在閱讀模式（非首頁）使用較低的背景透明度（可選，預設 true）
 readingModeOpacityEnabled = true
 # 閱讀模式時的背景透明度 0.0～1.0（僅在 readingModeOpacityEnabled = true 時有效，預設 0.35）
 readingModeOpacity = 0.35

上面的設定能讓你選擇是否使用動畫背景，也能套用你自己製作的其他動畫背景模板，只要注意存放路徑是否正確即可。

你還能選擇哪些頁面要使用動畫背景，並調整透明度。

最後，有些動畫背景可能會影響閱讀，就像本文的 3D 網格加代碼瀑布風格動畫背景，所以我還增加了「閱讀模式」，可以選擇是否開啟，並設定在非主頁（文章頁面等）的透明度。

套用 Partial 模板
#

找到網站主模板檔案並編輯，通常是/layouts/_default/baseof.html。像我使用 Blowfish 主題，就將/themes/blowfish/layouts/_default下的baseof.html複製到/layouts/_default並編輯。

套用到所有頁面
#

如果要套用此動畫背景到所有頁面，在baseof.html中的<body>標籤後加入：

<!doctype html>
<html lang="zh-TW">
<head>
 <!-- 原始 head 內容 ... -->
</head>
<body>
 <!-- 加入這段 -->
 {{ if and $bg (ne $bg.enabled false) $bg.partial }}
 {{ $show := $bg.show | default "all" }}
 {{ $showBg := false }}
 {{ if eq $show "all" }}{{ $showBg = true }}
 {{ else if eq $show "home" }}{{ $showBg = .IsHome }}
 {{ else if eq $show "sections" }}{{ $showBg = in ($bg.sections | default slice) .Section }}{{ end }}
 {{ if $showBg }}
 {{ partial $bg.partial (dict "Page" . "Opacity" ($bg.opacity | default 1)) }}
 {{ end }}
 {{ end }}
 <!-- 原始 body 內容 -->
</body>
</html>

關於我

contact@yozlog.com (YoZ 柚子) — Sun, 02 Nov 2025 00:00:00 +0000

關於我
#

出生於 2001 年，在韓國留學就讀音樂系中。

是個追求「數位主權」與「開源精神」資訊宅，用英文社群的說法就是FOSS Nerd，但其實從 2022 年才真正開始進入這個世界（此網站創建於2025 年 11 月）。

從小媽媽極反對我接觸電子產品，只有書本伴我長大，第一支智慧型手機是 15 歲拿到的 ASUS ZenFone 5。

2021 年初到韓國沒有朋友，每天都是家和練習室兩點一線的生活，這時才組了台像樣的電腦，在家就瘋狂玩遊戲，把童年錯過的彌補回來，那時甚至要看著鍵盤打字，知道的快捷鍵只有 ctrl + c 和 ctrl + v。

2022年儲存音樂製作素材與作品的隨身硬碟無預警秀抖，雖然救回來了但差點漏尿，於是入手了第一台 Synology NAS 做雲端備份順便研究起了自架服務。同年以太幣熱錢包被盜，開始意識到資安問題，進而接觸到 Brave 瀏覽器，了解到網路世界中關於個資的各類議題與開源的概念，其中有一大部分是受到「Wiwi 官大為」的影響，學音樂的人應該都不陌生，他就是「NiceChord好和弦」。

自此之後花了無數日夜研究，便成了不務音樂正業的資訊宅。

其他網站
#

關於「身為鼓手」的我以及我的各類種種，可瀏覽我的主網站「YoZ Music 鼓手柚子」以及生活向部落格「YoZ Blog」。

關於網站名
#

身為資訊宅肯定不能沒看過美劇「駭客軍團」，這部劇的集數標題很有趣，舉第一季來說，共有 10 集，各集標題如下：

eps1.0 _hellofriend.mov
eps1.1 ones-and-zerOes.mpeg
eps1.2_d3bug.mkv
eps1.3 _da3m0ns.mp4
eps1.4 _oxploits.wmv
eps1.5_brAve-traveer.asf
eps1.6_v1ew-sOurce.flv
eps1.7 _wh1terOse.m4v
eps 1.8. _m1rrOr1ng.qt
eps1.9 _zero-day.avi

這個部落格就是參考它命名的方式，取名為yoz.log

關於頭貼
#

大三上學期時（2025年初）我同學幫我畫的，手上拿著一雙鼓棒，頭上掛著一支墨鏡，因為我只要出門就算是去學校，頭上都一定要掛墨鏡或是反戴在頭後面（可能一整天都沒戴在眼睛上）。

其實這位同學在2023年我們大一的時候還幫我畫過另外一張，直接上圖

長頭髮、手上抱著燒酒瓶、左手背上的線是我的刺青們，後面那根不知道是什麼。哈哈哈哈…

關於網站 Logo
#

這是我很喜歡的一款開源字體 Intel One Mono，字重是用 Semi-blod 600。我直接在Google Fonts裡面輸入yoz.log後，將預覽畫面截圖保存當作網站 Logo 使用。

Hugo Blowfish 主題｜程式碼區塊樣式與折疊

contact@yozlog.com (YoZ 柚子) — Sat, 01 Nov 2025 00:00:00 +0000

前言
#

這個程式碼區塊是模仿 macOS 的視窗外觀（左上角的紅黃綠三個點），首先我參考了 Blog｜自定義Hugo Blowfish主題這篇文章，該作者是參考另一篇文章 Hugo Stack 主题装修笔记 Part 3去修改，而這篇的作者則是從 hugo stack 主题美化這篇文章發現的，原始的代碼來自於linsnow.cn的 Stack主题的自定义（但這篇文章似乎進不去了），總之在文章開始前先感謝這4位作者的分享，讀者可以先去閱讀這幾篇文章。

我在上述的基礎上做了一點小更改，具體的外觀請見本文中的程式碼區塊，另外我在某個部落格看到折疊的樣式，忘記是哪個主題了，它預設只顯示上半部的內容，高度若是超過則需要點擊展開，我蠻喜歡的，於是請 Perplexity 幫我重現了這個樣式。

macOS 視窗樣式
#

編輯/assets/css路徑下的custom.css，添加：

/* 程式碼區塊容器樣式 */
.highlight {
 max-width: 100%;
 position: relative;
 border-radius: 10px;
 margin-left: -5px;
 margin-right: -10px;
 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
 overflow: hidden;
}

/* 添加 macOS 風格的標題欄 */
.highlight::before {
 content: '';
 height: 30px;
 width: 100%;
 background-color: rgba(var(--color-neutral-50));
 display: block;
 position: relative;
}
 
/* 深色模式下的标题栏样式 */
.dark .highlight::before {
 background-color: rgba(var(--color-neutral-700));
}
/* 添加控制按钮 */
.highlight::after {
 content: '';
 position: absolute;
 top: 9px;
 left: 13px;
 width: 12px;
 height: 12px;
 border-radius: 50%;
 background-color: #ff5f56;
 box-shadow: 20px 0 0 #ffbd2e, 40px 0 0 #27c93f;
 z-index: 1;
}
 
/* 程式碼内容區塊樣式 */
.highlight pre {
 margin: 0;
 padding: 1.5rem;
 width: auto;
}
.prose .chroma {
 border-radius: 0;
}

折疊功能
#

這邊提供兩個樣式，如果你不使用上面的 macOS 樣式的話，直接使用第一種，如果你也使用我上面提供的 macOS 視窗樣式，請使用第二種

不使用 macOS 視窗樣式時
#

編輯 custom.css
#

編輯/assets/css下的custom.css：

/* 程式碼區塊容器 */
.highlight {
 position: relative;
 margin: 1.5rem 0;
}

/* 折疊狀態 */
.highlight.collapsible {
 max-height: 400px;
 overflow: hidden;
 transition: max-height 0.3s ease;
}

/* 展開狀態 */
.highlight.expanded {
 max-height: none;
}

/* 漸層遮罩 */
.highlight.collapsible::after {
 content: "";
 position: absolute;
 bottom: 0;
 left: 0;
 right: 0;
 height: 80px;
 background: linear-gradient(to bottom, transparent, var(--color-background));
 pointer-events: none;
}

.highlight.expanded::after {
 display: none;
}

/* 展開按鈕 */
.code-expand-btn {
 display: block;
 width: 100%;
 padding: 0.5rem;
 margin-top: 0.5rem;
 background: var(--color-secondary);
 border: 1px solid var(--color-border);
 border-radius: var(--radius-base);
 cursor: pointer;
 font-size: 0.875rem;
 text-align: center;
 transition: background 0.2s;
}

.code-expand-btn:hover {
 background: var(--color-secondary-hover);
}

新增 collapsible-code.js
#

在/assets/js下創建collapsible-code.js

document.addEventListener('DOMContentLoaded', function() {
 const codeBlocks = document.querySelectorAll('.highlight');
 
 codeBlocks.forEach(function(block) {
 // 檢查高度是否超過 400px
 if (block.scrollHeight > 400) {
 // 加上折疊樣式
 block.classList.add('collapsible');
 
 // 創建展開按鈕
 const btn = document.createElement('button');
 btn.className = 'code-expand-btn';
 btn.innerHTML = '<span class="expand-text">展開完整程式碼 ▼</span><span class="collapse-text" style="display:none;">折疊程式碼 ▲</span>';
 
 // 插入按鈕到程式碼區塊後面
 block.parentNode.insertBefore(btn, block.nextSibling);
 
 // 按鈕點擊事件
 btn.addEventListener('click', function() {
 const expandText = btn.querySelector('.expand-text');
 const collapseText = btn.querySelector('.collapse-text');
 
 if (block.classList.contains('collapsible')) {
 block.classList.remove('collapsible');
 block.classList.add('expanded');
 expandText.style.display = 'none';
 collapseText.style.display = 'inline';
 } else {
 block.classList.remove('expanded');
 block.classList.add('collapsible');
 expandText.style.display = 'inline';
 collapseText.style.display = 'none';
 block.scrollIntoView({ behavior: 'smooth', block: 'start' });
 }
 });
 }
 });
});

使用 macOS 視窗樣式時
#

編輯 custom.css
#

先將創建 macOS 視窗樣式時新增的 CSS 樣式刪除，在這邊會合併。
編輯/assets/css下的custom.css：

/* 程式碼區塊容器樣式 */
.highlight {
 max-width: 100%;
 position: relative;
 border-radius: 10px;
 margin-left: -5px;
 margin-right: -10px;
 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
 overflow: hidden;
}

/* 添加 macOS 風格標題欄 */
.highlight::before {
 content: '';
 height: 30px;
 width: 100%;
 background-color: rgba(var(--color-neutral-50));
 display: block;
 position: relative;
}

/* 深色模式下的標題欄樣式 */
.dark .highlight::before {
 background-color: rgba(var(--color-neutral-700));
}

/* 添加控制按钮 */
.highlight::after {
 content: '';
 position: absolute;
 top: 9px;
 left: 13px;
 width: 12px;
 height: 12px;
 border-radius: 50%;
 background-color: #ff5f56;
 box-shadow: 20px 0 0 #ffbd2e, 40px 0 0 #27c93f;
 z-index: 1;
}

/* 程式碼區塊內容區域樣式 */
.highlight pre {
 margin: 0;
 padding: 1.5rem;
 width: auto;
}

.prose .chroma {
 border-radius: 0;
}

/* ===== 折疊功能樣式 ===== */

/* 折疊狀態 */
.highlight.collapsible {
 max-height: 430px; /* 400px 內容 + 30px 標題欄 */
 overflow: hidden;
 transition: max-height 0.3s ease;
}

/* 展開狀態 */
.highlight.expanded {
 max-height: none;
}

/* 漸層遮罩 - 使用獨立元素而非偽元素 */
.code-gradient {
 position: absolute;
 bottom: 0;
 left: 0;
 right: 0;
 height: 80px;
 background: linear-gradient(to bottom, transparent, var(--color-background));
 pointer-events: none;
 z-index: 2;
}

/* 深色模式的漸層 */
.dark .code-gradient {
 background: linear-gradient(to bottom, transparent, var(--color-charcoal-800));
}

/* 展開按鈕 */
.code-expand-btn {
 display: block;
 width: 100%;
 padding: 0.5rem;
 margin-top: 0.5rem;
 background: var(--color-secondary);
 border: 1px solid var(--color-border);
 border-radius: var(--radius-base);
 cursor: pointer;
 font-size: 0.875rem;
 text-align: center;
 transition: background 0.2s;
}

.code-expand-btn:hover {
 background: var(--color-secondary-hover);
}

新增 collapsible-code.js
#

在/assets/js下創建collapsible-code.js

document.addEventListener('DOMContentLoaded', function() {
 const codeBlocks = document.querySelectorAll('.highlight');
 
 codeBlocks.forEach(function(block) {
 // 檢查高度是否超過 400px (不含標題欄的30px)
 const contentHeight = block.scrollHeight - 30;
 
 if (contentHeight > 400) {
 // 加上折疊樣式
 block.classList.add('collapsible');
 
 // 創建漸層遮罩
 const gradient = document.createElement('div');
 gradient.className = 'code-gradient';
 block.appendChild(gradient);
 
 // 創建展開按鈕
 const btn = document.createElement('button');
 btn.className = 'code-expand-btn';
 btn.innerHTML = '<span class="expand-text">Expand Code ▼</span><span class="collapse-text" style="display:none;">Collapse Code ▲</span>';
 
 // 插入按鈕到程式碼區塊後面
 block.parentNode.insertBefore(btn, block.nextSibling);
 
 // 按鈕點擊事件
 btn.addEventListener('click', function() {
 const expandText = btn.querySelector('.expand-text');
 const collapseText = btn.querySelector('.collapse-text');
 
 if (block.classList.contains('collapsible')) {
 block.classList.remove('collapsible');
 block.classList.add('expanded');
 gradient.style.display = 'none';
 expandText.style.display = 'none';
 collapseText.style.display = 'inline';
 } else {
 block.classList.remove('expanded');
 block.classList.add('collapsible');
 gradient.style.display = 'block';
 expandText.style.display = 'inline';
 collapseText.style.display = 'none';
 block.scrollIntoView({ behavior: 'smooth', block: 'start' });
 }
 });
 }
 });
});

引入 JavaScript
#

複製/themes/blowfish/layouts/_default/single.html到/layouts/_default/single.html並編輯，找到下面這段：

{{/* Body */}}
<section class="flex flex-col max-w-full mt-0 prose dark:prose-invert lg:flex-row">
 <!-- 內容省略 -->
</section>

並在</section>下面一行插入：

{{ $collapsibleCode := resources.Get "js/collapsible-code.js" }}
{{ $collapsibleCode = $collapsibleCode | resources.Minify | resources.Fingerprint (site.Params.fingerprintAlgorithm | default "sha512") }}
<script
 type="text/javascript"
 src="{{ $collapsibleCode.RelPermalink }}"
 integrity="{{ $collapsibleCode.Data.Integrity }}"></script>

如後續更新 Blowfish 主題版本，若發現文章頁面版型出現問題，請複製新的single.html，並重新編輯。

折疊按鈕多語言設定
#

如果網站有多語言設定，要將展開（折疊）按鈕顯示為不同語言，可按照下方步驟更改。

編輯 JavaScript
#

更改collapsible-code.js為：

document.addEventListener('DOMContentLoaded', function() {
 const codeBlocks = document.querySelectorAll('.highlight');
 
 // 從 HTML 讀取翻譯文字，預設為英文
 const expandText = document.documentElement.dataset.expandText || 'Expand Code ▼';
 const collapseText = document.documentElement.dataset.collapseText || 'Collapse Code ▲';
 
 codeBlocks.forEach(function(block) {
 const contentHeight = block.scrollHeight - 30;
 
 if (contentHeight > 400) {
 block.classList.add('collapsible');
 
 const gradient = document.createElement('div');
 gradient.className = 'code-gradient';
 block.appendChild(gradient);
 
 const btn = document.createElement('button');
 btn.className = 'code-expand-btn';
 btn.innerHTML = '<span class="expand-text">' + expandText + '</span><span class="collapse-text" style="display:none;">' + collapseText + '</span>';
 
 block.parentNode.insertBefore(btn, block.nextSibling);
 
 btn.addEventListener('click', function() {
 const expandSpan = btn.querySelector('.expand-text');
 const collapseSpan = btn.querySelector('.collapse-text');
 
 if (block.classList.contains('collapsible')) {
 block.classList.remove('collapsible');
 block.classList.add('expanded');
 gradient.style.display = 'none';
 expandSpan.style.display = 'none';
 collapseSpan.style.display = 'inline';
 } else {
 block.classList.remove('expanded');
 block.classList.add('collapsible');
 gradient.style.display = 'block';
 expandSpan.style.display = 'inline';
 collapseSpan.style.display = 'none';
 block.scrollIntoView({ behavior: 'smooth', block: 'start' });
 }
 });
 }
 });
});

引入 JavaScript
#

一樣編輯single.html，在剛剛加入：

{{ $collapsibleCode := resources.Get "js/collapsible-code.js" }}
{{ $collapsibleCode = $collapsibleCode | resources.Minify | resources.Fingerprint (site.Params.fingerprintAlgorithm | default "sha512") }}
<script
 type="text/javascript"
 src="{{ $collapsibleCode.RelPermalink }}"
 integrity="{{ $collapsibleCode.Data.Integrity }}"></script>

的上面一行加入：

<script>
 document.documentElement.dataset.expandText = "{{ i18n "shortcode.collapsible-code.expand" }}";
 document.documentElement.dataset.collapseText = "{{ i18n "shortcode.collapsible-code.collapse" }}";
</script>

編輯 i18n 設定檔
#

這邊以繁中為例，我的檔名為zh-TW.yaml。
在檔案中找到加入：

shortcode:
 collapsible-code:
 expand: "展開完整程式碼 ▼"
 collapse: "折疊程式碼 ▲"

按照上方的步驟編輯後，你就可以得到「macOS 視窗樣式」並且「限制高度、可折疊」的程式碼區塊。

Hugo Blowfish主題｜添加連結圖標

contact@yozlog.com (YoZ 柚子) — Fri, 31 Oct 2025 00:00:00 +0000

前言
#

首先我參考了 Blog｜自定義Hugo Blowfish主題這篇文章，而該作者是參考另一篇文章 Hugo Stack主题装修笔记去修改，在文章開始前先感謝這兩位作者的分享。

我在上述的基礎上做了一點小更改，礙於 Markdown 格式本身的限制，我也新增了一個shortcode可以直接使用 HTML 的元素及屬性。

場景說明
#

我有些文章篇幅較長，為了不重複提到同樣的內容，會使用錨點方便讀者快轉到對應的段落。

舉「我個人的軟體工具及服務推薦大全」這篇文章來說：

我先用表格簡短介紹了多個軟體，更詳細的介紹在下面的段落才會提到。

一般來說，我先在表格中使用 Markdown 連結語法[該軟體名稱](#ID)，接著在下方要詳細介紹該軟體時，先在該段落標題使用 HTML 錨點元素<a id"前面提到的ID" href="該軟體的外部連結（官網、Github或下載連結） title="滑鼠懸停時顯示的提示">該軟體名稱</a>。

這樣點擊表格中的連結就會跳轉到下方段落，讓讀者可先閱讀介紹，如果有興趣的話再點擊該段落標題就會跳到外部網站。

代碼更改
#

修改 Markdown 連結渲染模板
#

但是原先上述兩篇的作者是修改render-link.html檔案，它只對 Markdown 語法有效，且如是網站內部連結就不會顯示圖示，也就是說雖然我在表格中使用的[該軟體名稱](#ID)是 Markdown 語法，但它是指向網站內部連結，因此使用了也不會看到任何變化。

所以我修改了上述作者們提供的代碼，首先是/layouts/_default/_markup/路徑下的render-link.html。
原版可參考 Blog｜自定義Hugo Blowfish主題，作者加上了圖標並且設定了鼠標懸停變色的樣式。

而我將它修改成「先判別連結為外部還是內部連結」，如果是外部連結就套用跟原作者一樣的樣式，如果是內部連結就套用另外一個圖標。

{{- $isExternal := or (strings.HasPrefix .Destination "http://") (strings.HasPrefix .Destination "https://") -}}

<a class="{{- if $isExternal }}external-link{{- else }}internal-link{{- end }}" href="{{ .Destination | safeURL }}"
 {{- with .Title }} title="{{ . }}"{{- end }}
 {{- if $isExternal }} target="_blank" rel="noopener"{{ end }}>
 {{- .Text | safeHTML }}
 {{- if $isExternal }}
 <span class="external-icon">
 <svg class="external-icon-svg" viewBox="0 0 21 21" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
 <path d="m13 3l3.293 3.293l-7 7l1.414 1.414l7-7L21 11V3z"/>
 <path d="M19 19H5V5h7l-2-2H5c-1.103 0-2 .897-2 2v14c0 1.103.897 2 2 2h14c1.103 0 2-.897 2-2v-5l-2-2v7z"/>
 </svg>
 </span>
 {{- else }}
 <span class="internal-icon">
 <svg class="internal-icon-svg" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
 <path d="M5 15H4L0 11L4 7H5V10H11C12.6569 10 14 8.65685 14 7C14 5.34315 12.6569 4 11 4H4V2H11C13.7614 2 16 4.23858 16 7C16 9.76142 13.7614 12 11 12H5V15Z"/>
 </svg>
 </span>
 {{- end }}
</a>

修改 CSS
#

接著再到/assets/css/路徑下修改custom.css。

原先只有指定外部連結的樣式，我複製了相同的樣式，只是把external-link替換為internal-link。

/* 修改 外部連結及 icon 相關顏色 */
/* 外部連結整體樣式 */
.external-link {
 text-decoration: none;
 }
 .external-link:hover {
 color: rgb(var(--color-neutral-300));/* 淺色模式 */
 }
 html.dark .external-link:hover {
 color: rgb(var(--color-neutral-200));/* 深色模式 */
 }

 /* 外部連結圖標本體對齊 + 間距 */
 .external-icon {
 display: inline-block;
 margin-left: -0.08em; /* 控制圖標和外部連結的間距 */
 line-height: 1;
 }

 /* SVG 大小和顏色自動適配文字 */
 .external-icon-svg {
 width: 0.8em;
 height: 0.8em;
 fill: currentColor;
 transition: fill 0.2s ease;
 } 

/* 修改 內部連結及 icon 相關顏色 */
/* 內部連結整體樣式 */
.internal-link {
 text-decoration: none;
 }
 .internal-link:hover {
 color: rgb(var(--color-neutral-300));/* 淺色模式 */
 }
 html.dark .internal-link:hover {
 color: rgb(var(--color-neutral-200));/* 深色模式 */
 }

 /* 內部連結圖標本體對齊 + 間距 */
 .internal-icon {
 display: inline-block;
 margin-left: -0.08em; /* 控制圖標和外部連結的間距 */
 line-height: 1;
 }

 /* SVG 大小和顏色自動適配文字 */
 .internal-icon-svg {
 width: 0.8em;
 height: 0.8em;
 fill: currentColor;
 transition: fill 0.2s ease;
 } 

結果看起來會像是這樣：

使用站內連結[YoZ Music 鼓手柚子](/)：YoZ Music 鼓手柚子
使用站外連結[YoZ Music 鼓手柚子](https://www.yozmusic.com/)：YoZ Music 鼓手柚子

新增 Shortcode
#

但是上面修改完 Markdown 連結渲染模板與 CSS 後，也只是讓內部連結也能顯示圖標。詳細說明段落使用的 HTML 錨點元素即便指向外部連結也不會顯示圖標。

因此我在/layouts/shortcodes下新增了link.html，樣式都跟上述一模一樣，只是可以使用 HTML 錨點元素，並且添加屬性id、href及title。

模板代碼
#

{{- $href := .Get "href" -}}
{{- $title := .Get "title" -}}
{{- $id := .Get "id" -}}
{{- $text := .Inner -}}
{{- $isExternal := or (strings.HasPrefix $href "http://") (strings.HasPrefix $href "https://") -}}

<a class="{{- if $isExternal }}external-link{{- else }}internal-link{{- end }}" href="{{ $href | safeURL }}"
 {{- with $id }} id="{{ . }}"{{- end }}
 {{- with $title }} title="{{ . }}"{{- end }}
 {{- if $isExternal }} target="_blank" rel="noopener"{{ end }}>
 {{- $text | safeHTML }}
 {{- if $isExternal }}
 <span class="external-icon">
 <svg class="external-icon-svg" viewBox="0 0 21 21" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
 <path d="m13 3l3.293 3.293l-7 7l1.414 1.414l7-7L21 11V3z"/>
 <path d="M19 19H5V5h7l-2-2H5c-1.103 0-2 .897-2 2v14c0 1.103.897 2 2 2h14c1.103 0 2-.897 2-2v-5l-2-2v7z"/>
 </svg>
 </span>
 {{- else }}
 <span class="internal-icon">
 <svg class="internal-icon-svg" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
 <path d="M5 15H4L0 11L4 7H5V10H11C12.6569 10 14 8.65685 14 7C14 5.34315 12.6569 4 11 4H4V2H11C13.7614 2 16 4.23858 16 7C16 9.76142 13.7614 12 11 12H5V15Z"/>
 </svg>
 </span>
 {{- end }}
</a>

使用方法
#

{{< link id="自訂" href="連結" >}}顯示文字{{< /link >}}

如此一來如果是要新增 ID 元素的場景便能使用此 shortcode 顯示連結圖標。

我訂閱的服務

contact@yozlog.com (YoZ 柚子) — Sat, 11 Oct 2025 00:00:00 +0000

Setapp
#

以訂閱的方式使用需要付費購買 Mac 軟體，目前使用學生年費方案中，畢業後應該不會再訂了，要不就是不用 Mac；要不就是全部換成自由開源替代方案。

Spotify
#

Premium 方案，當房長定期收錢。

其他主流音樂串流服務我都用過，但還是最喜歡它的推薦演算法，是我挖掘新音樂的主要管道。

Netflix
#

高級方案（年費），當房長定期收錢。

Disney+
#

Premium 方案，當房長定期收錢。

2020年來韓國之後想追漫威的劇開始訂閱的，結果到現在還沒看完…
但我爸媽常常在看，就繼續訂下去了。

Splice
#

訂閱制的音樂製作服務平台，主要服務是提供很多 Sample。很好用、好東西很多！

但是…
就是流氓啊！！
是流氓啊！！
是流氓啊！！

在該平台上下載 Sample 要支付點數，根據訂閱方案不同每個月給的點數不一。以我目前訂閱的 Creator 方案一個月給 200 點，基本上用不完啦。

但你也不用想說訂閱一個月然後取消，等到點數用完再重新訂閱。因為你要持續訂閱點數才會被保留，我遲早會把它取消掉的…

Perplexity
#

NVIDIA（輝達）CEO 黃仁勳說他每天都會用的工具，即時搜尋的功能很強，核心是研究與探索，資料的準確性很高。

我使用了免費版有一段時間了，其實很滿意。 2025 年中時，使用韓國的支付系統消費滿額，獲得一年原價 6000 多台幣的 Pro 方案使用資格。
不知道到期後會不會繼續訂，真的很好用啊!

iCloud+
#

一路從每月 30 台幣 50 GB、90 台幣 200 GB 到訂閱到現在 300台幣 2 TB。目前主要備份我一家三口的蘋果裝置。除了雲端硬碟容量外還有其他專屬功能，不過就像我在「我個人的軟體工具及服務推薦大全」提到的，幾乎都被我使用的其他服務取代掉了。
例如雲端硬碟功能我已將主力轉移到自架的 Nextcloud。

Proton
#

Proton 是主打保護隱私、所有服務端到端加密、總部位在瑞士的科技公司，最有名的服務就是 Proton Mail。

因為我要使用自有域名的電子郵件所以有付費訂閱，因此還可以使用他們旗下的其他服務。
其中有：Calendar（日曆）、Drive（雲端硬碟）、VPN、Pass（密碼管理器）、Docs（在線文檔編輯）、 Wallet（自託管比特幣錢包）、Lumo Al（跟旗下服務整合的 AI 助手聊天機器人）、電子郵件別名服務 Simple Login即尚未推出的Meet（線上會議）。

他們還提供免費服務 Authenticator（二步驗證器）。

但我只有只用少數幾個功能，可參考「我個人的軟體工具及服務推薦大全」。

如果你是 Google 或是任何商業雲端服務用戶，且暫不考慮自架開源替代方案，強烈推薦你評估是否真的有需要用到該商業服務生態所提供的所有服務，若不需要的話可考慮轉移到 Proton 生態！

Nintendo Switch Online
#

我玩的 Switch 遊戲通常都要聯網。

訂閱家庭方案，當房長負責定期收錢。

PlayStation Network
#

訂了又退，退了又訂。
訂的期間還可以領當月免費遊戲來玩。

主要會需要的遊戲就是魔物獵人和最後生還者一代的線上模式。

Pokémon Home
#

我需要很多箱子放我在各個世代嘔心瀝血養的寶可夢們。

CloudFlare
#

CDN 與網站安全服務供應商，我都用它註冊和續訂網域，順便使用他們提供的網路安全服務。

已取消
#

Cloudways

我原先使用的雲端主機代管平台，架部落格用的，已轉移到自己的實體機上了。

軟體使用原則及我使用的硬體裝置

contact@yozlog.com (YoZ 柚子) — Wed, 08 Oct 2025 00:08:00 +0800

前言
#

一陣子前看到好和弦在他的個人部落格分享了「📌 我目前用什麼（軟體及服務篇）」
再加上身邊有朋友對自由開源軟體有興趣，因此決定也寫一系列的文章分享我平常使用的軟硬體及服務，順便幫我朋友科普一下。

這篇是這系列的第一篇文章，以下會分享我的「軟體使用原則」、「使用的裝置與作業系統」並說明「使用原因」。

軟體使用原則
#

優先使用開源、自由的軟體工具，盡量避免依賴第三方的軟體工具及服務供應商。
如果服務可自架也優先選擇架設在私人伺服器上，集中管理供多台裝置存取使用。
當使用第三方服務或應用時，如果有 PWA 可選擇且堪用的話就不下載原生應用程式。
使用第三方服務或應用時僅允許必要的資料收集，不允許任何額外選項供第三方「分析」與「改進服務」（他們是這樣說的，但真的嗎？）

話說如此，但我還是差許多推廣開源自由軟體的大佬們一大截，像是我日常生活還是會蘋果的裝置，包括手機、平板及筆電，以及 Windows 系統的桌上型電腦。

以下我列出我使用的裝置與作業系統，並簡短說明我使用它們的原因。

裝置與作業系統
#

裝置	硬體	系統
桌上型電腦PC	自組	Windows 10
筆電	MacBook Pro M1	macOS
	Lenavo X220T	Coreboot + Linux 發行版
行動裝置	iPhone 12	iOS
	iPad Pro 2018	iPadOS
Home Server 伺服器	自組機架式	Proxmox Virtual Environment（簡稱 PVE）
NAS（網路附接儲存）	PVE 的虛擬機	TrueNAS Scale
	Synology DS216+II	Synology DSM
路由器（軟路由）	PVE 的虛擬機	OPNsense

我的終極目標是能徹底擺脫 Windows 及蘋果的作業系統及裝置，完全使用自由開源的操作系統。
但目前革命尚未成功仍需努力，以下說明我使用各系統的原因。

為何使用Windows系統的桌上型電腦
#

愛玩「遊戲」以及需要「做音樂」，其他時候已經很少使用了。

沒完全將做音樂的主力轉移到 Mac 是因為自組 Window 電腦與同規格的 Mac 相比「價格」較低。

為何使用蘋果裝置
#

從高二開始使用 iPhone 6 到後來 iPhone XR 再到目前的 iPhone 12，過程中又購買了 iPad Pro 及 Macbook Pro，蘋果系統已經成為我最熟悉的設備，且不得不說他們對設備生態的整合確實做得不錯，可以無腦使用。

其實我一直想放棄蘋果的行動裝置，改用 Google Pixel 及 Pixel Tablet 安裝「去 Google 元件」的開源系統 GrapheneOS。
再加上 iOS 26 讓我徹底對蘋果失望，等到做足功課及準備充足預算再決定下一步。

至於 Mac，在學習了 Linux 系統後，我認為也沒有一定要將它作為主力的必要了，儘管它擁有跟其他同品牌裝置流暢的操作整合，但 Linux 花點時間調教也做得到（雖然不到 100%，但可以說是覆蓋大部分的使用場景了），只不過我目前還在尋找硬體能跟 Macbook Pro 相抗衡的筆記型電腦，Macbook Pro 的電池續航真的不錯啊！聽說 ASUS Zenbook Pro 14 OLED 有得比，雖然很想用看看新出的 Thinkpad，但聽說續航不怎麼樣。

但由於業界現行的生態，我目前必須使用 macOS 系統上專有的數位音訊工作站（DAW）：Logic Pro。

另外還有些功能我目前還沒找到在 Linux 中有相匹敵的替代方案，像是剪貼簿與專注模式的即時同步，通話方面像是 Facetime 於不同裝置的實時切換，無線耳機方面像是 Airpods 自動偵測當前使用裝置並即時切換連線等等，不過大多無傷大雅。

即便未來不使用蘋果當主力，我應該還是我拿來當備用，畢竟家中長輩皆使用蘋果行動裝置，且學習成本低他們也都習慣了。
使用家庭方案 iCloud 能提供一家三口即時資料備份及檔案共享、內建密碼App共享讓我能為長輩設定及管理個網站高強度密碼；
實用工具如「尋找」定位功能、Apple Watch 結合健康 App 讓我能夠追蹤長輩健康狀態。

且在我周邊使用蘋果裝置的人也佔了一大部分，蘋果裝置除了個人裝置的生態整合，不同使用者裝置之間的資訊交換也非常方便。
如訊息 App 的 iMessage 以及其與蘋果生態內 App 的整合、Airdrop 等等。

即便很想逢人就推廣開源系統的美好，但現實就是如此，我無法要求其他人一樣跟我使用開源自由軟體打造自己的工作生態。
當遇到教授要傳教材給我、出去郊遊朋友要傳照片等狀況時，蘋果裝置還是較方便，因此即便不是主力，它應該還會是我的備用。

為何使用 Lenavo Thinkpad X220T
#

關於 Thinkpad 我想我不用說太多了，上網搜尋一下便能知道他的歷史地位。
未來我也會分享一篇我如何得到它及調教的過程。

2011 年發售的 X220 系列不只擁有「打字手感超好的鍵盤」、跟「Linux 的高度相容性」，還可以將原先專有閉源的 BIOS 透過刷成開源韌體 Coreboot 或是 Libreboot。
雖說硬體規格來說已經算是上古時代的產物了，但日常文書使用還是堪用的，可玩性及泛用性相當高。
且後續的新機型鍵盤手感也無法相比，BIOS 也無法用開源韌體取代了。

是個光捧在手上都開心的存在！

為何使用 Proxmox Virtual Environment
#

可參考我架設 home lab 的心得及詳細說明。

簡單來說 PVE 是個專門開虛擬機的 Linux 發行版，我使用它創建幾個虛擬機，像是 OPNsense、TrueNAS、專門架設 Docker 容器的虛擬機、運行資料庫的虛擬機等等。

其中 OPNsense 作為軟體路由器，處理 PVE 本身及其內所有虛擬機以及 home lab 環境中所有設備的網路流量。
NAS 是專門用作資料儲存的伺服器，我使用 TrueNAS 將儲存資料的硬碟直通給它，讓它負責「資料管理」、「備份」及「快照」，再透過 NFS 及 SMB 掛載到其他虛擬機及實體裝置。

為何使用Synology
#

DS216+II 是我第一台 NAS，最初我透過它備份電腦硬碟的資料，也自架了幾個個人雲端服務。
可以說是因為有了它，我才開始研究起了自架服務，接觸到了開源軟體。

但自組 PVE 伺服器後，它已經算是閒置的設備了。
由於它算是比較低階的機型，二手價也不過幾千塊（3000?）左右，所以也不打算賣掉，未來可能有其他需求可能可以派上用場。

局域網域名該使用.local嗎？

contact@yozlog.com (YoZ 柚子) — Sat, 20 Sep 2025 00:00:00 +0000

前言：這算是一篇學習筆記，如有錯誤，請透過郵件聯絡我！
封面圖使用ChatGPT DALL·E 3 模型生成

這幾天我在研究 Qubes OS，這是一個主打隱私隔離的作業系統。
Qubes OS 通過虛擬機（稱為Qube）來隔離不同的操作環境和功能，例如網路和應用操作是分別在不同的Qube中運行。

我這次的使用場景使用到 4 個 Qube，分別是 sys-net、sys-firewall、sys-vpn 及 APP VM

sys-net是負責與真實網路硬體（例如有線或無線網卡）直接互動的VM，也就是最底層接入外部網際網路的部分。它負責管理物理網路流量，並提供給上層VM使用。
在此架構中，Net VM通常是最不信任的環境，因為其直接接觸外部網路，存在攻擊風險。
sys-firewall（防火牆VM）只負責處理網路監控和過濾工作，不執行應用程式，降低攻擊面。
需要為它設置Net VM處理網路流量的進出，在這個場景中是設為 sys-net。
sys-vpn 配置 VPN 服務（像是 WireGuard），負責加密與轉發所有從 APP VM 發出的流量，確保所有網路通訊經過 VPN 隧道。而他的 Net VM 則是設為 sys-firewall。
APP VM（應用虛擬機）是實際執行應用程式的 VM，其 Net VM 設定為前述的 VPN VM，因此所有 APP VM 流量皆會先進入 sys-vpn，再到 sys-firewall，最後通過 sys-net 存取外部網路。

在我的使用場景中，我在 sys-vpn 中使用了 Wireguard 作為 VPN，並指定了我自架的 DNS 伺服器，目的是透過自架的 DNS 解析局域網域名，便於連進我自架的服務。
我原本使用的局域網局域名是以 .local 作為頂級域名。

然而，問題出現了：不管我怎麼設置，甚至 APP VM 的 DNS 請求都引導到 sys-vpn 解析，系統仍然會出現 name resolution 錯誤。
一查之下¹後發現，這問題與 .local 這個頂級域名的特殊用途有關。

.local 是根據網路標準（RFC 6762）保留給多播 DNS（mDNS）使用的本地鏈路名稱空間。
多播 DNS 不同於傳統 DNS，它使用 UDP 5353 多播封包直接在同一局域網路中尋找服務或設備，因此避免了傳統 DNS 伺服器的參與。

白話來說，傳統 DNS 就像你問大樓管理員：「柚子的房間在幾號？」這個管理員知道每個人住哪裡，幫你找房號（IP地址），要去問那個管理員才知道答案。

但是 mDNS 就像你在一個公眾場合，你直接喊「柚子在哪？」，柚子就會自己回答你，大家都能知道他的位置。這樣不用找管理員，也很快能知道答案。

常見使用 mDNS 的裝置例如：

智能家居設備
印表機
局域網內的文件共享或服務自動發現
蘋果（Apple）的產品

但延伸出的問題就是安全性較低，因為 mDNS 的查詢和回應沒有身份驗證和加密，容易被局域網內其他設備截取或攻擊，尤其在公共或不安全的網路環境中風險較高。

而Qubes OS 啟用了 systemd-resolved ，這套服務會監控並攔截對 .local 域的 DNS 查詢，嘗試使用 mDNS 解析，這也導致 .local 查詢無法正常被轉發給傳統 DNS。這也是為什麼我上面進行了許多嘗試都無法成功。

最後我選擇的解決方法是：不使用 .local 作為局域網的頂級域名。
選擇如 .lan、.home、.private、.corp、.network、.site或.internal 等其他非全球域名系統中使用的私有頂級域名，確保 DNS 會用標準解析方式進行。

儘管還是有保留使用 .local 作為頂級域名的其他方案，但就如同上述所說的，.local 主要用於服務自動發現，這也導致安全性與地址衝突的問題。

於是我又花了將近兩個小時重新整理了 home lab 中所有關於本地域名的設定…
但也好，早發現總比晚發現好。

Why using .local as your domain name extension is a BAD idea! | Veeam Community Resource Hub ↩︎

聯絡方式

contact@yozlog.com (YoZ 柚子) — Tue, 16 Sep 2025 00:00:00 +0000

請優先透過電子郵件 contact@yozlog.com 聯絡我，網頁下方也有「聯絡表單」可以直接填寫。

頁面下方有列出我的所有使用的各個平台連結，但透過它們聯絡的話，有很高機率我會沒看到。

歡迎來信詢問我任何問題、或是跟我分享你的觀點，閒聊也沒關係喔！有時間的話我都會盡快回覆。

打破資訊混亂：只靠RSS整合資訊來源，擺脫社群平台束縛

contact@yozlog.com (YoZ 柚子) — Sun, 16 Mar 2025 00:00:00 +0000

前言
#

不知道你是不是跟我一樣，有許多興趣許多關心的事物，而在這個科技發達、資訊爆炸的 21 世紀 20 年代，你可以從臉書、Instagram、Threads、X（原 Twitter）、Youtube 以及各式各樣的網站上獲得各種資訊。

在這些不同的平台上，肯定也有幾個你特別喜愛的創作者或者專頁。但為了要獲得這些資訊，你每天必須點開一個一個不同的社群軟體以及網站，在這過程中不知不覺的被廣告及社群演算法彈出的內容吸引了注意力。

原本只想點進某個粉專或網站看看有沒有新的文章，卻在這過程中被演算法強行的餵食了原先不打算吸收的資訊。

即便你相當自律，不會掉進演算法的陷阱，但進進出出不同的社群軟體及網站已經無形中浪費了很多時間與精力。
運氣不好的話，如果該專頁當天沒有更新，甚至還會因此撲了一場空。

舉我自己的例子來說，我時常瀏覽的有臉書上有幾個唱片行粉專、將近20幾個西洋的音樂雜誌網站、巴哈姆特電玩瘋（對，我除了音樂就是個不折不扣的宅男）、幾個時尚雜誌網站、財經相關的網站及 Youtube 頻道等等，零零總總加起來幾十個不同來源，根本沒有時間精力每天點開瀏覽。

其中像是臉書及 Youtube 雖然有追蹤訂閱功能，能收到追蹤的專頁及頻道的更新提醒，許多網站也有訂閱電子報的功能。
但即便有更新提醒也依舊要點進各個平台確認，且相信各位也有追蹤及訂閱一些娛樂消磨時間的專頁及頻道，這些都不是每天必要的資訊來源，可能偶爾配飯消磨時間才會瀏覽，其他網站的電子報通常也只有一段時間的摘要且不會即時更新。

總結來說，上述提及的方法對於要更快速且效率地吸收資訊都不是最理想的。

因此這次要跟各位分享能夠解決上述的問題、幫助你省下更多時間、且更有效率接收資訊的方法，就是透過名為「RSS」的技術。

什麼是RSS
#

在繼續介紹下去之前，Wiwi（好和弦）於今年初（2025年）在個人部落格已經分享過了介紹及推廣RSS的文章「你需要用 RSS，不要再拖了」，非常推薦各位移駕閱讀。
以下我將會簡短的介紹及分享個人使用 RSS 的方法，以及引用一些好和弦文章提及的內容補充說明。

RSS 英文全名為 RDF Site Summary（資源描述框架站點摘要），後來的人們將其改為更容易理解的 Really Simple Syndication（簡易資訊聚合）撇除背後的技術不論，因為我也不是很懂，簡單來說就是RSS能夠在不訪問該網站的前提下，幫助使用者快速獲取網站更新的內容。
使用者只需要準備 RSS 閱讀器，貼上網站提供的 RSS Feed（一段網址），便能在閱讀器中瀏覽不同網站的更新內容。

在繼續介紹下去之前，先跟大家分享我的 RSS 閱讀器介面長怎樣。

RSS閱讀器介面

手機版 Fluent Reader Lite 全部文章頁面

手機版 Fluent Reader Lite 訂閱網站頁面

手機版 Fluent Reader Lite 文章瀏覽頁面

也可以像圖中呈現的，在左側點選全部文章，就能一次看到我訂閱的所有網站最近更新了哪些文章。

從左側可以看到，我還將他們分類，光音樂類型的網站就有 20 個，要是沒有使用 RSS 閱讀器，光是來回點選這些網站肯定會浪費不少時間與精力。

而使用RSS閱讀器則可讓我在同一個平台中，瀏覽幾十個不同部落格及社群專頁的文章。
是不是非常方便有效率，光這一點應該就能讓你對 RSS 產生興趣了。

為什麼要用 RSS
#

省下進出不同網站及平台的時間，在同一介面上瀏覽不同來源的資訊
只挑選自己想看的內容
不被演算法強迫餵食雜七雜八的內容
沒有廣告！
網站無法收集你的個人信息及收集你的瀏覽行為

RSS 已死？
#

相信許多跟我一樣是 2000 年後出生的朋友沒聽過 RSS，說實話我也認識 RSS 不長時間，我只能說我跟它相見恨晚。
但其實 RSS 誕生於 1999 年，對於網際網路來說，它算是相當年輕的。

大約於 2010 年前後，網路上有非常多聲音在討論 RSS 是否過時並漸漸被遺忘。
但許多人包括我也認為，這只是因為上述提到的第 4 及 5 點 RSS 最根本的核心價值，無法帶給內容產出平台商業價值，因此發展受到阻礙。

像是於 2013 年，Google 關閉了當時最受歡迎的 RSS 閱讀器 Google Reader，在這之後 Facebook 也開始限制使用者透過 RSS 訂閱粉絲專頁。
甚至於 2024 年初，開源項目 RSSHub 受到疑似來自於 X（原 Twitter）的 DDoS 攻擊¹。

但即便如此，RSS 依然活躍於網際網路上，也依舊非常好用，即便有少數的平台徹底關閉了 RSS 的支援，但也有其他方式能為該網站「生成」 RSS Feed；而其他的網站與平台雖然不會特別強調甚至是隱藏能夠使用 RSS 訂閱的事實，我們依舊有辦法找出其 RSS Feed 並訂閱。

RSS 的復興？結合 Web3、AI、社群的閱讀器 FOLO
#

本段落是於這篇文章完成後撰寫，我意外發現了使用邏輯截然不同的閱讀器 FOLO，其由下面要介紹的 RSSHub 及 RSSHub Rader 開發者製作，同樣為開源自由的專案，將 RSSHub 的功能直接內建在閱讀器中，並結合了 Web3、AI 及社群特性，打破了RSS封閉的環境，於現今喧鬧的社群環境與原先封閉的 RSS 環境中取得平衡。

最重要的是，相較底下要介紹的種種如何取得 RSS Feed 並用閱讀器訂閱的方法，使用 FOLO 能將這些步驟整合到閱讀器中完成，對於新手來說相當友善。

儘管使用 RSS 作為取得資訊的方式帶來相當多優點，但在現今對 RSS 不友善的網路世界，光要打造一個自己的 RSS 閱讀環境可說是有些費勁，而 FOLO 解決了這個難題，並且與眾多新技術結合。

儘管它只問世相當短的時間（2024 年7月31日，發布 v0.0.1-alpha.1 版本），目前依舊於測試階段，但未來的開發值得期待。

那麼回到正題，要怎麼取得 RSS Feed 並且在閱讀器中整合閱讀呢？

如何取得 RSS Feed
#

RSSHub Rader
#

在講到 RSSHub Rader 前必須先認識 RSSHub，其為一款主打「萬物皆可 RSS」的開源自由 RSS 生成器。

RSSHub Radar 是 RSSHub 開發者專為 RSSHub 設計的瀏覽器擴展工具²，同樣為開源自由，旨在幫助使用者快速發現和訂閱當前網頁的 RSS Feed。

如下圖所示，如果該網站有提供 RSS Feed，擴充程式工具列上的 RSSHub Rader 圖示上會顯示可使用的 RSS Feed 數量，點開後點擊 2 號圖標即可複製 RSS Feed 連結，並貼上到你使用的 RSS 閱讀器完成訂閱。

RSSHub Rader 瀏覽器擴充程式圖標點擊畫面

透過設定，我還添加了上圖的 1 號藍色雷達圖標，點擊即可自動訂閱到我使用的RSS閱讀器兼服務器 FreshRSS，省去開啟閱讀器貼上 RSS Feed 訂閱的步驟。

不過若要進一步編輯 RSS Feed 分類等操作還是得進入到閱讀器編輯。

RSSHub Rader 也提供直接訂閱到其他 RSS 閱讀器的功能，支援的閱讀器及設定介面可參考下圖。

手機版 Fluent Reader Lite 訂閱網站頁面

如果該網站沒有提供 RSS Feed 你也可以嘗試直接創建，截至目前爲止（20250401），RSSHub 共提供 6112 種路由規則，為不同網站及服務生成 RSS Feed。
不過這時你可能遇到兩種狀況：

X（原 Twitter）官方雖無提供 RSS Feed，但 RSSHub 有提供為 X 生成 RSS Feed 的路由規則，因此直接點擊擴充程式圖標即可複製。
網址如：https://rsshub.app/twitter/home?key=xxxxxxxxxxxxxxxxxxx
Telegram 頻道也無提供 RSS Feed，但 RSSHub 也有為其生成 RSS Feed 的路由規則，不過無法直接透過 RSSHub Rader 發現。這時你需要參考官方文件，Telegram 頻道的路由為/telegram/channel/:username/:routeParams?，其中:username改為頻道名稱（必填）、:routeParams可參考官方文件添加查詢規則（選填）。
編輯好路由後，將其貼上至 RSSHub 伺服器地址後即為 RSS Feed，像是：https://rsshub.app/telegram/channel/drummeryoz/
從上面的網址可發現伺服器地址皆為 https://rsshub.app，這是官方的伺服器地址，也是 RSSHub Rader 預設使用的伺服器，你也可以使用官網上提供的第三方伺服器。

又或是你可以自架 RSSHub，方法可參考官方文件。

如果你自架 RSSHub，記得到 RSSHub Rader 設定中更改伺服器位置（參考下圖），讓生成的 RSS Feed 使用的是你的伺服器地址。

RSSHub Rader RSSHub 設定介面預設

RSSHub Rader RSSHub 設定介面使用自架伺服器

傳統方式
#

除了使用 RSSHub Rader，還有幾個叫傳統耗時的方式，建議按照順序嘗試。

點擊網站頂部（header）或底部（footer）提供的 RSS 圖標，進入的頁面網址即為該網站的 RSS Feed，目前只有少數網站還有提供此圖標，可參考本網站頂部及頂部的 RSS 圖標。

透過點擊右鍵-查看原始碼（或是ctrl＋u），在網站原始碼頁面點擊ctrl＋f搜尋 rss，rss+xml 這行後面 href 後的網址即為 RSS Feed。

透過網頁原始碼查詢 RSS Feed

如無法透過上述兩種方式取得，可以嘗試下面的方法：

靜態網站，例如 Hugo 生成的網站可在網址後方加入 index.xml，例如本部落格及為 https://www.yozlog.com/index.xml。
如果該網站是由使用 WordPress 架設，在網址後添加/feed，即為該網站的 RSS Feed，至2024年8月止，使用WordPress架設的網站已佔全球的43.4%，且WordPress預設支援RSS Feed，如果上述方法皆無法取得 RSS Feed，嘗試看看此方法有很高機率成功。
如果該網站是由架設在 Tumblr 上，在網址後添加 /rss，即為該網站的 RSS Feed，例如 https://example.tumblr.com/rss。
如果該網站是由架設在 Blogger 上，在網址後添加 /feeds/posts/default，即為該網站的RSS Feed，例如 example.blogspot.com/feeds/posts/default。
又或者是你想取得 Medium 上某位作者的RSS Feed，將 /feed/ 添加到網址中作者名的前面，例如我的 Medium 網址為 https://medium.com/@drummeryoz，RSS Feed 即為 https://medium.com/feed/@drummeryoz。
如果是 Youtube，你可以像第二步驟一樣，於網站原始碼查詢 channelid，將下圖中 channelid 後面的代碼貼在 https://www.youtube.com/feeds/videos.xml?channel_id= 後即為該頻道的 RSS Feed。
例如我的Youtube頻道RSS Feed即為 https://www.youtube.com/feeds/videos.xml?channel_id=UCSDRvm0cp9B1GsSea9vwH1Q。
如果你使用 FreshRSS 作為閱讀器或是服務器，則可以直接貼上頻道網址，它會自動幫你解析該頻道的 RSS Feed。

透過網頁原始碼查詢Youtube Channel ID

如果以上方法皆無法取得該網站的 RSS Feed，例如 Facebook，則可以透過嘗試 Rss.app 等的付費生成 RSS Feed。
又或是自架自由開源的第三方服務前段替代方案，如 Facebook 對應 Phice、X 對應 Nitter、Reddit 對應 Redlib、Youtube 對應 Invidious。這些服務都能為這些商業內容平台生成 RSS feed。

如何使用 RSS
#

你只需要找到一個適合你的 RSS 閱讀器並貼上 RSS Feed 即可。

RSS 閱讀器推薦
#

閱讀器可以根據其支援的裝置以及功能去挑選，例如是否需要「離線存取」、「調整文字大小」、是否提供「標籤」及「分類」等等。

常見的像是 Feedly、Inoreader、The Old Reader 或 Feeder，這類的閱讀器只需要註冊帳號便能免費使用，一些額外的功能則必須付費訂閱或購買。

如果你使用蘋果產品，想要介面漂亮的話則可參考 Reeder 及 Lire，兩者都需要花 9.99 美金購買。

如果考慮開源軟體可參考 Fluent Reader、irreader、NetNewsWire（只限蘋果裝置）、Vienna（只限蘋果裝置）、Newsboat（需熟悉終端機操作、純文字界面、輕量、快速，支援Linux、macOS、FreeBSD系統，但不支援Windows）又或是可自架同時也為RSS聚合服務器的FreshRSS、Miniflu及Tiny Tiny RSS。

關於以上的閱讀器都可以在網路上找到許多使用心得。

我如何使用 RSS
#

因為我希望能夠架設私人的 RSS 聚合服務器，方便我在手機、平板及電腦等不同裝置上的閱讀器「同步」RSS 來源及閱讀紀錄，且我希望我的訂閱內容「不保存在任何第三方的伺服器」中。

所以我參考了「RSS 閱讀器跨平台方案：FreshRSS 搭配 Fluent Reader」，決定不使用 Feedly 及 Inoreader，而是使用自由開源的 Fluent Reader 作為閱讀器。

而 RSS 聚合服務器方面，因為看過許多文章表示：

Tiny Tiny RSS 雖「功能豐富」且「介面精美」，但過於「笨重」因此未嘗試便放棄
Miniflux 雖「輕巧」且「介面也不差」，但相較 FreshRSS 「擴充」及「可玩性較低」

因此選擇「擴充性較高」但「介面相對老舊」的 FreshRSS，透過 Docker 架設在 Synology 的 NAS 主機上³ ⁴，但其實三者都各有優缺點。⁵

最後於 Fluent Reader 中填寫 FreshRSS 的「伺服器地址」、「API」及「密碼」，往後只需要將新的 RSS Feed 加入到 FreshRSS，便能在多個裝置中的 Fluent Reader 中同步瀏覽訂閱內容了。

參考來源
#

对 RSS 的再思考：被忽视的力量
 How to find the RSS feed URL for almost any site
资深用户推荐：‌这些 RSS 阅读器，‌让你爱不释手！‌

Twitter launches DDoS attacks against open source projects - DIYgod ↩︎
RSSHub Radar 瀏覽器擴充程式下載連結：基於 Chromium 的瀏覽器／基於 Firefox 的瀏覽器 ↩︎
關於如何在 Synology 上透過 Docker 架設 FreshRSS，可參考以下文章：How To Self-Host FreshRSS Reader Using Docker、How to Install FreshRSS on Your Synology NAS 及 Synology: Install FreshRSS With Portainer。 ↩︎
2025 年 11 月 4 日更新：已於 2025 年 7 月將服務轉移，一樣用 Docker 架設在 Proxmox 系統中的 Debian 12 虛擬機中。 ↩︎
Tiny Tiny RSS、Miniflux、FreshRSS 比較：用Miniflux自建轻便好用的RSS服务 - 也而的博客／RSS订阅工具miniflux、tiny tiny rss、freshrss使用体会 | 老张博客／FreshRSS vs Miniflux Comparison (2025) | Feature by Feature ↩︎

yoz.log

留言板

留言區

在 Linux 上安裝 NUT 管理 UPS 不斷電系統

前言 #

NUT 是什麼？ #

安裝 NUT #

接上 UPS，找 USB ID #

設定 NUT 模式 nut.conf #

設定 UPS 連線裝置 ups.conf #

設定 upsd 使用者 upsd.users #

設定 upsd 監聽 upsd.conf #

設定監控與系統關機策略 upsmon.conf #

設定進階事件排程 upssched #

啟動服務 #

查詢 UPS 狀態 upsc #

控制 UPS 的即時命令 upscmd #

測試斷電 #

用 Docker 部署 Twikoo 留言區供 Hugo 網站使用

介紹 #

部署方式 #

Docker 容器與反向代理 #

編輯網站配置文件 config.toml #

留言區模板 comments.html #

多語言網站 i18n 設定 #

Twikoo 設定 #

Hugo Blowfish 主題｜切換文章列表樣式按鈕

前言 #

創建切換按鍵 Javascript #

創建列表模式模板 #

主頁最新文章 #

全部文章 #

Taxonomy #

Home Lab 私人伺服器架設日誌｜Pt.1 硬體選購

前言 #

構思藍圖 #

硬體挑選 #

初步方向 #

選定主機板 #

核心硬體補齊 #

五金配件 from 淘寶 #

周邊設備 #

總開銷 #

後記 #

參考文章 #

Hugo 可折疊聊天視窗短代碼 Shortcode

前言 #

功能 #

創建 Shortcode 短代碼 #

可折疊聊天視窗 #

對話框 #

創建 Partial 檔案 #

創建 JavaScript #

加入 CSS 樣式 #

檔案結構 #

完整使用範例 #

可自訂參數 #

多語言網站外觀文字翻譯 #

Hugo Partial範本防止JavaScript重複載入

前言 #

Partial 範本內容 #

Hugo Blowfish主題｜外觀功能修改日誌

前言 #

網站外觀 #

首頁簡介 #

Header 網站標題響應式隱藏 #

主頁作者名換行機制 #

Header 多語言網站切換按鈕隱藏文字 #

3D 網格加代碼瀑布風格 #

列表 Card View 分類與標籤分別顯示 #

分類頁標籤 #

原比例置中文章卡片縮圖 #

切換文章列表樣式按鈕 #

Footer 區塊 #

橫向三區塊 #

版權聲明 #

網站運作時間統計 #

發布文章及總字數統計 #

文章內容相關 #

添加連結圖標 #

前言
#

NUT 是什麼？
#

安裝 NUT
#

接上 UPS，找 USB ID
#

設定 NUT 模式 `nut.conf`
#

設定 UPS 連線裝置 `ups.conf`
#

設定 upsd 使用者 `upsd.users`
#

設定 upsd 監聽 `upsd.conf`
#

設定監控與系統關機策略 `upsmon.conf`
#

設定進階事件排程 `upssched`
#

啟動服務
#

查詢 UPS 狀態 `upsc`
#

控制 UPS 的即時命令 `upscmd`
#

測試斷電
#

介紹
#

部署方式
#

Docker 容器與反向代理
#

編輯網站配置文件 config.toml
#

留言區模板 comments.html
#

多語言網站 i18n 設定
#

Twikoo 設定
#

前言
#

創建切換按鍵 Javascript
#

創建列表模式模板
#

主頁最新文章
#

全部文章
#

Taxonomy
#

前言
#

構思藍圖
#

硬體挑選
#

初步方向
#

選定主機板
#

核心硬體補齊
#

五金配件 from 淘寶
#

周邊設備
#

總開銷
#

後記
#

參考文章
#

前言
#

功能
#

創建 Shortcode 短代碼
#

可折疊聊天視窗
#

對話框
#

創建 Partial 檔案
#

創建 JavaScript
#

加入 CSS 樣式
#

檔案結構
#

完整使用範例
#

可自訂參數
#

多語言網站外觀文字翻譯
#

前言
#

Partial 範本內容
#

前言
#

網站外觀
#

首頁簡介
#

Header 網站標題響應式隱藏
#

主頁作者名換行機制
#

Header 多語言網站切換按鈕隱藏文字
#

3D 網格加代碼瀑布風格
#

列表 Card View 分類與標籤分別顯示
#

分類頁標籤
#

原比例置中文章卡片縮圖
#

切換文章列表樣式按鈕
#

Footer 區塊
#

橫向三區塊
#

版權聲明
#

網站運作時間統計
#

發布文章及總字數統計
#

文章內容相關
#

添加連結圖標
#

macOS 視窗風格可折疊程式碼區塊
#

新增額外 Hero 佈局樣式
#

用 Docker 部署 Twikoo 留言區
#

短代碼（Shortcode）
#

可折疊 iframe
#

可折疊聊天視窗
#

其他
#

RSS 收錄全文
#

前言
#

展示
#