作者：雾岛（wudao686@gmail.com）

之前的样子

博客刚搭起来的时候，其实只有一个空壳。头像是默认的，侧边栏下方一片空白，文章底部除了版权声明什么都没有，页脚在暗色模式下也不会跟着变。严格来说，能看，但算不上一个完整的博客。

做了哪些改动

头像下方

之前侧边栏只有头像、昵称和文章计数，往下就什么都没有了。现在补上了两个社交入口：GitHub 和 B站，点一下就能跳转。同时去掉了不想要的归档菜单，导航栏精简到首页、关于、友链三项。

这个过程中遇到了一些样式上的细节问题。图标用的是 iconfont 自定义字体，但主题自带的样式规则会覆盖自定义的 content 值，导致 unicode 编码对不上——主题里微信是 \e640，而我的字体文件里是 \e600，两边各说各的。再加上 CSS 选择器优先级不够高、类名大小写不一致（模板生成 icon-github 全小写，样式里写了 icon-GitHub 驼峰），几个因素叠在一起，图标一直出不来。最后通过提高选择器优先级、补充大小写变体，全部理顺了。

文章底部

之前文章读完就结束了，底部只有分类和标签。现在加了三样东西：

• 版权声明：CC BY-NC-SA 4.0，自动显示作者、文章链接和许可协议
• 过期提醒：超过 180 天的文章会在顶部自动显示一条提示，告诉读者内容可能已经过时
• 分享按钮：微信和 QQ 两个入口，微信点击后会弹出二维码，适合手机扫码分享

分享按钮的配置过程绕了个弯。share = ["weixin", "qq"] 写进配置文件后，按钮始终不出现。后来发现是 TOML 的解析特性导致这个键被它旁边的子表"吞掉"了——它被解析到了 params.top.icon 下面，而不是 params 本身。调整了键的位置之后，按钮正常渲染了。

评论系统

选用了 Giscus，基于 GitHub Discussions，不需要额外部署后端。配置过程需要把仓库设为公开、在仓库设置里开启 Discussions 功能、安装 Giscus GitHub App 授权，然后把生成的 repo-id 和 category-id 填入配置文件。中间有个小细节，模板里映射字段的变量名和文档写的不一样，需要留意一下。

暗色模式适配

之前不管系统是亮色还是暗色，页面底部始终是白色，和深色背景的正文区域脱节。原因是主题的样式文件里把 linear-gradient 写在了 background-color 属性上——这个属性根本就不支持渐变，浏览器直接跳过了整条规则。改成 background 简写属性之后，底部就能跟着 --color-footer-background 变量在亮色和暗色之间自动切换了。

本文2026-07-15首发于雾之岛，最后修改于2026-07-15

作者：雾岛（wudao686@gmail.com）

缘起

一直想有一个属于自己的小角落，写点东西，记录生活。于是就有了「雾之岛」这个博客。

从零到上线，整个过程断断续续折腾了两天，这里记录一下，也给想自己搭博客的朋友一个参考。

技术选型

本地搭建

Hugo 的安装很简单，下载一个 exe 文件就行。选好主题后，主要做了这些定制：

图标替换

使用的是 iconfont，创建了一个项目，选了四个图标（首页、归档、关于、友链）。下载后将字体文件放到 static/fonts/iconfont/ 目录下，在 hugo.toml 里配置图标编码即可。

点击特效

主题自带了 mouse-firework 点击特效。不过默认是红色圆点，我想要金色爱心的效果。原库不支持爱心形状，所以通过 injector 注入了一段 JS，用贝塞尔曲线绘制爱心注册进去。

备案信息

国内服务器必须备案。主题的 footer 模板已经内置了 ICP 和公安备案的支持，配置两个参数就行：

[params.icp]
  icpnumber = "闽ICP备2025121748号"
  beian = "闽公网安备35082202820160号"
  recordcode = "35082202820160"

服务器部署

服务器是百度云的，Debian 12 系统。整个部署架构如下：

本文2026-07-14首发于雾之岛，最后修改于2026-07-14