网站
Reading - 阅读页面
文章与项目布局、目录、媒体和安装说明。
用法
什么时候用它
来自@misoto22/folio/website
import { DetailMasthead } from '@misoto22/folio/website'实践建议
推荐
- 提供本地化标签、含义明确的链接和有用的图片替代文本。
避免
- 不要在展示组件中放入服务凭据、路由逻辑或后端模型。
示例
文章与目录
阅读布局组合了具有语义的发布日期、章节和目录。相邻条目的导航仍是应用提供的普通链接，并保留有意义的标题。
A practice of attention
A few observations from the daily walk.
Notice
A familiar route still changes with the light. Record one detail before naming the whole scene.
Return
Compare what you wrote on the next visit. The difference often matters more than the first impression.
组成部分
在调用处组合，而不是通过 props 配置——所以这个组件没有预料到的布局，依然表达得出来。
ReadingLayout
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| outline | ReactNode | — |
同时接受 HTMLAttributes<HTMLDivElement> 里的全部属性，它们会直接透传给底层元素，不再逐条列出。
ReadingSection
seamless 让结构化子内容直接延续章节分隔线，避免重复绘制边线。
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| caption | ReactNode | — | |
| compact | boolean | — | |
| lead | ReactNode | — | |
| seamless | boolean | — | |
| title | ReactNode | — |
同时接受 Omit<HTMLAttributes<HTMLElement>, 'title'> 里的全部属性，它们会直接透传给底层元素，不再逐条列出。
ReadingLead
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| children必填 | ReactNode | — | |
| description | ReactNode | — | |
| muted | ReactNode | — |
RecordPager
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| label必填 | string | — | |
| next | ReadingPagerItem | — | |
| previous | ReadingPagerItem | — |
isSelfNumbered
这个组件没有自己的属性。
numberToc
这个组件没有自己的属性。
TableOfContents
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| items必填 | OutlineItem[] | — | |
| label必填 | string | — | |
| expanded | boolean | false | — |
| numbering | 'auto' | 'none' | 'auto' | — |
| onNavigate | (id: string) => void | — |
MobileOutline
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| closeLabel必填 | string | — | |
| items必填 | OutlineItem[] | — | |
| openLabel必填 | string | — | |
| title必填 | string | — |
ReadingProgress
这个组件没有自己的属性。
AuthorPanel
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| name必填 | string | — | |
| avatar | ReactNode | — | |
| bio | ReactNode | — | |
| links | ReactNode | — | |
| role | ReactNode | — |
ReadingFigure
阅读页图片可使用 fit="contain" 保留原始构图，而不裁切成固定比例。
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| media必填 | ReactNode | — | |
| captionEnd | ReactNode | — | |
| captionStart | ReactNode | — | |
| fit | 'cover' | 'contain' | 'cover' | — |
| ratio | string | '16 / 8' | — |
| width | 'page' | 'fill' | 'page' | — |
MediaPlayback
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| fallback必填 | ReactNode | — | |
| label必填 | string | — | |
| pauseLabel必填 | string | — | |
| playLabel必填 | string | — | |
| src必填 | string | — | |
| poster | string | — |
ActionBand
项目末尾的访问入口，突出主要操作，并弱化辅助操作。
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| title必填 | ReactNode | — | |
| actions | ReactNode | — | |
| description | ReactNode | — | |
| eyebrow | ReactNode | — |
FeaturePairs
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| items必填 | { id?: string; label?: ReactNode; title?: ReactNode; description: ReactNode }[] | — |
DevicePreview
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| kind必填 | 'browser' | 'phone' | — | |
| media必填 | ReactNode | — | |
| caption | ReactNode | — | |
| label | string | — |
PreviewPair
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| desktop必填 | ReactNode | — | |
| mobile | ReactNode | — |
CommandTabs
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| copiedLabel必填 | string | — | |
| copyLabel必填 | string | — | |
| label必填 | string | — | |
| tabs必填 | CommandTab[] | — | |
| footer | ReactNode | — |
ReadingSurface
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| numbered | boolean | — |
同时接受 HTMLAttributes<HTMLDivElement> 里的全部属性，它们会直接透传给底层元素，不再逐条列出。
ReadingForm
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| inline | boolean | — |
同时接受 React.FormHTMLAttributes<HTMLFormElement> 里的全部属性，它们会直接透传给底层元素，不再逐条列出。
ArchitectureColumns
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| columns必填 | { title: string; connected?: boolean; nodes: ArchitectureColumnNode[] }[] | — | |
| foundation | ArchitectureColumnNode[] | — |
TokenLine
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| items必填 | { label: ReactNode; strong?: boolean; icon?: ReactNode }[] | — | |
| label | ReactNode | — | |
| separator | string | '·' | — |
ContentFigure
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| children必填 | ReactNode | — | |
| caption | ReactNode | — | |
| wide | boolean | — |
ReadingPage
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| children必填 | ReactNode | — |
同时接受 HTMLAttributes<HTMLElement> 里的全部属性，它们会直接透传给底层元素，不再逐条列出。
CommandSnippet
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| code必填 | string | — | |
| copiedLabel必填 | string | — | |
| copyLabel必填 | string | — | |
| className | string | — | |
| pieces | CommandPiece[] | — |