@ -36,7 +36,7 @@ VitePress 项目的文件结构中有两个重要的概念：项目根目录 (**
项目根目录是 VitePress 将尝试寻找 `.vitepress` 特殊目录的地方。`.vitepress` 目录是 VitePress 配置文件、开发服务器缓存、构建输出和可选主题自定义代码的预留位置。
项目根目录是 VitePress 将尝试寻找 `.vitepress` 特殊目录的地方。`.vitepress` 目录是 VitePress 配置文件、开发服务器缓存、构建输出和可选主题自定义代码的预留位置。
当你 从命令行运行 `vitepress dev` 或 `vitepress build` 时， 你 需要将相对路径传递给命令。例如，如果你的 VitePress 项目位于 `./docs` ， 你 应该运行 `vitepress dev docs` ：
当从命令行运行 `vitepress dev` 或 `vitepress build` 时， `./docs` ，应该运行 `vitepress dev docs` ：
```
```
.
.
@ -60,9 +60,9 @@ docs/getting-started.md --> /getting-started.html
### 源目录 {#source-directory}
### 源目录 {#source-directory}
源目录是你的 Markdown 源文件所在的位置。默认情况下，它与项目根目录相同。但是，你 可以通过 [`srcDir` ](../reference/site-config#srcdir ) 配置选项对其进行配置。
源目录是 Markdown 源文件所在的位置。默认情况下，它与项目根目录相同。但是，可以通过 [`srcDir` ](../reference/site-config#srcdir ) 配置选项对其进行配置。
`srcDir` 选项是相对于项目根目录解析的。例如，对于 `srcDir: 'src'` ， 你的 文件结构将如下所示：`srcDir` 选项是相对于项目根目录解析的。例如，对于 `srcDir: 'src'` ，文件结构将如下所示：
```
```
. # project root
. # project root
@ -81,7 +81,7 @@ src/getting-started.md --> /getting-started.html
## 链接页面 {#linking-between-pages}
## 链接页面 {#linking-between-pages}
在页面之间链接时，你 可以使用绝对路径和相对路径。请注意，虽然 `.md` 和 `.html` 扩展名都可以使用，但最佳做法是省略文件扩展名，以便 VitePress 可以根据你的 配置生成最终 URL。
在页面之间链接时，可以使用绝对路径和相对路径。请注意，虽然 `.md` 和 `.html` 扩展名都可以使用，但最佳做法是省略文件扩展名，以便 VitePress 可以根据配置生成最终 URL。
```md
```md
<!-- 正确做法 --> <!-- 正确做法 -->
@ -97,7 +97,7 @@ src/getting-started.md --> /getting-started.html
### 链接到非 vitepress 页面 {#linking-to-non-vitepress-pages}
### 链接到非 vitepress 页面 {#linking-to-non-vitepress-pages}
如果你 想链接到网站中不是由 VitePress 生成的页面，你 需要使用完整的 URL（ ） ：
如果想链接到网站中不是由 VitePress 生成的页面，需要使用完整的 URL（ ） ：
**Input**
**Input**
@ -111,9 +111,9 @@ src/getting-started.md --> /getting-started.html
::: tip 注意
::: tip 注意
在 Markdown 链接中，`base` 会自动添加到 URL 前面。这意味着，如果你 想链接到 `base` 之外的页面，则链接中需要类似 `../../pure.html` 的内容（由浏览器相对于当前页面解析）。
在 Markdown 链接中，`base` 会自动添加到 URL 前面。这意味着，如果想链接到 `base` 之外的页面，则链接中需要类似 `../../pure.html` 的内容（由浏览器相对于当前页面解析）。
或者，你 可以直接使用锚标记语法：
或者，可以直接使用锚标记语法：
```md
```md
< a href = "/pure.html" target = "_self" > Link to pure.html< / a > < a href = "/pure.html" target = "_self" > Link to pure.html< / a >
@ -134,12 +134,12 @@ src/getting-started.md --> /getting-started.html
- Netlify 默认支持这个。
- Netlify 默认支持这个。
- Vercel 需要在 [vercel.json 中启用 cleanUrls 选项 ](https://vercel.com/docs/concepts/projects/project-configuration#cleanurls )。
- Vercel 需要在 [vercel.json 中启用 cleanUrls 选项 ](https://vercel.com/docs/concepts/projects/project-configuration#cleanurls )。
如果你 可以使用此功能，你 还可以启用 VitePress 自己的 [`cleanUrls` ](../reference/site-config#cleanurls ) 配置选项，以便：
如果可以使用此功能，还可以启用 VitePress 自己的 [`cleanUrls` ](../reference/site-config#cleanurls ) 配置选项，以便：
- 页面之间的入站链接是在没有 `.html` 扩展名的情况下生成的。
- 页面之间的入站链接是在没有 `.html` 扩展名的情况下生成的。
- 如果当前路径以 `.html` 结尾，路由器将执行客户端重定向到无扩展路径。
- 如果当前路径以 `.html` 结尾，路由器将执行客户端重定向到无扩展路径。
但是，如果你 无法为服务器配置此类支持（例如 GitHub 页面），则必须手动采用以下目录结构：
但是，如果无法为服务器配置此类支持（例如 GitHub 页面），则必须手动采用以下目录结构：
```
```
.
.
@ -152,7 +152,7 @@ src/getting-started.md --> /getting-started.html
## 路由重写 {#route-rewrites}
## 路由重写 {#route-rewrites}
你 可以自定义源目录结构和生成页面之间的映射。当你 有一个复杂的项目结构时，它很有用。例如，假设你 有一个包含多个包的 monorepo， ， ： 可以自定义源目录结构和生成页面之间的映射。当有一个复杂的项目结构时，它很有用。例如，假设有一个包含多个包的 monorepo， ， ：
```
```
.
.
@ -167,14 +167,14 @@ src/getting-started.md --> /getting-started.html
│ └─ pkg-b-docs.md
│ └─ pkg-b-docs.md
```
```
你 希望像这样生成 VitePress 页面：希望像这样生成 VitePress 页面：
```
```
packages/pkg-a/src/pkg-a-docs.md --> /pkg-a/index.html
packages/pkg-a/src/pkg-a-docs.md --> /pkg-a/index.html
packages/pkg-b/src/pkg-b-docs.md --> /pkg-b/index.html
packages/pkg-b/src/pkg-b-docs.md --> /pkg-b/index.html
```
```
你 可以通过像这样配置 [`rewrites` ](../reference/site-config#rewrites ) 选项来实现此目的：可以通过像这样配置 [`rewrites` ](../reference/site-config#rewrites ) 选项来实现此目的：
```ts
```ts
// .vitepress/config.js
// .vitepress/config.js
@ -186,7 +186,7 @@ export default {
}
}
```
```
`rewrites` 选项还支持动态路由参数。在上面的示例中，如果你 有很多包，则列出所有路径会很冗长。鉴于它们都具有相同的文件结构，你 可以像这样简化配置：`rewrites` 选项还支持动态路由参数。在上面的示例中，如果有很多包，则列出所有路径会很冗长。鉴于它们都具有相同的文件结构，可以像这样简化配置：
```ts
```ts
export default {
export default {
@ -200,7 +200,7 @@ export default {
::: warning 开启重写功能时使用相对链接
::: warning 开启重写功能时使用相对链接
启用重写后，**相对链接应基于重写的路径**。例如，为了创建从 `packages/pkg-a/src/pkg-a-code.md` 到 `packages/pkg-b/src/pkg-b-code.md` 的相对链接，你 应该使用：
启用重写后，**相对链接应基于重写的路径**。例如，为了创建从 `packages/pkg-a/src/pkg-a-code.md` 到 `packages/pkg-b/src/pkg-b-code.md` 的相对链接，应该使用：
```md
```md
[Link to PKG B ](../pkg-b/pkg-b-code )
[Link to PKG B ](../pkg-b/pkg-b-code )
@ -209,7 +209,7 @@ export default {
## 动态路由 {#dynamic-routes}
## 动态路由 {#dynamic-routes}
你 可以使用单个 Markdown 文件和动态数据生成许多页面。例如，你 可以创建一个 `packages/[pkg].md` 文件，为项目中的每个包生成相应的页面。这里，`[pkg]` 段是一个路由参数，用于区分每个页面。可以使用单个 Markdown 文件和动态数据生成许多页面。例如，可以创建一个 `packages/[pkg].md` 文件，为项目中的每个包生成相应的页面。这里，`[pkg]` 段是一个路由参数，用于区分每个页面。
### 路径加载文件 {#paths-loader-file}
### 路径加载文件 {#paths-loader-file}
@ -286,7 +286,7 @@ export default {
### 动态生成路径 {#dynamically-generating-paths}
### 动态生成路径 {#dynamically-generating-paths}
路径加载器模块在 Node.js 中运行，并且仅在构建期间执行。你 可以使用本地或远程的任何数据动态生成路径数组。
路径加载器模块在 Node.js 中运行，并且仅在构建期间执行。可以使用本地或远程的任何数据动态生成路径数组。
从本地文件生成路径：
从本地文件生成路径：
@ -325,14 +325,14 @@ export default {
### 访问页面中的参数 {#accessing-params-in-page}
### 访问页面中的参数 {#accessing-params-in-page}
你 可以使用参数将附加数据传递到每个页面。Markdown 路由文件可以通过 `$params` 全局属性访问 Vue 表达式中的当前页面参数：可以使用参数将附加数据传递到每个页面。Markdown 路由文件可以通过 `$params` 全局属性访问 Vue 表达式中的当前页面参数：
```md
```md
- package name: {{ $params.pkg }}
- package name: {{ $params.pkg }}
- version: {{ $params.version }}
- version: {{ $params.version }}
```
```
你 还可以通过 [`useData` ](../reference/runtime-api#usedata ) runtime API 访问当前页面的参数。这在 Markdown 文件和 Vue 组件中都可用：还可以通过 [`useData` ](../reference/runtime-api#usedata ) runtime API 访问当前页面的参数。这在 Markdown 文件和 Vue 组件中都可用：
```vue
```vue
< script setup > < script setup >
@ -347,9 +347,9 @@ console.log(params.value)
### 渲染原始内容 {#rendering-raw-content}
### 渲染原始内容 {#rendering-raw-content}
传递给页面的参数将在客户端 JavaScript payload 中序列化，因此你 应该避免在参数中传递大量数据，例如从远程 CMS 获取的原始 Markdown 或 HTML 内容。
传递给页面的参数将在客户端 JavaScript payload 中序列化，因此应该避免在参数中传递大量数据，例如从远程 CMS 获取的原始 Markdown 或 HTML 内容。
相反，你 可以使用每个路径对象上的 `content` 属性将此类内容传递到每个页面：
相反，可以使用每个路径对象上的 `content` 属性将此类内容传递到每个页面：
```js
```js
export default {
export default {
Xavi Lee
2 years ago