首頁 on 我的 Hugo 網站

主題指南

Sun, 26 Oct 2025 00:00:00 +0000

這篇文章展示 hugo-trainsh 的主要渲染能力——標題、程式碼、表格、圖表、公式、圖片等。

三種主題模式
文字排版
程式碼
表格
圖表
數學
圖片
標籤

三種主題模式

點擊頁首的切換按鈕依次切換：

復古 (手把) — NES 深藍底色、像素字體標題、8-bit 對話框邊框
明亮 (太陽) — 乾淨的現代淺色方案
暗黑 (月亮) — 適合夜間閱讀

文字排版

常規 Markdown 正常渲染。粗體在復古模式下以金色高亮，斜體同樣清晰可讀。可以新增任意連結，樣式會跟隨主題變化。

引用區塊在復古模式下有獨立的青色邊框，在長文中一眼可辨。

程式碼

圍欄程式碼區塊支援語法高亮、複製按鈕與自動換行：

 
from datetime import date

def greet(name: str) -> str:
 return f"你好, {name}！今天是 {date.today()}。"

print(greet("世界"))

行內程式碼如 hugo server 也有對應樣式。

程式碼範例

Sun, 19 Oct 2025 00:00:00 +0000

JavaScript

 
export function hasFeature(name) {
 return ['短代碼', 'Mermaid', 'KaTeX', 'PhotoSwipe', 'i18n'].includes(name);
}
console.log(hasFeature('短代碼'));

Python

 
from dataclasses import dataclass
from datetime import date

@dataclass
class DemoFeature:
 name: str
 enabled: bool

features = ["程式碼區塊增強", "搜尋", "標籤篩選", "按讚", "多語系"]
status = [DemoFeature(name=feature, enabled=True) for feature in features]

print(date.today().isoformat(), status[:2], f"total={len(status)}")

圖片與燈箱

Sun, 12 Oct 2025 00:00:00 +0000

外部圖片

點擊圖片即可在燈箱中開啟。

點擊查看大圖

本地圖片提示

在 Page Bundle 中，將圖片放在 index.md 旁邊，只用檔名引用就能取得尺寸。

Mermaid 與數學示範

Sun, 05 Oct 2025 00:00:00 +0000

Mermaid

 sequenceDiagram
 participant U as 使用者
 participant H as Hugo
 participant T as 主題執行時
 U->>H: 儲存內容
 H->>T: 套用樣板渲染
 T-->>U: 即時重新載入

數學

行內數學：$a^2 + b^2 = c^2$。

區塊數學：

\int_{-\infty}^{\infty} e^{-x^2} \, dx = \sqrt{\pi}

彙整與標籤

Sun, 28 Sep 2025 00:00:00 +0000

彙整

使用彙整頁面依日期瀏覽。最新文章會顯示在首頁。

表格測試

Fri, 26 Sep 2025 00:00:00 +0000

左	中	右
a	b	c
`code`	em	bold

工程原則 2024

Mon, 22 Apr 2024 00:00:00 +0000

原則

小步快跑、頻繁交付。
關鍵路徑優先採用成熟穩定的技術。
測試是意圖的文件；保持可讀性。
加功能之前先讓回滾容易。

備註

這些原則刻意保持精簡，方便記住也方便討論。

功能示範手冊

Thu, 18 Mar 2021 00:00:00 +0000

為什麼更新這篇文章

這篇 demo 文章已改為最新功能核對清單，幫助你確認站點升級後的功能都能正常運作。

驗證流程

語言切換器可正常跳轉對應語系的同類頁面。
列表頁可使用搜尋與標籤篩選。
文章內短代碼（toc、tags、recent-posts）可正常渲染。
代碼區塊、Mermaid、KaTeX、PhotoSwipe 都可正常顯示。
主題切換按鈕三態循環正常：明亮（太陽）→ 暗黑（月亮）→ 復古（手把）→ 明亮。復古模式應顯示 NES 像素風格（深藍背景、像素字體標題）。

補充

多語系對應頁可透過 translationKey 來一一綁定。