博客美化

“在这个数字荒原中，每一个独立博客都是一座赛博孤岛，而亲手为它添砖加瓦，正是独属于程序员与极客的浪漫。” 历经一番大大小小的像素级微调与踩坑，我的个人独立博客 「寻 Mi 处」 (https://blog.mibase.top) 终于有了理想中的模样。 作为一个喜欢自己动手丰衣足食的折腾党，开箱即用的模板总觉得差了点灵魂。今天就把这段时间从零开始搭建、美化 Hugo Stack 主题的整个过程做个全盘复盘，既是给自己留个备份，也希望能给同样在折腾 Hugo 的朋友一点参考。 核心骨架：Hugo Stack 与自定义域名 博客基于目前非常现代化且颜值极高的 Hugo Stack 主题搭建。 自定义域名：绑定了独立域名 blog.mibase.top。 HTTPS 加密：通过后台配置与 CNAME 配合，全面启用了全站 HTTPS 安全访问，确保所有的静态资源加载都不会被浏览器安全策略拦截。 视觉灵魂：HarmonyOS Sans 与霞鹜文楷的本地双字体混排 网页的默认字体总显得有些千篇一律。为了兼顾现代科技感与长文阅读的温润感，我选择将两款优秀的开源/商用免费字体搬进本地： UI 与标题栏：使用 HarmonyOS Sans（鸿蒙字体），线条干净利落，用在侧边栏、菜单和文章标题上极具现代感。 正文阅读区：使用 霞鹜文楷 屏幕阅读版（LXGW WenKai），正楷的微弧度让大段文字的阅读体验直线上升。 配置方式 将字体文件丢入 static/fonts/ 目录下，并在 layouts/partials/head/custom.html 中通过 @font-face 声明并绑定： 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 @font-face { font-family: 'HarmonyOS Sans'; src: url('/fonts/HarmonyOS-Sans.ttf') format('truetype'); font-display: swap; } @font-face { font-family: 'LXGW WenKai'; src: url('/fonts/LXGWWenKai.ttf') format('truetype'); font-display: swap; } /* 字体应用规则 */ body, p, article { font-family: "LXGW WenKai", serif !important; } h1, h2, h3, .sidebar, .menu, .article-title { font-family: "HarmonyOS Sans", sans-serif !important; } 避坑指南：静态资源与 HTTPS 头像直链 在配置个人头像时，曾踩过一个小坑：误把图片放到了 assets/ 目录。 避坑经验：在 Hugo 中，只有放在 static/ 目录下的文件（如 static/img/miro.jpg），才会在编译时原封不动地输出到网站根目录。 结合 blog.mibase.top 的 HTTPS 域名后，我的博主头像直链最终完美落地为：https://blog.mibase.top/img/miro.jpg 无论是博客侧边栏的个人 Logo，还是后续在各个页面中引用的名片头像，都能秒级稳定加载。 鼠标指针的“赛博幻觉”与现实 这次折腾中比较好玩（也比较头疼）的一个小插曲是自定义鼠标指针。 兴冲冲下载了一套很好看的二次元动态鼠标主题（Kuro 的 .ani 格式），结果放到网页上毫无反应。 技术真相：现代网页浏览器（Chrome、Edge 等）出于底层安全与实现机制限制，在 CSS 的 cursor 属性中原生是不支持 .ani（动态光标）格式的——它毕竟是 Windows 桌面的专属产物。 既然无法直接使用动态光标，我们也可以通过转换为静态图片或拥抱网页开源的极客像素光标来替代。这也算是在折腾路上学到的小知识点。 文章头部元数据美化（短日期格式与强制阅读时长） Hugo Stack 主题默认的日期格式和阅读时间渲染有时受国际化（i18n）配置影响。为了让日期完美显示为 2026-10-23 这种干净的格式，并且强制稳定显示阅读时长，我们需要通过 Hugo 的模板重写机制来进行自定义。 创建覆盖模板文件 在你的 Hugo 博客根目录下，创建以下路径的文件： 👉 layouts/partials/article/components/details.html 写入核心代码 将以下代码完整写入该文件中： 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 <header class="article-header"> {{- /* 1. 分类标签 */ -}} {{- if .Params.categories -}} <div class="article-category"> {{- range (.GetTerms "categories") -}} {{- $color := partial "helper/color-from-str" .LinkTitle -}} {{- $BackgroundColor := default $color.BackgroundColor .Params.style.background -}} {{- $TextColor := default $color.TextColor .Params.style.color -}} <a href="{{ .RelPermalink }}" class="link" {{ if or $BackgroundColor $TextColor }}style="background-color: {{ $BackgroundColor }}; color: {{ $TextColor }};"{{ end }}> {{ .LinkTitle }} </a> {{- end -}} </div> {{- end -}} {{- /* 2. 文章标题 */ -}} <h1 class="article-title">{{ .Title }}</h1> {{- /* 3. 文章副标题/描述 */ -}} {{- with .Params.description -}} <h2 class="article-subtitle">{{ . }}</h2> {{- end -}} {{- /* 4. 日期与阅读时长元数据 */ -}} <div class="article-details"> {{- /* 日期强制格式化为 2026-10-23 */ -}} <div class="article-date"> <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-calendar" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 7a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12z" /><path d="M16 3v4" /><path d="M8 3v4" /><path d="M4 11h16" /><path d="M11 15h1" /><path d="M12 15v3" /></svg> <time class="publish-date"> {{- .Date.Format "2006-01-02" -}} </time> </div> {{- /* 强制稳定显示阅读时长 */ -}} {{- $showReadingTime := .Params.readingTime | default (.Site.Params.article.readingTime) -}} {{- if $showReadingTime -}} <div class="article-reading-time"> <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-clock" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" /><path d="M12 12v-3" /><path d="M12 12l3 3" /></svg> <span>阅读时长：{{ .ReadingTime }} 分钟</span> </div> {{- end -}} </div> </header> 页脚全局集成：萌 ICP 备案、APlayer 动漫音乐播放器与 Sakana-Widget 看板娘 Hugo Stack 主题允许我们在页脚或自定义脚本 partial 中挂载全局组件。我们将萌 ICP 备案号、10首动漫神曲 APlayer 播放器以及井上泷奈看板娘统一整合成一个高效的组合。 创建或修改自定义页脚文件 路径：👉 layouts/partials/footer/custom.html 写入整合代码 将以下完整的精简纯净代码填入文件中： 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 <!-- =========