素笺主题已开源：v1.1.0 · MIT 许可 · GitHub · GitCode
这个主题没有做"风格"，它做的是一组约束：把能去掉的都去掉，剩下的每一样都必须有理由。下面把这份约束公开——定位、理念、视觉、结构、用户、每一处取舍换回了什么，以及它现在在哪里可以拿到。
一、设计目标与定位
素笺的定位是长文阅读器，不是内容平台，不是个人主页，也不是博客系统里那种"功能齐全"的模板。
它要解决的具体问题是：一个人写了很多年，字还在，但页面已经不能看了。 主题换过三版、插件装了十几个、字体文件丢失、图片链接失效——内容没坏，容器坏了。所以这个主题的第一目标是抗时间：三年后打开，排版还是今天这样，不需要重新适配。
明确的边界：
- 不做首页大图、不做轮播、不做"精选文章"卡片墙
- 不做侧边栏，不做浮动目录，不做回到顶部按钮
- 不做评论、不做点赞、不做阅读量
- 不做响应式"三套布局"，只有一套单栏，靠宽度和字号自适应
这些不是没能力做，是放进来就会破坏第一目标——每多一个组件，未来就多一处需要维护的适配。
二、核心设计理念
1. 屏幕上的纸，不是屏幕上的面板
整站的视觉母题是一张纸：单栏、居中、宽 760px，正文左对齐不居中，段间距 0.85rem，行高 1.6。没有卡片、没有阴影、没有圆角容器包住正文——文字直接落在背景上，唯一的"容器感"来自顶部的站点名和一条分隔线。
背景是纯白 #ffffff，暗色是接近纯黑的 #0c0c0c，都不是灰白灰黑。因为纸感来自对比，不来自渐变。
2. 内容优先于容器
标题用主色，正文用次级色。这一条经常被质疑：正文为什么不用最深的黑？
因为阅读时眼睛需要的是层级，不是最大对比度。#1a1a1a 给标题，#444444 给正文，两者相差一档，视线自然先落在标题上，再滑进正文。如果全部用纯黑，标题和正文会在同一个视觉平面上打架，长文读起来会更累。
同理，链接默认没有下划线，只在 hover 时出现——静态阅读时它不应该打断文字流，只有你打算点它的时候才需要被识别。
3. 语义色只留两个
全站只有两个彩色：金色 #9a7b12（暗色 #d4af37）和红色 #c0392b（暗色 #ff9b8d）。
- 金色只用于当前导航项——它是"你在哪"的指示，一屏之内最多出现一次
- 红色只用于错误态——登录失败、表单校验
其他所有视觉区分都靠黑白灰的明度差完成。这是最容易被破坏的一条规则：一旦金色被用来做按钮、做标签、做强调，它就不再是"位置指示"，而变成了装饰，整站立刻显得廉价。
三、视觉与交互风格
令牌先行。 样式表开头就是一组变量，亮暗两套，其余全部引用：
| 令牌 | 亮色 | 暗色 | 用途 |
|---|---|---|---|
--bg | #ffffff | #0c0c0c | 背景 |
--text | #1a1a1a | #f0f0f0 | 标题、链接 |
--text-light | #444444 | #bbbbbb | 正文 |
--faint | #777777 | #999999 | 日期、分类、页脚 |
--border | #d0d0d0 | #2a2a2a | 分隔线 |
--box-bg | #f7f7f7 | #161616 | 代码块、输入框 |
八个中性令牌加两个语义色，就是全部。改配色只需要改这十行，不用翻六百多行样式表。
字号刻意偏小。 正文基准 0.85rem（约 13.6px），移动端提到 0.95rem。桌面端偏小是刻意的：单栏 760px 下，字号一大，一屏容纳的字数就少，翻页频率变高，长文的"连贯感"会被打断。移动端则相反——手指和距离决定了必须放大，且输入框统一 ≥16px，否则 iOS 聚焦时会把整页放大。
动效几乎为零。 没有淡入、没有位移、没有弹性曲线。只有两处过渡：链接 hover 时下划线出现，主题切换时颜色直接切换（不加 transition，避免切换瞬间出现半黑半白的中间态）。
暗色不是反色。 暗色模式用的是独立一套令牌，不是 filter: invert()。文字降到 #f0f0f0 而不是纯白，因为纯白在暗底上会产生光晕；背景 #0c0c0c 也不是纯黑，避免 OLED 屏上的边缘拖影。切换由一段内联脚本在 <head> 里完成，在首次绘制前就给 <html> 加上 dark 类，所以不会闪白——这是暗色模式最常见的体验事故。
键盘可达。 所有可交互元素有 :focus-visible 描边；导航、主题切换按钮、表单控件都能用 Tab 走到。移动端触摸目标不小于 32px。
四、内容结构规划
页面一共七个，每个只干一件事：
| 页面 | 职责 | 为什么需要它 |
|---|---|---|
首页 / | 关于（一段自我介绍）+ 近期文章 + 分页 | 一屏之内知道"这是谁、最近写了什么" |
文章页 /post/:slug | 正文 + 日期分类 + 标签 | 唯一的阅读容器 |
归档 /archive | 按年月分组 | 时间是最可靠的检索维度 |
标签 /tags | 标签总览 + 单标签页 | 主题聚类，比分类更松 |
搜索 /search | 标题、标签、分类、正文全文匹配 | 想找一篇具体的文章时用 |
关于 /about | 独立自我介绍页 | 首页那段太短，需要一个能被外链的地方 |
订阅 /feed.xml | RSS 2.0 | 把读者从算法里接回来 |
信息层级只有三层：站点名 → 页面标题 → 正文。导航五个字以内，不折叠、不下拉、不做汉堡菜单——五个链接放不下的屏幕，也不该在这个主题的考虑范围内。
后台刻意和前台共用一套令牌：同样的黑白灰、同样的字号体系、同样的圆角与描边。写文章的人和读文章的人看到的是同一个世界，切换后台不该像切换了一个产品。
五、目标用户
第一类：写长文的人。 一篇文章两三千字，需要连续阅读不被打断。他们的痛点是大部分主题为"展示"设计，为"阅读"设计的很少。
第二类：讨厌维护的人。 不想装插件、不想升级数据库、不想三年后回来修一次站点。他们的判断标准很简单：这东西明年还需要我管吗？
第三类：在意"自己的东西"的人。 不接受内容存在别人的服务器上、不接受导出要付费、不接受平台改一次版式自己的文章就变形。他们要的是"文件在我手里"。
反过来，这个主题不服务：需要多作者协作的团队、要放广告变现的站点、要商品展示的品牌页、以及习惯"拖拽式建站"的用户——他们需要的是组件库，不是约束。
六、取舍依据
设计的本质是放弃。这张表是每一处"不做"换回来的东西：
| 放弃 | 换回 | 依据 |
|---|---|---|
| 侧边栏、目录、推荐位 | 单栏 760px，视线只有一条竖线 | 长文阅读时，任何横向跳动都是打断 |
| 卡片、阴影、圆角容器 | 文字直接落在纸上，零视觉噪音 | 容器越多，未来越难统一适配 |
| 富交互（动画、滚动效果） | 首屏只有一个 CSS 请求，无 JS 阻塞 | 慢网络与老设备上仍可用 |
| 评论、点赞、阅读量 | 没有数据库、没有第三方脚本、没有跟踪 | 也是"抗时间"的一部分：外部服务会先死 |
| 三套响应式断点布局 | 一套单栏，靠 max-width 与字号自适应 | 断点越多，未来回归测试成本越高 |
| 纯黑正文 | 标题与正文的一档明度差 | 层级比对比度更影响长文可读性 |
| 多色彩强调 | 金色只标位置、红色只标错误 | 语义色一旦泛滥就失去语义 |
有一条是例外：表格没有为了"极简"而砍掉横向滚动。手机端表格用 width: max-content + overflow-x: auto，宁可让用户横向滑动，也不把三列压成竖排——可读性优先于"看起来干净"。
七、预期效果
四件可以被验证的事：
- 打开即读。 首屏无 JavaScript 依赖（那段内联脚本只做暗色判断），无外部字体与统计请求，弱网下也能先看到字。
- 换配色不改结构。 十个令牌改完，亮暗两套视觉同时生效，不需要动任何布局代码。
- 三年后还能跑。 无框架、无构建、无数据库，代码不到 200 KB，依赖为零——它不会因为某个包停止维护而失效。
- 手机端能读完一篇。 375px 宽度下正文 0.95rem、表格可横滑、输入框不触发缩放、触摸目标不小于 32px。
不追的指标也说清楚：不做首屏加载速度竞赛（本来就没有可优化的东西）、不做 Lighthouse 满分（它衡量的是工程指标，不是阅读体验）、不做"设计感"评分——这个主题的目标是让人忘记界面的存在，任何被注意到的设计都是失败的。
八、获取与版本
代码在 GitHub 与 GitCode，MIT 许可，clone 下来就能跑：
git clone https://github.com/liyinwaihe/Sujian.git sujian
cd sujian
cp config.example.json config.json # 改掉里面的 adminPassword
node server.js没有 npm install，没有构建步骤，Node.js ≥ 16 即可。想先看效果，本站就是它跑出来的：blog.liyinwaihe.com。当前版本 v1.1.0，更新记录在仓库的 CHANGELOG.md，改样式只需动 public/style.css 开头的令牌区。有问题或想改点什么，直接去仓库提 issue。
一句话收尾：纸不该抢字的戏。 所有取舍都指向这一条——如果某个元素让人先注意到它自己，那它就该被删掉。
