PaperMod主題設定

字體大小、樣式與內容排版

使用的顏色

程式碼

檔案路徑：/assets/css/extended/custom.css

/* 一、全站設定 */
/* 全站適用：開啟中英文與數字之間的自動微調空格 */
html,
body {
    text-autospace: normal !important;
}

/* 調顏色 */
:root[data-theme="dark"] {
    --theme: #0e1923;
    --entry: #474a4d;
    --primary: #e1e1e2;
    --secondary: #e1e1e2;
    --tertiary: rgb(65, 66, 68);
    --content: #e1e1e2;
    --code-block-bg: #18181B;
    --code-bg: rgb(55, 56, 62);
    --border: #afafb0;
    color-scheme: dark;
}

/* 二、首頁文章列表設定 */
/* 放大首頁文章列表的日期與資訊文字 */
.first-entry footer,
.post-entry footer,
.entry-footer {
    font-size: 1.1rem !important;
}

/* 首頁文章列表的標題縮小 */
.first-entry .entry-header h2,
.post-entry .entry-header h2 {
    font-size: 1.3rem;
    line-height: 1;
}

/* 縮小首頁文章標題與日期之間的距離 */
.first-entry .entry-header h2,
.post-entry .entry-header h2 {
    margin-bottom: 0.25rem;
}

/* 縮小首頁文章之間的間距 */
.post-entry {
    margin-bottom: 0.7rem !important;
}

/* 去除首頁文章卡片的背景、邊框與陰影 */
.post-entry {
    background: transparent !important;
    /* 移除背景色 */
    border: none !important;
    /* 移除邊框 */
    box-shadow: none !important;
    /* 移除陰影 */
    padding: 15px 0 !important;
    /* 縮減左右內距，只留上下間距 */
    border-bottom: 2px solid var(--border) !important;
    /* 加入一條下底線作為文章區隔 */
    border-radius: 0 !important;
    /* 取消圓角 */
}

/* 當滑鼠懸停在文章上時的視覺回饋 */
.post-entry:hover {
    transform: none !important;
    /* 拔除原本卡片浮起的動畫 */
    background: transparent !important;

}

/* 當滑鼠移到卡片上時，將文章變色 */
.post-entry:hover .entry-header h2,
.post-entry:hover .entry-footer {
    color: #a0d8ef !important;
    transition: color 0.2s ease;
    /* 讓顏色變化有平滑的過渡效果 */
}

/* 調整分頁按鈕文字大小與樣式 */
.pagination a {
    color: var(--theme);
    font-size: 1rem;
    font-weight: 600;
    line-height: 36px;
    background: var(--primary);
    border-radius: calc(36px / 2);
    padding: 0 16px;
}

.pagination a:hover {
    color: var(--theme);
    background: #a0d8ef;
    transition: color 0.2s ease;
}

/* 三、導覽列設定 */
/* 調整頂部導覽列選單的字型大小粗細 */
.menu a {
    font-size: 1.2rem;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 0.5rem;
    /* 調整底線與文字的距離 */
}

/* 導覽列滑鼠懸停時樣式 */
.menu a:hover {
    color: #a0d8ef !important;
    transition: color 0.2s ease;
    text-decoration: none;
    /* 懸停時取消底線 */
}

/* 四、單篇文章設定 */
/* 調整文章內文的字體大小 */
.post-content,
.post-content p {
    font-size: 1.2rem;
    line-height: 1.75;
    /* 同步調大行高，閱讀起來更舒適 */
}

/* 放大文章日期、作者、閱讀時間等 */
.post-meta {
    font-size: 1.2rem !important;
    margin-top: 0.5rem !important;
    /* 增加日期與上方標題之間的間距，看起來更舒適 */
}

/* 放大文章內文中的H4標題 */
.post-content h4 {
    font-size: 1.3rem;
}

/* 放大文章標籤，修改樣式 */
.post-tags a {
    font-size: 1.2rem !important;
    background: var(--entry);
    padding: 0.25rem 0.625rem !important;
    /* 同步將邊距換算為rem，按鈕會隨字體縮放 */
}

/* 文章標籤滑鼠懸停樣式 */
.post-tags a:hover {
    color: var(--theme);
}

/* 調整文章內的程式碼區塊字體大小 */
.post-content pre code {
    font-size: 1.1rem !important;
    line-height: 1.6 !important;
}

/* 行內程式碼也一起放大並調整樣式 */
.post-content code {
    font-size: 0.9em !important;
    /* 使用相對大小，讓它隨段落文字等比例放大 */
    margin: 0 0.2rem;
    /* 前後留白 */
}

/* 放大程式碼複製按鈕 */
.copy-code {
    transform: scale(1.5) !important;
    transform-origin: right top;
    /* 確保按鈕以右上角為基準點放大，不影響排版 */
}

/* 調整文章內連結滑鼠懸停時樣式 */
.post-content a:hover {
    color: #a0d8ef !important;
    transition: color 0.2s ease;
    text-decoration: none;
    /* 懸停時取消底線 */
}

/* 讓PaperMod內建的錨點連結恢復正常顯示 */
.post-content h2 .anchor,
.post-content h3 .anchor,
.post-content h4 .anchor,
.post-content h5 .anchor,
.post-content h6 .anchor {
    display: inline-block;
    color: #a0d8ef !important;
    text-decoration: none;
    /* 不要底線 */
    opacity: 0;
    /* 預設隱藏 */
}

/* 當滑鼠移到標題上時，讓這個內建的「#」浮現 */
.post-content h2:hover .anchor,
.post-content h3:hover .anchor,
.post-content h4:hover .anchor,
.post-content h5:hover .anchor,
.post-content h6:hover .anchor {
    opacity: 1;
    color: #a0d8ef !important;
}

/* 限制文章內所有圖片的最大寬度，並自動置中 */
.post-content img {
    /* 圖片最大寬度為內文寬度的70% */
    max-width: 70%;
    height: auto;
    display: block;
    /* 讓圖片置中 */
    margin: 0 auto;
}

/* 五、頁尾設定 */
/* 放大頁尾文字 */
.footer {
    font-size: 1rem !important;
    line-height: 1.6 !important;
    /* 同步調大行高，避免多行時擠在一起 */
}

/* 改變頁尾所有連結在滑鼠懸停時的顏色與樣式 */
.footer a:hover {
    color: #a0d8ef !important;
    text-decoration: none;
}

文章內對外連結

設定文章內連結在新分頁開啟。
檔案路徑：/layouts/_default/_markup/render-link.html"

<a href="{{ .Destination | safeURL }}" {{ with .Title }} title="{{ . }}" {{ end }}{{ if strings.HasPrefix
    .Destination "http" }} target="_blank" rel="noopener noreferrer" {{ end }}>{{ .Text | safeHTML }}</a>

文章永久連結設定

Hugo預設會根據在content底下的資料夾路徑來決定產出的網址（URL）。如果想在/content/posts底下再建資料夾管理分類文章，又要網址簡單乾淨，就要自訂永久連結（Permalink）的格式。

在hugo.toml中輸入：

[permalinks]
  posts = '/posts/:slug/'

寫文章時，只要在Front Matter裡寫slug: "文章網址"（slug為網址別名），不管你把這個.md檔塞在後台多深的資料夾（例如content/posts/2026/09/hugo/index.md），前台的網址一律只會是乾淨的posts/文章網址。

顯示最後修改日期

原本在hugo.toml改，怎麼改都沒效果，直接複製主題樣板來修改。
檔案路徑：/layouts/partials/post_meta.html
貼上以下修改好的內容：

{{- $scratch := newScratch }}

{{- if not .Date.IsZero -}}
{{- $scratch.Add "meta" (slice (printf "<span title='%s'> %s</span>" (.Date) (.Date | time.Format (default
":date_long" site.Params.DateFormat)))) }}
{{- end }}

{{- if not .Lastmod.IsZero -}}
{{- if ne .Date .Lastmod -}}
{{- $scratch.Add "meta" (slice (printf "<span title='%s'> %s更新</span>" (.Lastmod) (.Lastmod | time.Format (default
":date_long" site.Params.DateFormat)))) }}
{{- end -}}
{{- end }}

{{- if (.Param "ShowReadingTime") -}}
{{- $scratch.Add "meta" (slice (printf "<span>%s</span>" (i18n "read_time" .ReadingTime | default (printf "%d min"
.ReadingTime)))) }}
{{- end }}

{{- if (.Param "ShowWordCount") -}}
{{- $scratch.Add "meta" (slice (printf "<span>%s</span>" (i18n "words" .WordCount | default (printf "%d words"
.WordCount)))) }}
{{- end }}

{{- if not (.Param "hideAuthor") -}}
{{- with (partial "author.html" .) }}
{{- $scratch.Add "meta" (slice (printf "<span>%s</span>" .)) }}
{{- end }}
{{- end }}

{{/* Combine all meta information into a single string with separators and render it as HTML.*/}}

{{- with ($scratch.Get "meta") }}
{{- delimit . "｜" | safeHTML -}}
{{- end -}}

加了「更新」字樣，把原本用來分隔的點 · 改成直槓｜。
之後只要在Front Matter裡寫lastmod: '2026-09-10'，就會出現更新日期了。

文章彙整與搜尋

文章彙整檔案路徑：/content/archive.md

---
title: "文章彙整"
layout: "archives"
url: "/archive/"
summary: archives
---

開啟搜尋功能，在hugo.toml中加入：

[outputs]
home = [ "HTML", "RSS", "JSON" ]

搜尋檔案路徑：/content/search.md

---
title: "搜尋" 
layout: "search" 
url: "/search"
# description: "Description for Search" 搜尋說明，我留空
summary: "search"
# placeholder: "placeholder text in search input box" 搜尋框預設文字，我留空
---

修改hogo.toml，設定搜尋參數：

[params]
    [params.fuseOpts]
        # 一篇文章只出現一次
        id = "permalink"
        # 搜尋時要對比的欄位
        keys = [ "title", "summary", "content", "permalink" ]

再次修改hogo.toml，把文章彙整和搜尋的連結放到首頁選單裡：

[menu]
[[menu.main]]
identifier = "search"
name = "搜尋"
url = "/search/"
weight = 1

[[menu.main]]
identifier = "archive"
name = "文章彙整"
url = "/archive/"
weight = 2

自訂頁尾內容

檔案路徑：/layouts/partials/footer.html
將/themes/PaperMod/layouts/_partials/footer.html"的內容複製過去，把{{- if (not site.Params.disableScrollToTop) }}前面的內容替換成：

{{- if not (.Param "hideFooter") }}
<footer class="footer">
    {{- if not site.Params.footer.hideCopyright }}
    {{- if site.Copyright }}
    <span>{{ site.Copyright | markdownify }}</span>
    {{- else }}
    <span style="display: block; margin-bottom: 5px;">&copy; {{ now.Year }} <a href="{{ "" | absLangURL }}">{{
            site.Title }}</a></span>
    {{- end }}
    {{- end }}

    {{- with site.Params.footer.text }}
    {{ . | markdownify }}
    {{- end }}

    <span style="display: block;">
        本站使用
        <a href="https://gohugo.io" target="_blank" rel="noreferrer noopener">Hugo</a>
        與
        <a href="https://github.com/adityatelange/hugo-PaperMod" target="_blank"
            rel="noreferrer noopener">PaperMod</a>
        製作。
    </span>
</footer>
{{- end }}

OG圖片

Open Graph (OG)支援是指在網站網頁程式碼的 <head> 區塊中加入特定的元標籤（Meta Tags），讓網址被分享到社群平台時，能自動生成預覽卡片。
圖片大小：1200 × 630 px
檔案路徑：/static/images/default-cover.png
在hugo.toml中加入：

images = ["images/default-cover.png"]

Favicon

Favicon（Favorites Icon）是與網站或網頁關聯的微小識別圖示，通常顯示在瀏覽器分頁標題前、書籤列、歷史紀錄及搜尋結果中。
到Favicon.io下載生成的檔案，解壓縮後放到/static裡，修改hugo.toml：

[params]
  [params.assets]
    favicon = "/favicon.ico"
    favicon16 = "/favicon-16x16.png"
    favicon32 = "/favicon-32x32.png"
    apple_touch_icon = "/apple-touch-icon.png"

hugo.toml其他設定

# 在建立網站前自動清理Public資料夾內不要的檔案
cleanDestinationDir = true

[params]
# 深色模式，無切換按鈕
defaultTheme = "dark"
disableThemeToggle = true
# 設定日期格式
dateFormat = "2006年01月02日"
# 隱藏首頁文章摘要
hideSummary = true
# 去除首頁的first-entry
disableSpecial1stPost = true
# 顯示程式碼複製按鈕
ShowCodeCopyButtons = true

[markup]
# 允許直接渲染文章中混雜的原始HTML語法
  [markup.goldmark]
    [markup.goldmark.renderer]
      unsafe = true
# 更換Chroma（程式碼區塊語法高亮器）的主題
  [markup.highlight]
    style = "witchhazel"

Chroma的主題可以在Hugo官網的Syntax highlighting styles看效果預覽。

字體大小、樣式與內容排版#

使用的顏色#

程式碼#

文章內對外連結#

文章永久連結設定#

顯示最後修改日期#

文章彙整與搜尋#

自訂頁尾內容#

OG圖片#

Favicon#

hugo.toml其他設定#