引用静态资源

有时你需要在 Markdown 文件中直接链接到静态资源，因此，将静态资源与 markdown 文件放在一起就会很方便。

我们已经为 Webpack 设置了相应的加载器（loaders）来处理大多数常见的文件类型，以便在导入（import）文件时获得其 url，并将静态资源自动复制到输出目录中。

假设有以下文件结构：

# 你的文档
/website/docs/myFeature.mdx
# 你要是用到的静态资源
/website/docs/assets/docusaurus-asset-example-banner.png
/website/docs/assets/docusaurus-asset-example-pdf.pdf

图片

你可以在 Markdown 中直接添加图片链接，或者通过 require 函数和 JSX 语法来使用图片：

# My Markdown page
<img
  src={require('./assets/docusaurus-asset-example-banner.png').default}
  alt="Example banner"
/>
或者
![Example banner](./assets/docusaurus-asset-example-banner.png)

ES 的 import 语法也可以使用：

# My Markdown page
import myImageUrl from './assets/docusaurus-asset-example-banner.png';
<img src={myImageUrl} alt="My image alternative text" />

以下方式也可以显示图片：

note

如果你使用了 @docusaurus/plugin-ideal-image 插件，则需要使用专用的图片组件，请参考相应的文档。

其他类型的文件

同样的，你可以通过 require 函数获得文件的 url 并链接到该文件，可以用于视频等文件。

# My Markdown page
<a
  target="_blank"
  href={require('./assets/docusaurus-asset-example-pdf.pdf').default}>
  Download this PDF
</a>
或者
[Download this PDF using Markdown](./assets/docusaurus-asset-example-pdf.pdf)

Download this PDF using Markdown

内联 SVG

Docusaurus 内置对内联 SVG 的支持。

import DocusaurusSvg from './docusaurus.svg';
<DocusaurusSvg />;

如果你希望通过 CSS 来修改 SVg 图片的某些部分，这将很有用。例如，你可以根据当前主题更改 SVG 的某一部分的颜色。

import DocusaurusSvg from './docusaurus.svg';
<DocusaurusSvg className="themedDocusaurus" />;

html[data-theme='light'] .themedDocusaurus [fill='#FFFF50'] {
  fill: greenyellow;
}
html[data-theme='dark'] .themedDocusaurus [fill='#FFFF50'] {
  fill: seagreen;
}

主题图片

Docusaurus 支持主题图片，也就是利用 ThemedImage 组件（已包含在 classic/bootstrap 主题中）可以让你根据当前所使用的主题切换图片。

import ThemedImage from '@theme/ThemedImage';
<ThemedImage
  alt="Docusaurus themed image"
  sources={{