跳到正文
misoto22 design

容器

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;放进去的组件仍然用自己的类,因为这一层的每条规则都是优先级极低的元素选择器,工具类稳赢。

属性

Article props
属性类型默认值说明
as'article' | 'div' | 'section'渲染成哪个元素。默认 `article`;只是一个片段就传 `div`。
htmlstringMarkdown 或 MDX 管线渲染出来的 HTML。 只接受可信标记。这里会设置 `dangerouslySetInnerHTML`,所以内容必须来自你自己掌控的地方——仓库里的文章、你自己写的 CMS——绝不能来自读者。不可信的 Markdown 必须在到达这里之前先净化;那是管线的决定,不是组件的决定,把净化器塞进一个只管样式的原语里,既放错了地方,也最容易做错。

同时接受 HTMLAttributes<HTMLElement> 里的全部属性,它们会直接透传给底层元素,不再逐条列出。

无障碍

  • 默认渲染成 <article>,所以整篇内容是读者可以直接跳到的地标。
  • 每个标题都带 scroll-margin,锚点跳过去时不会被固定的顶栏盖住。
  • 样式全是低优先级的元素选择器,所以放进去的组件仍然用自己的类。