推荐将自定义CSS放在source/目录下,通过主题配置或注入点挂载:Butterfly需用inject.head配完整link标签;Fluid直接填custom_css数组;Next优先用source/css/_custom/custom.styl。

直接改主题的 layout 文件不是引入自定义 CSS 的推荐方式,它容易被主题更新覆盖、破坏结构语义,且无法享受 Hexo 的静态资源处理机制(如自动加版本号、路径解析)。真正该做的是把 CSS 放到 source/ 下,再通过主题配置或注入点挂载。
Butterfly 主题:必须用 inject.head 插入完整 <link> 标签
Butterfly 不支持 custom_css 配置项,强行写进去无效。你得在 _config.butterfly.yml 里配 inject.head:
-
inject:下写head:,每行一个带引号的完整 HTML 字符串 - 路径必须以
/开头,比如/css/custom.css;写成./css/custom.css或css/custom.css会 404 - 文件实际位置必须是
source/css/custom.css(不是themes/butterfly/source/css/) - 建议加版本参数防缓存:
<link rel="stylesheet" href="/css/custom.css?v=20260526">
Fluid 主题:直接填 custom_css 数组,路径相对 source/
Fluid 原生支持 custom_css,不用手写 HTML。但路径规则很关键:
使用ydata-profiling(前身为pandas-profiling)生成全面的数据质量报告,包含相关性分析、缺失值模式和基数检测。导出交互式HTML仪表板和JSON摘要。
- 写法是
custom_css: ["/css/custom.css"](带引号、开头有/) - 错误示例:
["source/css/custom.css"](多写了source/)或["css/custom.css"](缺开头/) - 支持外部 URL,比如阿里字体:
["//at.alicdn.com/t/font_1736178_ijqayz9ro8k.css"] - 改完必须运行
hexo clean && hexo g,否则浏览器可能还在用旧缓存
Next 主题:优先走 source/css/_custom/custom.styl
Next v7+ 推荐用 Stylus 文件而非纯 CSS,因为能调用主题变量(如 hexo-config("url"))、支持条件编译、不依赖缓存清理:
立即学习“前端免费学习笔记(深入)”;
- 文件路径固定为
source/css/_custom/custom.styl,新建即可 - 里面可以直接写 CSS 规则,也能用 Stylus 语法,比如:
.post-title { color: $color-primary; } - 如果只是临时挂一个现成 CSS,才用
inject.head,写法同 Butterfly - 别同时用
_custom.styl和inject改同一个选择器,CSS 优先级会打架
最容易被忽略的其实是构建时机和路径映射关系——source/ 是 Hexo 构建时的根,所有路径都从这里算起;而浏览器看到的 /css/xxx.css 是发布后站点根目录下的路径。这两层没对齐,就只剩 404 和控制台报错。

















