主题定制入门
title: "主题定制入门：从换颜色到做自己的主题" date: 2026-09-17 tags: [主题, CSS, 自定义, 教程] category: 使用教程 description: "分三级教程：换颜色（5分钟）、改布局（30分钟）、做新主题（半天）。从零基础到独立开发。"
主题定制入门：从换颜色到做自己的主题
爱库录有 17 款内置主题。但如果你想要更个性化的外观，可以自己定制。
这篇教程分三个级别，从简单到深入：
Level 1：换颜色（5 分钟）
最快的方式：修改 CSS 令牌（CSS Variables）。
操作
控制台 → 主题设置 → 自定义令牌：
/* 改主色调 */
--th-color-primary: #2563eb; /* 蓝色 → 换成你喜欢的颜色 */
--th-color-primary: #dc2626; /* 红色 */
--th-color-primary: #16a34a; /* 绿色 */
--th-color-primary: #9333ea; /* 紫色 */
/* 改背景 */
--th-color-bg: #ffffff; /* 白底 */
--th-color-bg: #0f172a; /* 深色底 */
--th-color-bg: #fafaf9; /* 米白底 */
/* 改文字 */
--th-color-text: #1a1a2e; /* 深色文字 */
--th-color-text: #e2e8f0; /* 浅色文字（深色背景用） */
/* 改圆角 */
--th-radius-card: 12px; /* 圆润 */
--th-radius-card: 0px; /* 直角 */
--th-radius-card: 24px; /* 很圆润 */
改完即时预览。 满意后保存，前台生效。
常见配色方案
极简黑白：
--th-color-primary: #000000;
--th-color-bg: #ffffff;
--th-color-text: #111111;
暗色模式：
--th-color-primary: #60a5fa;
--th-color-bg: #0f172a;
--th-color-text: #e2e8f0;
暖色调：
--th-color-primary: #d97706;
--th-color-bg: #fffbeb;
--th-color-text: #451a03;
Level 2：改布局（30 分钟）
如果只改颜色不够，可以修改主题的 CSS 样式。
操作
控制台 → 主题管理 → 编辑当前主题 → 编辑 style.css
常见修改
调整文章宽度：
.article-content {
max-width: 720px; /* 默认，适合阅读 */
max-width: 900px; /* 更宽，适合有代码的文章 */
max-width: 600px; /* 更窄，适合纯文字 */
}
调整字体：
body {
font-family: 'Inter', -apple-system, sans-serif; /* 西文 */
font-family: 'Noto Sans SC', sans-serif; /* 中文 */
font-family: 'Source Han Serif', serif; /* 衬线体 */
}
调整间距：
.article-content p {
line-height: 1.8; /* 行高，1.6-2.0 都可以 */
margin-bottom: 1.5em; /* 段落间距 */
}
代码块样式：
pre {
background: #1e293b; /* 深色背景 */
color: #e2e8f0; /* 浅色文字 */
border-radius: 8px; /* 圆角 */
padding: 16px; /* 内边距 */
font-size: 14px; /* 字号 */
}
Level 3：做新主题（半天）
从零开始做一个完整的主题。
主题目录结构
my-theme/
├── theme.json # 元信息
├── entries/
│ ├── blog.html # 博客列表页
│ ├── article.html # 文章详情页
│ └── category.html # 分类页
├── assets/
│ ├── style.css # 样式
│ └── script.js # 交互（可选）
└── README.md
theme.json
{
"name": "my-theme",
"version": "1.0.0",
"author": "你的名字",
"description": "我的自定义主题",
"preview": "preview.png"
}
entries/blog.html（列表页模板）
<div class="blog-list">
{{#each articles}}
<article class="article-card">
<h2><a href="/p/{{slug}}">{{title}}</a></h2>
<p class="meta">{{date}} · {{category}}</p>
<p class="summary">{{summary}}</p>
<div class="tags">
{{#each tags}}
<span class="tag">{{this}}</span>
{{/each}}
</div>
</article>
{{/each}}
</div>
entries/article.html（文章页模板）
<article class="article-detail">
<header>
<h1>{{title}}</h1>
<p class="meta">
{{date}} · {{category}}
{{#each tags}}<span class="tag">{{this}}</span>{{/each}}
</p>
</header>
<div class="content">
{{{content}}}
</div>
{{#if backlinks}}
<section class="backlinks">
<h3>🔗 被以下文章引用</h3>
<ul>
{{#each backlinks}}
<li><a href="/p/{{slug}}">{{title}}</a></li>
{{/each}}
</ul>
</section>
{{/if}}
</article>
assets/style.css（样式）
:root {
--th-color-primary: #2563eb;
--th-color-bg: #ffffff;
--th-color-text: #1a1a2e;
--th-font-body: 'Inter', sans-serif;
--th-radius-card: 8px;
}
body {
font-family: var(--th-font-body);
background: var(--th-color-bg);
color: var(--th-color-text);
max-width: 800px;
margin: 0 auto;
padding: 2rem;
}
.article-card {
border: 1px solid #e5e7eb;
border-radius: var(--th-radius-card);
padding: 1.5rem;
margin-bottom: 1rem;
}
.article-card h2 a {
color: var(--th-color-text);
text-decoration: none;
}
.tag {
background: var(--th-color-primary);
color: white;
padding: 2px 8px;
border-radius: 4px;
font-size: 0.8em;
}
打包安装
# 打包成 zip
cd my-theme && zip -r ../my-theme.zip . && cd ..
# 上传到控制台
控制台 → 主题管理 → 上传 zip → 安装
不需要编译、不需要构建工具。 zip 打包，上传即安装。
主题开发检查清单
开发完成后，检查以下内容：
- [ ] 博客列表页正常渲染
- [ ] 文章详情页正常渲染
- [ ] 分类页正常渲染
- [ ] 搜索功能可用
- [ ] 双链跳转正常
- [ ] 反向链接显示正常
- [ ] 移动端适配
- [ ] --th-* 令牌生效
- [ ] 无 JS 报错
- [ ] RSS / sitemap 不受影响
完整的主题协议见
[[17 款主题 + 主题协议：博客的门面自由]]。第三方开发规范参考[[博客主题开发规范]]。