容器
Article 长文
长文阅读面——Markdown 能产出的一切,都套上这套系统的字体、颜色和线。
什么时候用它
示例
default
A heading, in the editorial serif
The opening paragraph is marked, not guessed — a stylesheet that decides whatever came first is a standfirst gets it wrong the moment a post opens on an image.
Body copy sits on the reading measure and nothing wider, with a link, some inline code and a strong word in it.
Depth is a hairline and a change of ground, never a blur.The White Reset, law 2
- The list marker is a hairline dash, not a filled disc.
- A filled circle in this system means a status dot.
说明
长文阅读面。
Markdown 管线能产出的一切——标题、正文、列表、表格、引文、代码、图注、脚注、MathML——都套上这套系统的字体、颜色和线。样式写在 article.css 里而不是一串 class 里,因为它的输入不是 JSX:标记是以字符串到达的,没有任何组件可以挂 class,所以约定只能是元素名本身。
那个文件也单独发布为 @misoto22/design/article.css,所以一个自带 Markdown 管线的站点可以只拿阅读面、不拿组件——这正是它存在的场景。三个站各写一份正文样式表,就是三份会各自漂移的正文样式表。
两种用法都行:传 html 渲染字符串,或者直接给 children 写真元素。两者混排的文章——正文中间插一张 Diagram——按顺序渲染各个块,每块各给一个 Article;放进去的组件仍然用自己的类,因为这一层的每条规则都是优先级极低的元素选择器,工具类稳赢。
属性
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| as | 'article' | 'div' | 'section' | 渲染成哪个元素。默认 `article`;只是一个片段就传 `div`。 | |
| html | string | Markdown 或 MDX 管线渲染出来的 HTML。 只接受可信标记。这里会设置 `dangerouslySetInnerHTML`,所以内容必须来自你自己掌控的地方——仓库里的文章、你自己写的 CMS——绝不能来自读者。不可信的 Markdown 必须在到达这里之前先净化;那是管线的决定,不是组件的决定,把净化器塞进一个只管样式的原语里,既放错了地方,也最容易做错。 |
同时接受 HTMLAttributes<HTMLElement> 里的全部属性,它们会直接透传给底层元素,不再逐条列出。
无障碍
- 默认渲染成 <article>,所以整篇内容是读者可以直接跳到的地标。
- 每个标题都带 scroll-margin,锚点跳过去时不会被固定的顶栏盖住。
- 样式全是低优先级的元素选择器,所以放进去的组件仍然用自己的类。