跳转至主内容
Version: 2.0.0-beta.0

资源

有些时候您需要在 Markdown 文件中直接链入静态资源,我们一般将其放在 Markdown 文件所在的相同目录。

我们预先设置了 Webpack 加载器以处理较为常见的文件类型。这样在您加载文件时,您仅需要添加文件网址,Webpack 就会将其自动复制到输出目录中。

请思考如下文件结构:

# 您的文档/website/docs/myFeature.mdx
# 您想用的一些资源/website/docs/assets/docusaurus-asset-example-banner.png/website/docs/assets/docusaurus-asset-example-pdf.pdf

图像#

您可以在 Markdown 中使用图像,或是 require 后使用 JSX 图像标签:

# 我的 Markdown 页面
<img  src={require('./assets/docusaurus-asset-example-banner.png').default}  alt="示例横幅"/>
或者
![示例横幅](./assets/docusaurus-asset-example-banner.png)

您也可以使用 ES 导入语法:

# 我的 Markdown 页面
import myImageUrl from './assets/docusaurus-asset-example-banner.png';
<img src={myImageUrl} alt="我的图像替代文字" />

这样就能显示图片:

我的图像替代文字

note

If you are using @docusaurus/plugin-ideal-image, you need to use the dedicated image component, as documented.

文件#

同样,您可以先通过 require 链入资源文件,再使用返回图像、链接等资源的网址。

# 我的 Markdown 页面
<a  target="_blank"  href={require('./assets/docusaurus-asset-example-pdf.pdf').default}>  下载此 PDF</a>

[使用 Markdown 下载此 PDF](./assets/docusaurus-asset-example-pdf.pdf)
下载此 PDF

使用 Markdown 下载此 PDF

内联 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 主题图像"  sources={{    light: useBaseUrl('/img/docusaurus_light.svg'),    dark: useBaseUrl('/img/docusaurus_dark.svg'),  }}/>;
Docusaurus 主题图像Docusaurus 主题图像