框架

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 会形成视觉分隔，适合用于独立展示的视觉内容

最佳实践

• 说明文字要简洁：用一句话解释读者看到的内容
• 保持一致：如果为一张屏幕截图添加框架，就为所有屏幕截图添加框架
• 避免过度使用框架：仅为重要视觉内容添加框架，而不是页面上的每张图片

属性

下一步？