框架

Frame 将图片和演示内容包裹在带边框的容器中，并可添加标题。

屏幕截图显示的是英文界面。

使用 Frame 的场景：

• 让屏幕截图和 UI 图片呈现完整美观的效果
• 添加标题，解释读者看到的内容
• 区分演示输出和常规内容
• 保持整个文档的视觉一致性

用法

<Frame caption="Architecture diagram">

  ![Diagram](/images/city-skyline.jpg)

</Frame>

基本 Frame

<Frame>

  ![City skyline](/images/city-skyline.webp)

</Frame>

添加标题

在框架下方添加标题：

<Frame caption="New York City at dusk">

  ![City skyline](/images/city-skyline.webp)

</Frame>

包裹其他内容

Frame 不仅适用于图片，也适用于任何内容：

✓ Build completed successfully
✓ 42 pages generated
✓ Deployed to production

不应使用 Frame 的场景

• 内联装饰图片 - 插图使用常规 Markdown 图片即可
• 图标或小型图形 - Frame 会增加不必要的视觉负担
• 随文本排列的图片 - Frame 会形成视觉分隔；独立展示的视觉内容更适合使用 Frame

最佳实践

• 保持标题简洁 - 用一句话解释读者看到的内容
• 保持一致 - 如果为一个屏幕截图使用 Frame，就为所有屏幕截图使用 Frame，以保持视觉一致性
• 不要过度使用 Frame - 仅为重要的视觉内容保留 Frame，不要为页面上的每张图片都使用

属性

下一步？