静态资源

通常每个网站都需要静态资源:图片、样式表、网站图标(favicon)等。在这种情况下,您可以在项目的根目录下创建一个名为 static 的目录。放入该目录中的每个文件都将被复制到生成的 build 文件夹中,并保留目录层次结构。例如,如果您将名为 sun.jpg 的文件添加到 static 文件夹中,则该文件将被复制到 build/sun.jpg 路径。

这意味着,如果站点的 baseUrl/,则本地路径 /static/img/docusaurus_keytar.svg 对应的图片可以通过 /img/docusaurus_keytar.svg 网络路径进行访问。

引用静态资源

您可以在代码中引用 static 文件夹中的资源。您可以使用硬编码的绝对路径,即以斜杠 / 开头的路径,但请记住,如果不是 / 开头,则要包含 baseUrl 变量。但是,如果您在配置中更改 baseUrl 将导致失败。

更好的方法是使用 useBaseUrl 工具函数,该函数将 baseUrl 附加到您的路径中。

JSX 示例

MyComponent.js
import useBaseUrl from '@docusaurus/useBaseUrl';
<img
alt="Docusaurus with Keytar"
src={useBaseUrl('img/docusaurus_keytar.svg')}
/>;

您还可以导入 SVG 图像,这些图像将被转换为 React 组件。

MyComponent.js
import DocusaurusLogoWithKeytar from '@site/static/img/docusaurus_keytar.svg';
<DocusaurusLogoWithKeytar title="Docusaurus Logo" className="logo" />;

Markdown 示例

幸亏有了 MDX,您还可以在 Markdown 文件中使用 useBaseUrl 工具函数!不过,您必须使用 <img> 标签而不是 Markdown 的图像语法。并且该语法与 JSX 语法完全相同。

my-doc.mdx
---
id: my-doc
title: My Doc
---
// Add to the top of the file below the front matter.
import useBaseUrl from '@docusaurus/useBaseUrl';
...
<img alt="Docusaurus with Keytar" src={useBaseUrl('img/docusaurus_keytar.svg')} />

您也可以只使用 Markdown 的图片语法,但是您必须自己手动维护图片路径,因此不建议这样做。

my-doc.md
![Docusaurus with Keytar](/img/docusaurus_keytar.png)

注意事项

请记住:

  • 默认情况下,static 目录中的所有文件均不会进行后期处理或压缩。
  • 以绝对路径引用的文件在编译时不做检测,因此一旦文件丢失就会导致 404 错误。
  • 默认情况下,GitHub Pages 使用 Jekyll 来运行托管的网站。由于 Jekyll 会丢弃所有以 _ 字符开头的文件,因此,如果你使用 GitHub pages 托管你的网站,建议你通过将名为 .nojekyll 的空文件添加到 static 目录中来禁用 Jekyll。
Last updated on by wangsai