笔记部件样板：每个元素长什么样
把一篇笔记能用到的部件全部摆在同一页上 —— 页头出自 frontmatter、导语、三种框、表格与判定标签、代码块、插图、页脚收口 —— 每个都标出它在页面的位置和归属的色相。写新笔记时对着这一页抄即可。
1页头不是写出来的
页头上没有一个字来自正文 —— 分类行、标题、摘要、日期、标签，全部由文件顶部的 frontmatter 生成。正文从 meta-row 开始。
这是最容易踩空的一处：照着别的笔记写，很自然会想在正文顶部再敲一遍标题。不要敲 —— 你会得到页面上两个标题。在笔记文件里，h1 这个概念不存在。
几行 frontmatter 各自负责页面上的一块：
| 字段 | 页面上出现在哪 | 必填 |
|---|---|---|
title |
页头最大的那行 | 必填 |
summary |
标题下方那段摘要 | 必填 |
date |
页头日期，兼首页排序 | 必填 |
category |
页头第一行，兼首页分组 | 可省 |
tags |
页头标签，自动生成标签页 | 可省 |
lang |
不显示，只给检索与阅读器 | 可省 |
draft |
不显示；为 true 时整篇不进页面 | 可省 |
可省的四项都有默认值：category 落到 Site notes，tags 为空，lang 为 zh，draft 为 false —— 不写也能构建，但写清楚读者才知道自己看到的是不是作者的本意。
这里讲的是外观，不是原理。frontmatter 在构建期怎么被读取、集合与路由怎么走，写在另一篇 这个站怎么组织 里。
2正文里的六个部件
除段落本身外，正文只有六种部件。每一种都不需要写样式 —— 写下对应的标签或类名，颜色与间距就定了。
2.1 段落、出处标记与引用
段落直接写。要给一句话标出处，就在句末放一个标记：官方文档用 [doc]，会议论文用 [lit]，属于工程判断、没有公开依据的用 [实践]。三个就够了 —— 再多，读者就得额外记住一套编码。
标记是祖母绿的，因为「这句话有依据」属于证据，不属于结构。这条分工贯穿全站：靛蓝管你会点走的东西（分类、链接、章节序号、代码块竖线），祖母绿管你该相信的东西（出处、结论、表格、图号）。
引用别人或强调一句话时用引用块，它的左边线是祖母绿：
版式住在 layout 和两张样式表里，永远不在笔记文件里。
2.2 三种框，三种语气
框只有三种，选错等于说错话。靛蓝的 box note 是范围 —— 划定讨论边界、声明去标识化，属于 housekeeping，不是内容（上面那节末尾就有一个）。琥珀色的 box finding 是缺陷 —— 你踩到了什么、什么条件下会踩到：
templates/new-note.md 是所有新笔记的共同来源，改它等于改以后每一篇。要在某一篇里临时调样式也不行 —— 那会让这一页和其余各页分叉。样式只改 src/styles/note.css 一处。
收口的是祖母绿的 box takeaway，一节最多一个：
选框就是选语气：靛蓝 = 先划范围，琥珀 = 有坑，祖母绿 = 结论。三种都不是装饰，用错会直接误导读者。
2.3 表格与判定标签
表格的顶线、表头底线、末行线都是祖母绿 —— 因为表格承载的是数据，它是证据。表头的淡祖母绿底同理。判定列用 pill：通过 / 视情况 / 不要用，语义与全站一致：祖母绿可以、琥珀有条件、红不行。
给第一列留足宽度。Markdown 表格不会自动分配列宽，内容一长就会断词折行 —— 上面那张表如果第一列写成完整路径，会折成两行，第二行只剩一个词。
2.4 代码块
SAS 和 shell 都不在语法高亮器的语言表里，所以不要用三个反引号的围栏 —— 那样只会得到一片单色。手写 <pre><code>，用三个类上色：cm 注释（灰）、kw 关键字（靛蓝）、mk 字面量（琥珀）。代码块的左侧竖线是靛蓝的，因为它是结构，不是内容。
# 1. 生成骨架，日期自动填今天
npm run new my-note-slug
# 2. 本地看效果，边改边刷
npm run dev
# 3. 发布
git add -A && git commit -m "Add a note" && git push2.5 插图
插图是手写的内联 SVG，必须给 viewBox 与 role / aria-label；内部的 fill 与 stroke 每一个都要显式写 —— 样式表不负责 SVG 内部。配色继续分工：画结构用靛蓝，画证据与结论用祖母绿。
2.6 目录与页脚
左侧抽屉不用维护 —— 页面打开时从正文的 h2 与 h3 现场生成，标题改了就跟着改。页脚则要自己写，它上方那条 2px 祖母绿收口线会自动出现。