起念

我的博客用了快三年的 Fluid 主题。Fluid 是个好主题，功能全，维护也勤快，但我每次打开那个 _config.yml，滚动条拖半天都见不到底，有些功能平常我感觉也不太用得到。而且 Material Design 那种硬阴影、强对比的视觉风格，总觉得太严肃了。我的博客内容本来就没多正经，套一个西装革履的皮囊，有点别扭。

我想要一个软一点、亲和一点的主题。蓬松的，让人愿意多待一会儿的。

但翻了半天 Hexo 的主题列表，没找到特别对胃口的。热门的那些审美疲劳了，冷门的又怕作者不维护了。

那段时间我正好在用 CC 做一些小东西，顺手。有天晚上突然冒出一个念头：要不，让 AI 帮我写一个？

开局

我打开 CC，敲了第一句话：「我想做一个 Hexo 博客主题，风格参考 Claymorphism 设计趋势，先帮我分析一下实用性、可行性，然后出一份设计文档。」

AI 输出了一大段分析，从 Claymorphism 的核心特征到 Hexo 模板机制的兼容性，都梳理了一遍。我大致浏览了一番，认为和我所想的大差不差。

然后选配色。它给了几套方案，我挑了丁香紫做主色调那套，就是看着顺眼。主题取名叫 Modern Duang，粘土风格那种软弹软弹的感觉让我想到了这个词，念起来带点调皮。

提示

Claymorphism 是 2022 年左右出现的一种 UI 风格，用内外双层阴影模拟黏土的 3D 质感。和 Material Design 的纸张隐喻不同，它强调的是"柔软"和"可玩性"。2026 年用这个风格其实已经不算新鲜了，不过自己用嘛，自己喜欢最重要。

写代码

从骨架开始

先写 layout.ejs，整个主题的 HTML 骨架。我让 AI 参考 Hexo 默认的 landscape 主题结构来写，包含 head 标签、字体加载、CSS 和 JS 的引用。

接下来写首页、文章页、归档页、分类页、标签页……一个接一个。AI 写 EJS 模板是真的快，我描述一下页面布局，二三十秒代码就出来了。不过第一版基本都只能算”能用”，间距不太对、手机上布局塌了、暗色模式下某些字看不清，这些都是后面一遍遍调的。

CSS 代码最多

整个主题最花时间的不是逻辑，是 CSS。

main.css 最后写了大几千行。每个页面、每个组件、每种状态都得写样式。Claymorphism 的阴影系统又比扁平设计麻烦，一个卡片有默认阴影、hover 阴影、按下阴影三种，每种都是内外好几层叠加，再乘上暗色模式，一套卡片下来六种阴影组合。

那段时间的工作节奏大概是：我跟 AI 说「写一下首页 Hero 区域的样式」，它写完，我刷新浏览器瞄一眼，「圆角太小了，加到 24px」，它改，「暗色模式背景太亮了」，它再改，「手机上间距不对」……就这么来来回回。

AI 负责不停地改，我负责不停地挑。

说实话，挺累的。不是 AI 的问题，而是视觉调整这件事本身就很难一步到位，得亲眼看了才知道对不对。有时候一个组件的间距反复调了四五次，最后还是选择了第一版。但回头想想，就算纯手写 CSS，该调的还是得调，一遍都少不了。区别可能就是：手写的话我每次改完要手动找到对应行、改值、刷新。现在我说一句就行，省掉了中间那些机械操作。

加了几个功能

骨架和样式差不多之后，我开始往里面塞我认为必须的功能。

自定义引用块

Hexo 默认的 blockquote 就是左边一条灰线，太素了。我想要那种带颜色和图标的信息块，像 Notion 里提示是绿的、警告是黄的、危险是红的。在 Hexo 里做这个得用 Tag Plugin，在 scripts/ 下注册自定义标签，用户写 {%note%}...{%endnote%} 就能渲染出来。

AI 写的第一版基本能用，但有个小问题：标签里面写 Markdown 加粗、链接、列表的时候渲染会乱。后来加了一层简单的正则解析，把 **加粗**、[链接](url)、- 列表 转成对应的 HTML。

后来我还让它给引用块加了个鼠标追踪光效，鼠标挪上去的时候会有一个光圈跟着走。效果还挺好玩的。

警告

这里踩了个小坑：一开始我只让 AI 处理了加粗和斜体，发现在我自己的文章里经常还会写链接和列表，又回头补了一轮。以后加功能应该先把可能用到的场景想全了再动手，能省一轮返工。

文章可见性

有些文章我不想让它出现在首页列表里，但朋友直接点链接还能看；有些文章写得有错误或者内容过时了容易产生误导但没来得及从服务器上删掉的。AI 用 Hexo 的 after_post_render 和 after_generate 钩子实现了这个，文章头里加个 visibility 字段，填 local 就列表隐藏直达可看，填 global 就直接 404。

这个功能 AI 十秒钟就给出完整实现了，它应该是对 Hexo 文档很熟。

图标系统

导航栏的图标、社交平台图标、备案图标，总共二十来个。我没让 AI 自己画 SVG，那不是它的强项，而是让它从 Feather Icons 和 Simple Icons 里找合适的，把路径嵌到一个 icons.js 文件里。我让 AI 加了一个属性可以自己直接贴 SVG 字符串，这样会覆盖默认值。

以上几个功能是我目前想到且已经实现的，但主题还在不断更新中，这篇文章过段时间就算过时了吗，哈哈哈。

AI 不太行的那些时刻

虽然大部分代码是 AI 写的，但它也有不少搞不定的地方，而且有些还挺让人头疼的。

第一版在视觉上有问题。我不是说代码跑不起来，大部分都能跑，但“能跑”跟“好看”是两回事。间距、颜色、比例这些东西，AI 只能给一个大概合理的版本，但那个“舒服”的感觉得靠人眼来判断。

需要跨文件改动时容易漏改。有一回我改了一个 CSS 变量名，五个 EJS 模板里用到了它，AI 只改了三个，漏了两个，后来只能我自行去查了。

Hexo 有些约定文档里没写明白。比如 page.prev 和 page.next 只在文章页有值，在其他页面类型上是空的。AI 不知道这个，它读到文档里有这个变量就直接用了，分类页上就报错了。但这样的问题每次让 AI 自己发掘问题点，它都能很快的找到并修复，麻烦点的就是费点时间。

发布和后面的事

从开始写到 v1.0.0 发布，大概用了两天时间。后面陆续修了几个 bug，加了一些新的功能同时也修复些问题、优化一些动效和组件样式，现在最新的是 1.2.0 版本。

发布之后我又让 AI 根据主题源码写两个Skills：一份告诉 AI 怎么帮用户安装和配置这个主题，另一份告诉 AI 源码结构、方便用户直接改样式。装了之后在 CC 里说一句「帮我配置 Modern Duang」就可以了。

总结一下这两个Skills，似乎有点多此一举，因为把主题源码下载下来丢给 AI 去理解，它也是能秒懂的。

一些感受

整个项目做下来，最大的变化是：写代码这件事，从“创造”变成了“审阅”。大部分时间我不是琢磨“这段代码该怎么写”，而是盯着屏幕想“这段代码对不对、好不好看”。

但审阅也有审阅的累法。AI 写得快，你一个小时内要看的内容可能跟你以前写一天的量差不多。信息密度太高了，到后面脑子容易钝，判断力下降，不过现在的 AI 还是比较聪明的，即使有问题它也能够自己去找问题、跑检查、修问题。

AI 写的网页即使经过多轮调教还是会有点 AI 味残留的，但是后面可以慢慢优化的。总之，我看到整个站点完全跑通的时候，心想：这个主题还有点可爱的(╹▽╹)。

结尾

如果你想试试这个主题：

1
npm install hexo-theme-modernduang --save

仓库：GitHub - hexo-theme-modernduang

我也做了一个主题的博客站，不想装的话，可以直接浏览主题博客也行。

如果你想看详细的配置指南，我用 Rspress 做了一个指南站点，可以看看。

这个主题还会继续更新下去。毕竟现在改它只需要喊一声，对吧😏~