博客美化

Fri, 23 Oct 2026 13:13:38 +0800

“在这个数字荒原中，每一个独立博客都是一座赛博孤岛，而亲手为它添砖加瓦，正是独属于程序员与极客的浪漫。”

历经一番大大小小的像素级微调与踩坑，我的个人独立博客 「寻 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 声明并绑定：

@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 桌面的专属产物。
既然无法直接使用动态光标，我们也可以通过转换为静态图片或拥抱网页开源的极客像素光标来替代。这也算是在折腾路上学到的小知识点。

五、友链小广场（Link Square）上线

独立博客最开心的事，莫过于和各路技术伙伴互联互通。

我精简掉了那些繁文缛节、生硬死板的条条框框，在 content/links/index.md 搭建了一个轻松惬意的友链小广场，并附上了本站名片：

博客名称：寻 Mi 处
博客网址：https://blog.mibase.top
博主头像：https://blog.mibase.top/img/miro.jpg
博客简介：保持热爱，奔赴山海，记录技术与生活的点滴。

欢迎各位路过的大佬常来串门，互相交换友链！

写在最后

折腾博客的乐趣，就在于亲手把一块块代码、一张张图片、一行行 CSS 拼凑成一个属于自己的赛博空间。

「寻 Mi 处」的搭建只是第一步，后续还有评论区、文章目录交互以及更多技术折腾等待解锁。代码不停，折腾不止，咱们下篇随笔见！

前端 on 寻 Mi 处

博客美化

一、 核心骨架：Hugo Stack 与自定义域名

二、 视觉灵魂：HarmonyOS Sans 与霞鹜文楷的本地双字体混排