资源
Sometimes you want to link to static assets directly from Markdown files, and it is convenient to co-locate the asset next to the Markdown file using it.
我们预先设置了 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="示例横幅"/>
或者

您也可以使用 ES 导入语法:
# 我的 Markdown 页面
import myImageUrl from './assets/docusaurus-asset-example-banner.png';
<img src={myImageUrl} alt="我的图像替代文字" />
这样就能显示图片:
note
若您使用 @docusaurus/plugin-ideal-image,您则需要根据其文档所述使用独立的图像组件。
#
文件同样,您可以先通过 require 链入资源文件,再使用返回图像、链接等资源的网址。
# 我的 Markdown 页面
<a target="_blank" href={require('./assets/docusaurus-asset-example-pdf.pdf').default}> 下载此 PDF</a>
或
[使用 Markdown 下载此 PDF](./assets/docusaurus-asset-example-pdf.pdf)
#
内联 SVGDocusaurus 原生支持内嵌 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'), }}/>;