# 添加媒体 (/zh/editor/media)

<!-- agent-signals: reading_time_min: 1 · est_tokens: 780 · updated: 2026-07-30 -->
Related: [创建和编辑页面](/zh/editor/pages.md), [组织导航](/zh/editor/navigation.md), [配置](/zh/editor/configurations.md), [实时预览](/zh/editor/live-preview.md), [在 Web 编辑器中协作](/zh/editor/collaborate.md), [评论](/zh/editor/comments.md)

<div id="supported-file-types">
  ## 支持的文件类型 [#支持的文件类型]
</div>

* **图片**：PNG、JPG、JPEG、GIF、WebP（最大 20 MB）
* **视频**：MP4、WebM (最大 20 MB)
* **字体**：TrueType (TTF) 、WOFF、WOFF2
* **其他**：PDF、ICO (网站图标)

<div id="add-media-to-a-page">
  ## 在页面中添加媒体 [#在页面中添加媒体]
</div>

<div id="drag-and-drop">
  ### 拖放 [#拖放]
</div>

将媒体从你的电脑或资源管理器拖放到页面上。在可视化模式下，图片或视频会以内联形式插入。在 Markdown 模式下，编辑器会在你的光标位置插入路径。图片会保存到 `images/` 文件夹的根目录下，视频会保存到 `videos/` 文件夹的根目录下。

<div id="slash-command">
  ### 斜杠命令 [#斜杠命令]
</div>

输入 <kbd>/image</kbd> 以打开图片菜单，或输入 <kbd>/video</kbd> 以打开视频菜单。上传新的媒体文件或从现有文件中进行选择。

<div id="embed">
  ### 嵌入 [#嵌入]
</div>

输入 <kbd>/embed</kbd> 并粘贴 YouTube、Loom 或 Vimeo 的 URL。编辑器会自动识别提供方并生成对应的 iframe。在斜杠菜单中搜索 `youtube`、`yt`、`loom` 或 `vimeo` 也会显示 **Embed** 命令。

对于其他嵌入内容，输入 <kbd>/embed</kbd> 并切换到 **手动嵌入** 以编写自定义 HTML。

<div id="upload-files">
  ### 上传文件 [#上传文件]
</div>

使用侧边栏中的文件浏览器上传或搜索文件。将文件拖放到文件夹中，以便整理媒体资源。

<Frame>
  <img src="/_assets/41068cf4ce81f10653073efcecbb63e8ae1e07b68099356e4dc02c4f6e9d9a9a" alt="在编辑器侧边栏菜单中打开的文件浏览器。" className="block dark:hidden" />

  <img src="/_assets/b362613c14522f84ef5d95f9ab37de72cb32c288e9a4bd21d150765cabb2cd94" alt="在编辑器侧边栏菜单中打开的文件浏览器。" className="hidden dark:block" />
</Frame>

<div id="format-images">
  ## 格式化图片 [#格式化图片]
</div>

在可视编辑模式下插入图片后，将鼠标悬停在图片上，会显示一个带有格式选项的工具栏。

* **浅色/深色预览**：在浅色和深色模式之间切换，以查看图片在每种主题下的显示效果。
* **对齐方式**：将图片对齐方式设置为左对齐、居中、右对齐或全宽。
* **Frame**：将图片包裹在 `<Frame>` 组件中以添加边框和背景。
* **设置**：替换图片或更新其 alt 文本（替代文本）。

<div id="manage-assets">
  ## 管理资源 [#管理资源]
</div>

<div id="organize-with-folders">
  ### 使用文件夹整理 [#使用文件夹整理]
</div>

在文件资源管理器中点击 &#x2A;*+** 按钮创建新文件夹。在文件树中拖拽文件和文件夹以重新调整它们的结构。

<div id="rename-and-edit-assets">
  ### 重命名和编辑资源 [#重命名和编辑资源]
</div>

将鼠标悬停在资源上，点击 &#x2A;*...** 按钮，以重命名文件或更新其 alt 文本。

<div id="delete-assets">
  ### 删除资源 [#删除资源]
</div>

将鼠标悬停在某个资源上，然后点击 <Icon icon="<svg xmlns=&#x22;http://www.w3.org/2000/svg&#x22; viewBox=&#x22;0 0 24 24&#x22; fill=&#x22;none&#x22;><path d=&#x22;M19.5 5.5L18.8803 15.5251C18.7219 18.0864 18.6428 19.3671 18.0008 20.2879C17.6833 20.7431 17.2747 21.1273 16.8007 21.416C15.8421 22 14.559 22 11.9927 22C9.42312 22 8.1383 22 7.17905 21.4149C6.7048 21.1257 6.296 20.7408 5.97868 20.2848C5.33688 19.3626 5.25945 18.0801 5.10461 15.5152L4.5 5.5&#x22; stroke=&#x22;currentColor&#x22; stroke-linecap=&#x22;round&#x22; stroke-width=&#x22;1.5&#x22;/><path d=&#x22;M3 5.5H21M16.0557 5.5L15.3731 4.09173C14.9196 3.15626 14.6928 2.68852 14.3017 2.39681C14.215 2.3321 14.1231 2.27454 14.027 2.2247C13.5939 2 13.0741 2 12.0345 2C10.9688 2 10.436 2 9.99568 2.23412C9.8981 2.28601 9.80498 2.3459 9.71729 2.41317C9.32164 2.7167 9.10063 3.20155 8.65861 4.17126L8.05292 5.5&#x22; stroke=&#x22;currentColor&#x22; stroke-linecap=&#x22;round&#x22; stroke-width=&#x22;1.5&#x22;/></svg>" /> 删除按钮。

<div id="best-practices">
  ## 最佳实践 [#最佳实践]
</div>

* **使用描述性名称**：为文件使用清晰、具有描述性的名称。例如，将文件命名为 `api-dashboard-light.png`，而不是 `img1.png`。
* **添加替代文本（alt text）**：为图像提供描述性的替代文本，以提升可访问性和 SEO（搜索引擎优化）。
* **通过文件夹进行组织**：将相关资源分组管理，例如浅色和深色模式的不同版本，或某个特定功能区域使用的资源。
* **使用合适的格式**：PNG 适用于带透明度的图形，JPG 适用于照片，SVG 适用于图标和徽标（你无法通过编辑器上传 SVG 文件，但可以通过 Git 将其添加到存储库中）。