主题美化介绍：我做了哪些改动

Fri, 10 Apr 2026 00:00:00 +0000

本模板基于 Hugo Theme Stack v4 开发，在保持原有功能完整性的基础上，进行了一系列视觉和交互上的美化。

所有修改都通过 Hugo 的覆盖机制实现（在 assets/ 和 layouts/ 中创建同名文件），不修改主题源代码，方便随时升级主题版本。

1. 全局配色系统

重新定义了整套颜色变量，采用深蓝 + 暖米白的配色方案：

亮色模式：

背景色：暖米白 #f8f7f2（比纯白更护眼）
主色调：深海蓝 #1B365D
卡片背景：#fdfdfb（微暖的白）

暗色模式：

背景色：#101214（深灰黑）
卡片背景：#1c2128（GitHub 暗色风格）
暗色模式下图片自动降亮，hover 后恢复

修改位置：assets/scss/custom.scss 中的 :root 变量。

2. Mac 风格代码块

原始主题的代码块较为简洁，本模板对其进行了全面美化：

顶部装饰栏

为每个代码块添加了 macOS 风格的三色圆点装饰（红、黄、绿），模拟终端窗口外观。

复制按钮重设计

从不易发现的图标按钮改为悬浮在标题栏右侧的文字按钮
亮色模式：毛玻璃风格（backdrop-filter: blur）
暗色模式：深色半透明背景
点击后按钮文字变为"✓ Copied!"

自动折叠长代码块

超过 600px 高度的代码块会自动折叠，底部显示"展开代码"按钮：

折叠时底部有渐变遮罩
点击展开后，按钮变为"收起代码"
收起时自动滚动回代码块顶部，防止页面位置混乱

滚动条美化

代码块的横向滚动条默认透明，鼠标悬停时才显现，保持界面整洁。

3. 首页双栏网格布局

在 PC 端（宽度 ≥ 1024px），首页文章列表变为 2 列网格展示：

每篇文章以卡片形式呈现，包含封面图、标题、摘要和元信息
卡片 hover 时有轻微上浮动画
文章标题和摘要超出时自动截断（2 行）
移动端自动恢复为单列列表

开启方式：在 params.toml 中设置：

[homepage]
    grid = true

4. 移动端导航重设计

原主题的移动端导航较基础，本模板完全重写了移动端体验：

顶部悬浮导航栏

固定在顶部（sticky），随页面滚动保持可见
左侧：头像 + 站点名称（点击回首页）
右侧：明暗切换、语言切换、搜索、汉堡菜单

汉堡菜单

点击展开侧边菜单，带有淡入动画
菜单展开时顶栏标题淡出，避免遮挡
当前页面菜单项高亮显示
屏幕宽度恢复时自动关闭

搜索框

桌面端侧边栏的搜索框经过重新设计，与卡片样式一致。

5. 博客统计页（Stats）

新增了一个功能丰富的 /stats/ 统计页，包含：

摘要卡片：总文章数、总字数、运行天数（动画数字滚动）
分类分布：带进度条的分类列表，可点击进入分类页
热门标签：标签云展示（前 30 个标签）
写作习惯：按周几和时段分析发布习惯（基于 Git 提交时间）
年度热力图：GitHub 风格的贡献热力图（近一年的发布记录）

配置页面入口：在 content/stats/index.zh.md 中设置 layout: stats。

Footer 新增博客运行时长展示，会计算从建站日期到当前的天数、小时、分钟。

点击可跳转到 Stats 统计页。

配置建站日期：

[footer]
    launchDate = "2024-09-09"

7. 自定义 Shortcodes

时间线（Timeline）

适合展示成长经历、技术栈演进等内容：

{{< timeline >}}
{{< timeline-item date="2024-01" >}}
开始学习 Hugo 建站
{{< /timeline-item >}}
{{< timeline-item date="2024-06" >}}
博客正式上线
{{< /timeline-item >}}
{{< /timeline >}}

标题分割线（Title）

适合日记、健身记录等需要分段标题的内容：

{{< title "晨练记录" "green" >}}

支持颜色：red、orange、yellow、green、teal、blue、indigo、purple、pink、gray

如何自定义颜色

编辑 assets/scss/custom.scss，修改 :root 中的变量：

:root {
    --accent-color: #1B365D;        /* 主色调（按钮、链接等） */
    --body-background: #f8f7f2;     /* 页面背景 */
    --card-background: #fdfdfb;     /* 卡片背景 */
}

保存后 Hugo 会自动重新编译，浏览器实时刷新。

定制 on 我的博客