作者：雾岛（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