网站
Content - 内容排版
格式化代码、剪贴板操作、步骤序列与富文本元素。
用法
什么时候用它
为传入的文字和高亮代码提供一致的阅读与复制方式。
来自@misoto22/folio/website
import { StepSequence } from '@misoto22/folio/website'说明
流程序列的原始顺序、编号和注释均由应用提供。
实践建议
推荐
- 提供本地化标签、含义明确的链接和有用的图片替代文本。
避免
- 不要在展示组件中放入服务凭据、路由逻辑或后端模型。
示例
带代码的操作流程
步骤序列和代码面板共用同一阅读区域。步骤顺序和高亮代码节点由应用传入，复制操作使用实际渲染的源码文本。
Collect
Review
Publish
Review each step before publishing.
JavaScript
const readingList = records.filter(record => record.reviewed)组成部分
在调用处组合，而不是通过 props 配置——所以这个组件没有预料到的布局，依然表达得出来。
ContentTable
将完整的文章表格放入可通过键盘滚动的区域。
同时接受 TableHTMLAttributes<HTMLTableElement> 里的全部属性，它们会直接透传给底层元素，不再逐条列出。
ExternalLinkMark
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| children | ReactNode | '↗' | — |
ClipboardButton
仅在浏览器接受剪贴板写入后确认复制成功。
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| copiedLabel必填 | string | — | |
| copyLabel必填 | string | — | |
| className | string | — | |
| getText | () => string | 由应用负责高亮时，在用户触发复制的瞬间读取当前渲染的代码。 | |
| text | string | — |
CodePanel
用于 Markdown 和 MDX 的代码面板，保留应用提供的高亮节点。
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| children必填 | ReactNode | — | |
| copiedLabel必填 | string | — | |
| copyLabel必填 | string | — | |
| framed | boolean | true | 如果应用的渲染器已提供外层 figure，则设为 false。 |
| languageLabel | ReactNode | 显示标签，已由应用从高亮器的语言标识映射而来。 | |
| preProps | HTMLAttributes<HTMLPreElement> | — |