顏色
設定的顏色
- #0e1923 Charred Steel
- #474a4d 藍墨茶 あいすみちゃ
- #e7e7eb 紫水晶 むらさきすいしょう
- #afafb0 銀鼠 ぎんねず
程式碼
檔案路徑: /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,按鈕會隨字體完美縮放 */
}
/* 調整文章內的程式碼區塊字體大小 */
.post-content pre code {
font-size: 16px !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;
}
/* 縮小首頁文章卡片的邊框內邊距,讓邊框緊貼文字 */
.post-entry {
padding: 0.5rem 1rem !important;
}
/* 確保點擊整張卡片時的互動範圍同步縮小 */
.post-link {
padding: 0 !important;
/* 清除連結的預設補白,避免撐開卡片 */
}
/* 微調標題與日期之間的距離,讓整張卡片更緊湊 */
.post-entry .entry-header h2 {
margin-bottom: 0.25rem !important;
/* 縮小標題與日期之間的空隙 */
}
/* 縮小首頁文章卡片之間的間距 */
.post-entry {
margin-bottom: 20px !important;
}
/* 放大網頁最下方的Footer頁尾文字 */
.footer {
font-size: 1rem !important;
line-height: 1.6 !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>
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"]