mirror of
https://github.com/mintlify/docs.git
synced 2026-09-14 13:35:46 +08:00
locadex-agent[bot]
d7096d55cd
Co-authored-by: locadex-agent[bot] <217277504+locadex-agent[bot]@users.noreply.github.com>
86 lines
2.7 KiB
Plaintext
86 lines
2.7 KiB
Plaintext
---
|
||
title: "添加媒体"
|
||
description: "在文档中上传、管理和使用图片及其他资源。"
|
||
keywords: ["editor", "media", "images", "assets"]
|
||
---
|
||
|
||
使用媒体管理器在文档中上传并管理图片和其他资源。
|
||
|
||
<div id="access-the-media-manager">
|
||
## 访问媒体管理器
|
||
</div>
|
||
|
||
在编辑器左侧面板底部打开媒体管理器。
|
||
|
||
<Frame>
|
||
<img src="/images/editor/images-and-media-light.png" alt="浅色模式下侧边栏中的媒体管理器" className="block dark:hidden" />
|
||
<img src="/images/editor/images-and-media-dark.png" alt="深色模式下侧边栏中的媒体管理器" className="hidden dark:block" />
|
||
</Frame>
|
||
|
||
<div id="upload-assets">
|
||
## 上传资源
|
||
</div>
|
||
|
||
将文件从你的电脑拖放到媒体管理器中，或点击 **Add** 按钮从电脑选择文件进行上传。
|
||
|
||
**支持的文件类型：**
|
||
|
||
- **图片**：PNG、JPG、JPEG、SVG、GIF、WebP
|
||
- **视频**：MP4、WebM
|
||
- **字体**：TTF、WOFF、WOFF2
|
||
- **其他**：PDF、ICO（网站图标）
|
||
|
||
<div id="organize-assets">
|
||
## 整理资源
|
||
</div>
|
||
|
||
使用文件夹对相关图片进行分组、区分浅色和深色模式资源，或按功能区域进行组织。
|
||
|
||
要新建文件夹，点击 **Add**。
|
||
|
||
<div id="move-assets">
|
||
### 移动资源
|
||
</div>
|
||
|
||
通过拖放资源即可在文件夹之间移动。移动资源时，文件路径会自动更新。
|
||
|
||
<div id="rename-assets">
|
||
### 重命名资源
|
||
</div>
|
||
|
||
要重命名资源，点击资源名称旁边的 **...** 按钮，然后点击 **Rename**。对已重命名资源的引用会自动更新。
|
||
|
||
<div id="delete-assets">
|
||
### 删除资源
|
||
</div>
|
||
|
||
要删除某个资源，点击资源名称旁边的 **...** 按钮，然后点击 **Delete**。
|
||
|
||
<div id="use-media-in-documentation">
|
||
## 在文档中使用媒体内容
|
||
</div>
|
||
|
||
<div id="insert-images">
|
||
### 插入图片
|
||
</div>
|
||
|
||
1. 将光标移动到你希望插入图片的位置。
|
||
2. 按 <kbd>/</kbd> 打开组件菜单。
|
||
3. 选择 **Image**。
|
||
4. 在媒体管理器中选择图片。
|
||
|
||
<div id="add-alt-text">
|
||
### 添加替代文本（alt text）
|
||
</div>
|
||
|
||
1. 将鼠标悬停在图片上时，点击出现的 **...** 按钮。
|
||
2. 在 **编辑图像属性（Edit Image Attributes）** 面板中添加描述性的替代文本。
|
||
|
||
<div id="best-practices">
|
||
## 最佳实践
|
||
</div>
|
||
|
||
- **使用描述性名称**：为文件使用清晰、具有描述性的名称。例如，将文件命名为 `api-dashboard-light.png`，而不是 `img1.png`。
|
||
- **添加替代文本（alt text）**：始终为图像提供描述性的替代文本，以提升可访问性和 SEO（搜索引擎优化）。
|
||
- **整理文件夹**：将相关资源分组放入文件夹中，便于管理。
|
||
- **使用合适的格式**：PNG 适用于带透明度的图形，JPG 适用于照片，SVG 适用于图标和徽标。 |