跳到主要内容

引用静态资源

有时你需要在 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" />

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

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

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={{
light: useBaseUrl('/img/docusaurus_light.svg'),
dark: useBaseUrl('/img/docusaurus_dark.svg'),
}}
/>;
Docusaurus themed imageDocusaurus themed image