Cahcn的资料库
Other 3 分钟阅读

更换站点主题

目录

用腻了之前的主题,况且之前使用的主题由日本人开发,显示的字体非简体中文字形,看且来别扭。

更换为 Farallon主题 ,借助ChatGPT 5.4和5.3-codex模型,修改了主题的样式和功能,使其更适合笔者的需求。


改动如下:

增加站点图标

修改一

1站点图标支持配置:[`head.html`](/themes/farallon/layouts/partials/head.html#L17)
2新增读取 `params.favicon`
3支持两种写法:
4本地资源路径(如 `images/favicon.png`)
5远程 URL(如 `https://xxx/favicon.ico`)

修改二

 1已修复站点图标异常,问题点是图标链接写法和 MIME 固定为 vnd.microsoft.icon,但你配置的是 jpg,会导致兼容异常。
 2两处修复:
 3更新图标输出逻辑:head.html
 4统一输出标准标签:
 5<link rel="icon" ...>
 6<link rel="shortcut icon" ...>
 7支持远程 URL、本地 assets 资源、普通相对路径三种情况自动解析。
 8不再强绑 vnd.microsoft.icon。
 9调整默认配置:config.toml
10favicon 改为主题内置的 favicon.png,避免 jpg 图标类型兼容问题。

修改三

1问题不在页脚 favicon,而在文章底部作者卡片:模板一直渲染 authorAvatar,但 config.toml 没配这个字段,生成结果是空的 src="",所以图标显示异常。
2在 single.html 里加了回退逻辑:
3优先使用 params.authorAvatar
4未配置时回退到 params.favicon
5两者都没有时不输出头像 <img> 标签,避免空 src 导致的显示问题。

根据主题代码重写config.toml配置项

1首页描述信息改为可选:[`profile.html`](/themes/farallon/layouts/partials/profile.html#L5)
2`showSiteDescription` 控制是否显示站点描述(`params.description`
3`showAuthorDescription` 控制是否显示作者描述(`params.authorDescription`
4两个开关默认关闭

正文左下角的分类样式优化

 1根据主题代码把文章页底部“分类”模块做了视觉优化,重点是降低突兀感、减少空占位。
 2改动在这两个文件:
 3category.html
 4_categoryCard.scss
 5
 6具体优化:
 7增加了轻量标签标题(分类),让这个区域语义更清晰。
 8描述改为“有值才渲染”,避免空描述占一行导致版面不协调。
 9分类项从“硬分割线列表”改为“轻卡片”样式:
10缩小内边距与封面尺寸
11降低标题字号和字重
12hover 时用浅背景和细边框,视觉更柔和
13描述文本做两行截断,避免长文案把底部撑得过高。

修复代码块行号排版问题

1修复代码块行号排版问题,根因是主题缺少 Hugo Chroma(.ln/.line)专用样式,且通用 code/pre 样式干扰了代码块布局。
2在 _graph.scss 加了代码块专用覆盖:
3为 .highlight pre 恢复 white-space: pre、overflow-x: auto,避免行号与代码换行错位。
4为 .highlight code 去掉内联代码的背景和 padding,防止双重样式叠加。
5为 .line 设置 display: block,确保每行独立渲染。
6为 .ln 设置固定宽度、右对齐和灰色字体,行号列对齐稳定。
Cahcn
Cahcn
Cahcn的资料库
分类
Other