不少开发者在使用现成主题时，总会遇到一些不合心意的地方：字体太小、配色不够高级、移动端抽屉动画生硬……但一想到要从第一个 <div> 开始手写新主题，又担心头发掉光。
好在现在有 AI 了，再加上本专栏文档，定制一个专属于自己的主题也不是一件难事了。
其实，在 RustPress 中定制主题，本质上就是写普通的 HTML 与 Tailwind CSS 类名。没有复杂的构建插件配置，也没有晦涩的生命周期钩子。
本篇带你一步步以官方主题为母版，快速打造一套独一无二的专属主题。
一、复制母版快速起步
最稳妥的方式是以成熟的 themes/light 或 themes/default 作为基底进行派生：
# 1. 复制现有主题骨架
cp -r themes/light themes/my-theme
# 2. 进入新主题目录
cd themes/my-theme
以成熟的官方主题为基底派生，能全盘继承经过验证的 SEO 语义骨架与响应式断点，省去 80% 的地基工作；但容易受到原有排版哲学的思维惯性约束。即使如此，也要选择母版派生，先派生，再修改，才是最快的路子。
二、在 config.toml 中激活新主题
编辑站点根目录下的 config.toml，把主题名称换成你的新目录名：
[theme]
name = "my-theme"
保存后，RustPress 的所有页面就会自动从 themes/my-theme/templates/ 目录加载模板。
三、Tailwind CSS 配色与字体定制
打开新主题目录下的 tailwind.config.js，自由配置属于你的专属色板与字体栈：
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./templates/**/*.html",
"../../source/**/*.md"
],
theme: {
extend: {
colors: {
// 自定义品牌主色
brand: {
50: '#f0fdf4',
100: '#dcfce7',
500: '#22c55e',
600: '#16a34a',
900: '#14532d',
},
// 极光点缀色
accent: '#38bdf8',
},
fontFamily: {
// 优化后的中西文字体栈
sans: [
'-apple-system',
'BlinkMacSystemFont',
'"Segoe UI"',
'Roboto',
'"Noto Sans SC"',
'sans-serif'
],
mono: [
'"JetBrains Mono"',
'"Fira Code"',
'monospace'
]
}
},
},
plugins: [
require('@tailwindcss/typography'),
require('@tailwindcss/forms'),
],
}
四、定制核心模板与局部组件
进入 themes/my-theme/templates/：
base.html：修改 Header 导航栏，增加全站通知横幅，或者在 Footer 中添加社交图标；components/hero.html：打造个人特色的首页打字机动画或问候卡片；post.html：微调文章行高、加粗颜色，添加文末一键复制或赞赏弹窗。
五、样式编译与双屏调试
RustPress 内建了快速的样式构建支持：
# 方式 1：使用 rustpress 编译 CSS
rustpress build-css
# 方式 2：使用开发全量构建（包含编译 Tailwind CSS 与生成静态 HTML）
rustpress build-dev
# 方式 3：通过 npm 监听 Tailwind 样式变更
npm run dev:css
日常开发推荐开启两个终端窗口：
- 终端 1：运行
rustpress serve（监听 Markdown 与 HTML 模板热更新）； - 终端 2：运行
npx tailwindcss -i ./src/input.css -o ./static/css/main.css --watch（监听 CSS 原子类变动）。
你在 HTML 里随手加一个 bg-brand-500，浏览器毫秒内就能直观看到样式变化。先派生主题，然后在使用过程中，一边体验一边修改，这是最快的定制方式。
六、主题独立开源与复用
打磨满意后，你可以把这套主题作为一个独立的 Git 仓库开源维护：
- 提交至 GitHub（如
github.com/your-name/rustpress-theme-awesome）； - 在其他博客中以 Submodule 形式引入：
git submodule add https://github.com/your-name/rustpress-theme-awesome.git themes/awesome - 在
config.toml中配置[theme] name = "awesome"，一秒完成换装。
这是专栏的最后一篇了，如果你还有问题没有从中找到答案，欢迎留言给我。
