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

资源

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 就会将其自动复制到输出目录中。

请思考如下文件结构:

# Your doc
/website/docs/myFeature.mdx

# Some assets you want to use
/website/docs/assets/docusaurus-asset-example-banner.png
/website/docs/assets/docusaurus-asset-example.docx

图像

You can display images in three different ways: Markdown syntax, JSX require or ES imports syntax.

Display images using simple Markdown syntax:

![Example banner](./assets/docusaurus-asset-example-banner.png)

Display images using inline CommonJS require in JSX image tag:

<img
src={require('./assets/docusaurus-asset-example-banner.png').default}
alt="Example banner"
/>

Display images using ES import syntax and JSX image tag:

import myImageUrl from './assets/docusaurus-asset-example-banner.png';

<img src={myImageUrl} alt="Example banner" />

这样就能显示图片:

我的图像替代文字

note

若您使用 @docusaurus/plugin-ideal-image,您则需要根据其文档所述使用独立的图像组件。

文件

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

# My Markdown page

<a
target="_blank"
href={require('./assets/docusaurus-asset-example.docx').default}>
Download this docx
</a>

or

[Download this docx using Markdown](./assets/docusaurus-asset-example.docx)
Download this docx

Download this docx 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 supports themed images: the ThemedImage component (included in the themes) allows you to switch the image source based on the current theme.

import ThemedImage from '@theme/ThemedImage';

<ThemedImage
alt="Docusaurus 主题图像"
sources={{
light: useBaseUrl('/img/docusaurus_light.svg'),
dark: useBaseUrl('/img/docusaurus_dark.svg'),
}}
/>;
Docusaurus 主题图像Docusaurus 主题图像