PaperMod主題設定

顏色

設定的顏色

程式碼

檔案路徑： /assets/css/extended/custom.css
HEX（十六進位色碼）是我有修改的，RGB是原本的。

/* Dark mode下的顏色 */
:root[data-theme="dark"] {
    --theme: #0e1923;
    --entry: #474a4d;
    --primary: #e7e7eb;
    --secondary: #e7e7eb;
    --tertiary: rgb(65, 66, 68);
    --content: #e7e7eb;
    --code-block-bg: rgb(46, 46, 51);
    --code-bg: rgb(55, 56, 62);
    --border: #afafb0;
    color-scheme: dark;
}
/* 文章底下的標籤 */
.post-tags a {
    background: #474a4d;
}

字體大小與排版

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

/* 全站適用：開啟中英文與數字之間的自動微調空格 */
html,
body {
    text-autospace: normal !important;
}
/* 調整文章內文的字體大小 */
.post-content,
.post-content p {
    font-size: 1.2rem;
    line-height: 1.7;
    /* 同步調大行高，閱讀起來更舒適 */
}
/* 放大文章日期、作者、閱讀時間等 */
.post-meta {
    font-size: 1.2rem !important;
    margin-top: 0.5rem !important;
    /* 增加日期與上方標題之間的間距，看起來更舒適 */
}
/* 放大文章標籤 */
.post-tags a {
    font-size: 1.2rem !important;
    padding: 0.25rem 0.625rem !important;
    /* 同步將邊距換算為rem，按鈕會隨字體完美縮放 */
}
/* 放大文章內文中的 H4 標題 */
.post-content h4 {
    font-size: 1.3rem;
}
/* 調整文章內的程式碼區塊字體大小 */
.post-content pre code {
    font-size: 1rem !important;
    line-height: 1.6 !important;
}
/* 行內程式碼也一起放大 */
.post-content code {
    font-size: 0.95em !important;
    /* 使用相對大小，讓它隨段落文字等比例放大 */
}
/* 放大程式碼複製按鈕 */
.copy-code {
    transform: scale(1.5) !important;
    transform-origin: right top;
    /* 確保按鈕以右上角為基準點放大，不影響排版 */
}
/* 單篇文章頁面底部的標籤區塊 */
.share-buttons+.post-tags,
footer.post-footer .post-tags a {
    font-size: 1.2rem !important;
}
/* 強制放大首頁文章列表的日期與資訊文字 */
.first-entry footer,
.post-entry footer,
.entry-footer {
    font-size: 1.2rem !important;
}
/* 首頁文章列表的標題縮小 */
.first-entry .entry-header h2,
.post-entry .entry-header h2 {
    font-size: 1.25rem;
    line-height: 1.3;
}
/* 縮小首頁文章卡片的邊框內邊距，讓邊框緊貼文字 */
.post-entry {
    padding: 0.5rem 1rem !important;
}
/* 確保點擊整張卡片時的互動範圍同步縮小 */
.post-link {
    padding: 0 !important;
    /* 清除連結的預設補白，避免撐開卡片 */
}
/* 縮小首頁文章標題與日期之間的距離 */
.first-entry .entry-header h2,
.post-entry .entry-header h2 {
    margin-bottom: 0.25rem;
}
/* 縮小首頁文章卡片之間的間距 */
.post-entry {
    margin-bottom: 0.7rem !important;
}
/* 放大網頁最下方的Footer頁尾文字 */
.footer {
    font-size: 1rem !important;
    line-height: 1.6 !important;
    /* 同步調大行高，避免多行時擠在一起 */
}

文章各階層標題錨點

錨點顏色：#a0d8ef 空色そらいろ
檔案路徑： /assets/css/extended/custom.css

/* 讓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;
    margin-left: 16px;
    /* 與標題文字保持間距 */
    text-decoration: none;
    /* 不要底線 */
    opacity: 0;
    /* 預設隱藏 */
    transition: opacity 0.2s ease-in-out;
}
/* 當滑鼠移到標題上時，讓這個內建的「#」浮現 */
.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;
}

連結

設定文章內連結在新分頁開啟。
檔案路徑： /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>

自訂頁尾

檔案路徑： /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>
        與
        <a href="https://www.cloudflare.com/zh-tw/" target="_blank" rel="noreferrer noopener">Cloudflare</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

其他設定

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

[frontmatter]
# 檢查文章內有沒有手動寫lastmod欄位
lastmod = ["lastmod"]

顏色#

設定的顏色#

程式碼#

字體大小與排版#

文章各階層標題錨點#

連結#

自訂頁尾#

OG圖片#

Favicon#

hugo.toml#

顏色