Hexo 主题我试过四个。NexT 太重，Butterfly 太花，Keep 太素。最后留在 Fluid 上，原因很实际——它是我装过的唯一一个"装完不用改就能看"的主题。

这篇文章不是主题推荐，是我从零装一遍的完整记录。包括我改的 24 处、踩的一个坑、和四条它确实存在的问题。

Fluid 首页

Fluid 能干什么

主题不是程序，它能干的事就是「把你的文章排成什么样、给读者什么功能」。

按用途对号入座——

技术博客：代码块带行号和语言标签，文章目录悬浮跟随
想要开箱即用的排版：装完不用改就能看，这是它最大的卖点
需要暗色模式：跟着系统走，不用自己写
想要站内搜索：主题自带搜索页，配一下就能用
移动端读者多：菜单做成网格而不是抽屉，拇指够得着
不想学新模板语法：就是 EJS，会一点前端就能改

它给不了大图轮播、视差滚动那套视觉冲击——Fluid 走的是「安静」的路子，要炫的去看 Butterfly。

核心功能亮点

代码块自带行号和语言标签：技术文章不用再装高亮插件
文章目录：侧边栏自动生成，滚动跟着高亮
暗色模式：跟随系统，不闪白
站内搜索：主题内置搜索页，配好索引就能用
移动端网格菜单：不是汉堡抽屉，几个大格子铺开，拇指好点
首页大图：可以放一张通栏图，也可以关掉
归档、分类、标签、关于页：版式都做好了
配置项集中：一个 _config.fluid.yml 管全部，缺点是有一千一百多行

装起来有多快

先说结论：四分钟，从空目录到一个能跑的博客。

环境是 Windows 11 + Node.js 22.22.2。三条命令：

npm init -y
npm install hexo hexo-renderer-marked hexo-renderer-ejs hexo-renderer-stylus hexo-server
npx hexo init

Hexo 7.3.0 装完 238 个包，18 秒（用了 npmmirror 镜像）。

然后把 Fluid 的主题文件夹丢进 themes/fluid，站点 _config.yml 里写一行 theme: fluid，npx hexo generate——63 个文件，258 毫秒。

这里有个我一开始漏掉的东西：hexo-renderer-ejs 必须单独装。Hexo 7 的默认依赖里没有它，不装的话主题模板不会被渲染，浏览器里看到的是 <%= theme.navbar.blog_title %> 这种原始代码。

我第一次打开首页看到满屏 EJS 语法，还以为是主题下错了版本。

首页文章列表

三个让我停下来研究的地方

文章页顶部与目录

一、移动端的菜单不是抽屉，是网格

大部分主题的移动端菜单是从侧面滑出来的抽屉，点开是一条竖着的列表。Fluid 不是，它是一屏网格，每个格子一个图标加文字，像手机桌面的应用抽屉。

移动端网格菜单

移动端文章列表

这个设计我很喜欢。抽屉菜单的问题是"你得先把抽屉拉开才知道有什么"，网格菜单是一眼全看到。七个格子：首页、归档、分类、标签、关于、搜索、关灯。

对，最后一个叫「关灯」，是暗色模式切换。

二、暗色模式是"跟着系统走"的

Fluid 的暗色模式默认 auto：优先读系统的 prefers-color-scheme，读不到就按本地时间——18 点到次日 6 点自动进暗色。

暗色模式首页

而且它不是简单地反色。我对比了亮暗两套：

亮色背景 #f2f6fa，暗色背景 #10151f（不是纯黑，是带蓝的深灰）
正文颜色、边框颜色、代码块高亮配色，全都各有一套
图片在暗色下不会变暗（很多主题会犯这个错，把 img 一起 filter 了）

代码块的高亮是两套独立的 CSS：highlight.css 和 highlight-dark.css，切换时换 id 加载。

暗色模式文章页

暗色模式列表

三、代码块自带行号和语言标签

这个细节让我觉得作者是真在用自己写的东西。

代码块

行号在左边一条灰底，语言名（PHP / BASH / TEXT）在右上角小字。复制按钮悬浮才出现。

缺点是语言标签会猜错。我有一段 PHP 的报错日志，没标语言，它自动识别成了 DART。

所以代码块一定要手动标语言，别偷懒：

```php
<?php echo 'hello'; ?>
```

我改了 24 处

主题本身是完整的，但"能用"和"是你的站"之间，隔着这 24 处。

我把它分成三类。

第一类：换身份（8 处）

导航栏标题、logo、favicon、apple-touch-icon、页脚版权、关于页的名字和简介、站点 title 和 description。

其中导航栏 logo 是主题没有的功能。Fluid 的 navbar 只显示文字标题，我给它加了一个 blog_logo 配置项：

<a class="navbar-brand" href="<%= url_for() %>">
  <% if (theme.navbar.blog_logo) { %>
    <img class="navbar-brand-logo" src="<%= url_for(theme.navbar.blog_logo) %>" alt="...">
  <% } %>
  <strong><%= theme.navbar.blog_title || config.title %></strong>
</a>

改的是 layout/_partials/header/navigation.ejs，主题的其它文件一个字没动。

关于页

第二类：换配色（5 处）

导航栏底色 #2f4154（灰蓝）→ #01316F（藏蓝），页面背景 #eee → #f2f6fa，暗色背景跟着调。

再加上一个 site-brand.css：导航栏渐变、卡片悬停上浮、页脚深色、行内代码青色胶囊。

这个文件是通过主题自带的 custom_css 配置挂进去的，不污染主题原始样式。

第三类：关掉和打开（11 处）

关掉 links 友链页（没有友链）
关掉 auto_excerpt 自动摘要——它会截原始 Markdown，导致摘要里残留 ** 符号
打字机从"全站"改成"只在首页"——文章标题也一个字一个字打出来，等得人心急
打开 hexo-generator-search，搜索框才有索引可查

搜索这块值得单独说。主题配置里 search.enable: true 是默认开的，但索引文件要靠插件生成，不装插件的话点搜索框会一直转圈。

npm install hexo-generator-search

装完重新 generate，站点根目录会多一个 local-search.xml，搜索就能用了。

搜索弹窗

那个让我卡了一小时的坑

这是整篇文章唯一的技术难点，也是我最想写下来的一条。

我要给文章里的 h2 加一条青绿色的竖线做装饰，第一反应当然是 border-left：

.markdown-body h2 {
  border-left: 4px solid #17B7B7;
  padding-left: 14px;
}

结果竖线从标题上方 80 像素的地方就开始画，一直拉到标题底下，像一条挂错位置的标签。

我一开始以为是 margin 的问题，改了三版都不对。最后打开 DevTools 看盒模型，才发现真凶：h2 的实际高度是 118px，不是 40px。

多出来的 80px 是哪来的？翻主题源码找到了：

anchor-offset()
  &::before
    display block
    content ""
    margin-top -5rem
    height 5rem
    width 1px
    visibility hidden

主题给每个标题塞了一个 5rem（80px）高的隐藏 ::before 块。作用是在锚点跳转时把标题往下推，避免被顶部导航栏挡住。

border-left 是画在整个盒子上的，当然会把这 80px 也算进去。

解决方案不是删掉它（删了锚点跳转就会遮标题），而是换一种画法——用 background-image 贴着底部画：

.markdown-body h2 {
  padding-left: 14px;
  background-image: linear-gradient(180deg, #17B7B7 0%, #2CC7C7 100%);
  background-repeat: no-repeat;
  background-size: 4px 1.25em;
  background-position: 0 calc(100% - 0.3em);
}

calc(100% - 0.3em) 是关键。100% 对齐到盒子底部，减去 0.3em 正好跳过 padding-bottom，竖线就落在文字那一行上了。

这也是我看这个主题最舒服的一点：它为了兼容性做了很多 hack，但你顺着源码能看明白它在干什么。

四条缺点

写到这里该说问题了。Fluid 不是没有毛病，我遇到的至少有这四条。

一、必须有 Node.js，纯静态托管的人用不了

这是最大的门槛。WordPress 主题下载下来，传 FTP 就能用；Hexo 主题不行，你得有 Node 环境、会敲命令、知道 generate 和 server 的区别。

我做的整合包已经把 node_modules 打进去了（省掉 npm install 这一步，国内镜像也慢），但Node.js 本身还是得自己装。

如果你只是想挂个静态博客、完全不想碰命令行，说真的，Typecho 或 WordPress 更适合你。

二、配置文件 1100 行，找一项要 Ctrl+F

themes/fluid/_config.yml 有 1100 多行。中英双语注释写得很详细，但找个配置项跟翻字典一样。

# 主题颜色配置，其他不生效的地方请使用自定义 css 解决
color:
  body_bg_color: "#eee"
  navbar_bg_color: "#2f4154"
  ...

而且改主题自带的 _config.yml，升级主题时会被覆盖。官方推荐的做法是在站点根目录建一个 _config.fluid.yml 做覆盖配置——但它默认不生成，得自己去文档里找格式。

我这份包是直接改的主题 _config.yml（因为要打包给别人用），你要长期维护的话，建议改成覆盖配置。

三、首页大图占满一屏，手机上是灾难

index.banner_img_height: 100 的意思是标题图高度 = 100% 屏幕高度。桌面端很好看，一屏就一张图加一行字。

但移动端这个值不生效。我把手机截图量了一下，390×844 的屏幕上，banner 只占了 270px 左右，不到 1/3。

移动端首页

这个效果其实还行（省得手机上第一屏什么都看不到），但配置项写 100 却给出 32% 的结果，会让人以为配置没生效。

四、主题更新和你改的东西是两条线

Fluid 1.9.9 是 2025 年的版本，更新不频繁但一直在维护。你直接改主题文件，下次 git pull 就冲突。

我这份包改了 24 处，升级时得手动合并。所以我建议：先看我的改法，然后把这些改动搬到你自己的 _config.fluid.yml 和 custom_css 里，别直接改主题源码。

整合包里有什么

我把自己装好的这一份打成了压缩包，19.6MB，解压就能跑：

Fluid博客主题-v1.9.9/
├── site/                  完整 Hexo 站点，含 node_modules
│   ├── themes/fluid/      只要主题的，取这个文件夹
│   ├── source/            五篇示例文章 + 关于页 + 品牌图片
│   ├── _config.yml
│   └── public/            已生成的静态站，可直接上传
├── 原始包/                官方 zip + LICENSE，未修改
├── 预览截图/              带水印的实拍图
├── 启动本地预览.bat        双击 → 起服务 → 开浏览器
├── 使用说明.txt           9 章，含改动清单和常见问题
├── 免责声明.txt
└── 访问源码湾.url

不用 npm install，node_modules 是打好的（36MB）。装个 Node.js 18+ 就能 双击 bat 看到东西。

site/public/ 里的静态文件可以直接丢到虚拟主机、Nginx、Vercel、Cloudflare Pages——不需要 PHP，不需要数据库。

移动端代码块

归档页

怎么拿

上面那个包（19.6MB）在这儿：

两个小提醒：

建议先「转存到自己网盘」再下载——直接下载的链接容易失效，转存后就是你自己的了，随时能下；
手机上操作：点开链接 → 右下角「保存到网盘」→ 回夸克 App 的「我的网盘」里下载。

装之前先确认两件事：Node 18 以上、一个能跑的 Hexo 站点。Fluid 的配置文件一千一百多行，改之前先把原文件备份一份。

自己动手的成本：从官方仓库拉主题也行，只是那份是纯主题文件——node_modules、站点配置、示例文章、favicon 都得自己补，装上还得试半天样式对不对。我这份是装满五篇文章、每页都点过一遍之后的，解压双击就能看。

最后

Fluid 让我改变了一个看法。

我以前觉得"好看的 Hexo 主题都差不多"，反正都是卡片流、都有目录、都支持暗色。装完这个之后我发现差别在细节：移动端菜单是网格不是抽屉、代码块语言标签在右上角、暗色模式有两套高亮配色。

这些东西在主题演示站上滑两下看不出来，自己装满五篇文章、点过每一个页面之后，才会发现"哦，这里作者想过"。

缺点我也摆在这了。它不是万能的，它只是我做博客这么多年，唯一一个装完没想换的主题。

Fluid 主题为 GPL-3.0 开源项目，本文实测版本 v1.9.9。整合包内的源码与官方发布版一致，仅站点显示名称与示例内容做了替换。

Fluid Hexo 主题：装完不用改就能看，配置项都写好了