- 分組
- 讲解 · 一张图配一段说明
- 元件
PhotoSplit·#photo-split- 互動
- build：要点逐条出现
適合
- 介绍一个对象或概念，图片帮助理解
- 章节里节奏需要一张“透气”的页
不適合
- 图片是需要细看的截图：用 Screenshot 或 DeviceFrame
- 要点超过 3 条：拆页或用 NumberedColumns
內容上限
| 1 | title ≤ 3 行 × 9 字 |
| 2 | lead ≤ 60 字 |
| 3 | points 0–3 条：title ≤ 10 字，body ≤ 36 字 |
| 4 | 有 lead 时 points ≤ 3 条，body 都写满时最好 ≤ 2 条 |
欄位
| 欄位 | 型別 | |
|---|---|---|
image · 必填 | { src, alt, credit?, focus? } | 竖图或方图更合适 |
side | 'left' | 'right' | 图片在哪一边，默认 left |
kicker · 必填 | string | 小节名 |
title · 必填 | string | string[] | 标题 |
lead | string | 导语 |
points | { title, body }[] | 编号要点，每条一个 build 步骤 |
source | string | 事实出处 |
範例程式碼
<PhotoSplit image={{ src: coral, alt: '…' }} side="left" kicker="先认识它" title={['珊瑚不是石头，', '是动物']} lead="…" points={[{ title: '水螅体', body: '…' }]} />