跳到主要内容

图片与静态资源

图片放在 static/ 下,按用途分子目录;在 MDX 中用 公开 URL@site/static/... 的 import 引用。本项目为图片配置 webpack 路径别名。

1. 目录约定

my-docs/static/ 下路径用途对外 URL 前缀
img/site/全站:Logo、首页图、页脚等/img/site/
img/shared/中英文共用图(图内无某种语言 UI)/img/shared/
img/zh/仅中文截图 / 标注图/img/zh/
img/en/仅英文截图 / 标注图/img/en/

能共用就优先 shared;仅当图本身与语言强相关时再拆到 zh / en

2. 在 MDX 中引用

方式 A — 公开 URL

<img src="/img/shared/your-diagram.png" alt="说明" />

方式 B — import + @site/static

import diagram from '@site/static/img/shared/your-diagram.png';

<img src={diagram} alt="说明" />

@site 指向项目根目录,其后路径与 static/ 下结构一致。

3. 命名

文件名使用小写 kebab-case,语义清晰(例如 dam-8ro-terminal-block.png)。

英文说明见 i18n/en/docusaurus-plugin-content-docs/current/image-assets-guide.md