资源处理

引用静态资源

所有的 Markdown 文件在构建时都会经过 VitePress 的渲染管线（md → TSX 页面模块 → 静态 HTML），其中引用的静态资源由 Vite 处理。可以并且应该使用相对路径来引用资源：

![An image](./image.png)

可以在 Markdown 文件、主题中的 *.tsx 组件、样式和普通的 .css 文件中引用静态资源，可以使用绝对路径 (基于项目根目录) 或者相对路径 (基于文件系统)。后者类似于 Vite 或 webpack 的资源打包行为。

常见的图像，媒体和字体文件会被自动检测并视作资源。

通过链接引用的文件不会视作资源

在 Markdown 内，通过链接引用的 PDF 或者其他文档不会被自动视作资源。要使这些文件可用，你必须手动将其放在项目的 public 目录内。

所有引用的资源，包括那些使用绝对路径的，都会在生产构建过程中被复制到输出目录，并使用哈希文件名。从未使用过的资源将不会被复制。小于 4kb 的图像资源将会采用 base64 内联——这可以通过 vite 配置选项进行配置。

所有静态路径引用，包括绝对路径，都应基于你的工作目录的结构。

public 目录

有时可能需要一些静态资源，但这些资源没有直接被 Markdown 或主题组件直接引用，或者你可能想以原始文件名提供某些文件，像 robots.txt，favicons 和 PWA 图标这样的文件。

可以将这些文件放置在源目录的 public 目录中。例如，如果项目根目录是 ./docs，并且使用默认源目录位置，那么 public 目录将是 ./docs/public。

放置在 public 中的资源将按原样复制到输出目录的根目录中。

请注意，应使用根绝对路径来引用放置在 public 中的文件——例如，public/icon.png 应始终在源代码中使用 /icon.png 引用。

根 URL

如果站点没有部署在根 URL 上，则需要在 .vitepress-react/config.js 中设置 base 选项。例如，如果计划将站点部署到 https://foo.github.io/bar/，则 base 应设置为 '/bar/'(它应始终以斜杠开头和结尾)。

所有静态资源路径都会被自动处理，来适应不同的 base 配置值。例如，如果 markdown 中有一个对 public 中的资源的绝对引用：

![An image](/image-inside-public.png)

在这种情况下，更改 base 配置值时，无需更新该引用。

但是如果你正在编写一个主题组件，它动态地链接到资源，例如一个图片，它的 src 基于主题配置：

.vitepress-react/theme/SomeLogo.tsx

tsx

export function SomeLogo() {
  const { theme } = useData()
  return <img src={theme.logoPath} />
}

在这种情况下，建议使用 VitePress 提供的 withBase helper 来包含路径：

.vitepress-react/theme/SomeLogo.tsx

tsx

import { withBase, useData } from '@10coding/vitepress-react'

export function SomeLogo() {
  const { theme } = useData()
  return <img src={withBase(theme.logoPath)} />
}

主题自定义组件为 .tsx（React 组件）；在 .md 页面正文里使用组件标签的规则见在 Markdown 中使用 React。

资源处理 ​

引用静态资源 ​

public 目录 ​

根 URL ​

资源处理

引用静态资源

public 目录

根 URL