目录
用腻了之前的主题,况且之前使用的主题由日本人开发,显示的字体非简体中文字形,看起来别扭。
更换为 Farallon主题 ,借助 ChatGPT 5.4 和 5.3-codex 模型,修改了主题的样式和功能,使其更适合笔者的需求。
改动如下:
🚀 新特性
1. 站点图标支持增强
- 文件:
themes/farallon/layouts/partials/head.html - 说明:
- 新增
params.favicon配置项,支持本地资源路径(如images/favicon.png)和远程 URL(如https://xxx/favicon.ico) - 统一图标输出标签格式:
<link rel="icon" ...>和<link rel="shortcut icon" ...> - 支持自动解析远程 URL、本地
assets资源及普通相对路径 - 移除对
vnd.microsoft.iconMIME 类型的强制绑定,提升兼容性
- 新增
2. 配置项重构与可选显示控制
- 文件:
config.toml、themes/farallon/layouts/partials/profile.html - 说明:
- 重写
config.toml配置结构,使首页描述信息变为可选 - 新增
showSiteDescription开关控制站点描述(params.description)显示 - 新增
showAuthorDescription开关控制作者描述(params.authorDescription)显示 - 默认关闭两个描述显示开关,需手动启用
- 重写
🎨 样式优化
3. 分类模块视觉优化
- 文件:
themes/farallon/layouts/partials/category.htmlthemes/farallon/assets/scss/modules/_categoryCard.scss - 说明:
- 增加“分类”标签标题,提升语义清晰度
- 描述文本改为有值才渲染,避免空行占位
- 分类项样式从分割线列表改为轻量卡片:
- 缩小内边距与封面尺寸
- 降低标题字号和字重
hover状态使用浅背景和细边框,视觉更柔和- 描述文本限制为两行截断,防止内容撑高布局
🐛 问题修复
4. 站点图标显示异常修复
- 文件:
config.toml、themes/farallon/layouts/partials/head.html - 说明:
- 修复因图标链接写法与 MIME 类型强制绑定导致的兼容性问题
- 将默认
favicon改为主题内置的favicon.png,避免jpg格式图标可能引发的兼容问题
5. 作者头像显示异常修复
- 文件:
themes/farallon/layouts/single.html - 说明:
- 修复文章底部作者卡片因
authorAvatar未配置导致src=""的显示问题 - 增加回退逻辑:
- 优先使用
params.authorAvatar - 未配置时回退到
params.favicon - 两者均未配置时不输出头像
<img>标签,避免空src属性
- 优先使用
- 修复文章底部作者卡片因
6. 代码块行号排版修复
- 文件:
themes/farallon/assets/scss/modules/_graph.scss - 说明:
- 修复因缺少 Hugo Chroma 专用样式导致的代码块行号错位问题
- 新增代码块专用样式覆盖:
- 为
.highlight pre恢复white-space: pre和overflow-x: auto,避免行号与代码换行错位 - 为
.highlight code移除内联代码的背景和padding,防止双重样式叠加 - 为
.line设置display: block确保每行独立渲染 - 为
.ln设置固定宽度、右对齐和灰色字体,稳定行号列对齐
- 为
📝 修改文件汇总:
config.tomlthemes/farallon/layouts/partials/head.htmlthemes/farallon/layouts/partials/profile.htmlthemes/farallon/layouts/partials/category.htmlthemes/farallon/layouts/single.htmlthemes/farallon/assets/scss/modules/_categoryCard.scssthemes/farallon/assets/scss/modules/_graph.scss