feat: update translations

pull/2249/head
Xavi Lee 3 years ago committed by GitHub
commit e7d7207266
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

@ -26,28 +26,6 @@
请注意,你应使用根绝对路径来引用放置在 `public` 中的文件 - 例如,`public/icon.png` 应始终在源代码中作为 `/icon.png` 引用。
<!-- 但有一个例外:如果你在 `public` 中有一个 HTML 页面,并从主站点链接到它,路由默认会产生 404 错误。为了解决这个问题VitePress 提供了 `pathname//` 协议,它允许你像链接外部页面一样链接到同一域名的另一个页面。比较这两个链接:
- [/pure.html](/pure.html)
- <pathname:///VitePressCN/pure.html>
请注意,仅在 Markdown 链接中支持 `pathname://`。此外,`pathname://` 默认情况下将在新选项卡中打开链接。你可以使用 `target="_self"` 在同一选项卡中打开它:
**输入**
```md
[Link to pure.html](/pure.html){target="\_self"}
[Link to pure.html](/pure.html){target="\_blank"}
如果明确指定 target ,则无需指定 pathname://
```
**输出**
[链接到 pure.html](/pure.html){target="\_self"}
<br>
[链接到 pure.html](/pure.html){target="\_blank"} -->
## 根 URL {#base-url}
如果你的网站部署在非根 URL 上,则需要在 `.vitepress/config.js` 中设置 `base` 选项。例如,如果你计划将网站部署到 `https://foo.github.io/bar/`,则 `base` 应设置为 `'/bar/'`(它应始终以斜杠开头和结尾)。

@ -1,6 +1,6 @@
# 自定义主题 {#using-a-custom-theme}
## 主题解析 {#theme-resolving}
## 解析主题 {#theme-resolving}
你可以通过创建一个 `.vitepress/theme/index.js``.vitepress/theme/index.ts` 文件 (即“主题入口文件”) 来启用自定义主题:
@ -15,7 +15,7 @@
└─ package.json
```
当检测到存在主题入口文件时VitePress 总会使用自定义主题而不是默认主题。但你可以[扩展默认主题](./extending-default-theme)来在其基础上实现更高级的自定义主题
当检测到存在主题入口文件时VitePress 总会使用自定义主题而不是默认主题。但你可以[拓展默认主题](./extending-default-theme)来在其基础上实现更高级的定制
## 主题接口 {#theme-interface}

@ -13,9 +13,9 @@ VitePress 提供了一个叫做**数据加载器**的功能,它允许你加载
export default {
load() {
return {
hello: 'world',
data: 'hello'
}
}
},
}
```
@ -23,7 +23,7 @@ export default {
然后,你可以在 `.md` 页面和 `.vue` 组件中使用 `data` 命名导出从该文件中导入数据:
```vue
```html
<script setup>
import { data } from './example.data.js'
</script>
@ -35,7 +35,7 @@ import { data } from './example.data.js'
```json
{
"hello": "world"
"data": "hello"
}
```
@ -48,7 +48,7 @@ export default {
async load() {
// fetch remote data
return (await fetch('...')).json()
},
}
}
```
@ -70,13 +70,13 @@ export default {
// watchedFiles will be an array of absolute paths of the matched files.
// generate an array of blog post metadata that can be used to render
// a list in the theme layout
return watchedFiles.map((file) => {
return watchedFiles.map(file => {
return parse(fs.readFileSync(file, 'utf-8'), {
columns: true,
skip_empty_lines: true,
skip_empty_lines: true
})
})
},
}
}
```
@ -88,10 +88,10 @@ export default {
// posts.data.js
import { createContentLoader } from 'vitepress'
export default createContentLoader('posts/*.md' /* options */)
export default createContentLoader('posts/*.md', /* options */)
```
该辅助函数接受一个相对于 [源目录](./routing#source-directory) 的 glob 模式,并返回一个 `{ watch, load }` 数据加载器对象,该对象可以用作数据加载器文件中的默认导出。它还基于文件修改时间戳实现了缓存以提高开发性能。
该辅助函数接受一个相对于 [项目根目录](./routing#project-root) 的 glob 模式,并返回一个 `{ watch, load }` 数据加载器对象,该对象可以用作数据加载器文件中的默认导出。它还基于文件修改时间戳实现了缓存以提高开发性能。
请注意,加载器仅适用于 Markdown 文件 - 匹配的非 Markdown 文件将被跳过。
@ -99,8 +99,7 @@ export default createContentLoader('posts/*.md' /* options */)
```ts
interface ContentData {
// mapped URL for the page. e.g. /posts/hello.html (does not include base)
// manually iterate or use custom `transform` to normalize the paths
// mapped absolute URL for the page. e.g. /posts/hello.html
url: string
// frontmatter data of the page
frontmatter: Record<string, any>
@ -146,74 +145,29 @@ export default createContentLoader('posts/*.md', {
transform(rawData) {
// map, sort, or filter the raw data as you wish.
// the final result is what will be shipped to the client.
return rawData
.sort((a, b) => {
return rawData.sort((a, b) => {
return +new Date(b.frontmatter.date) - +new Date(a.frontmatter.date)
})
.map((page) => {
}).map(page => {
page.src // raw markdown source
page.html // rendered full page HTML
page.excerpt // rendered excerpt HTML (content above first `---`)
return {
/* ... */
}
return {/* ... */}
})
},
}
})
```
查看它在 [Vue.js 博客](https://github.com/vuejs/blog/blob/main/.vitepress/theme/posts.data.ts) 中是如何使用的。
`createContentLoader` API 也可以在 [构建钩子](../reference/site-config#build-hooks) 中使用:
`createContentLoader` API 也可以在 [构建钩子](/reference/site-config#build-hooks) 中使用:
```js
// .vitepress/config.js
export default {
async buildEnd() {
const posts = await createContentLoader('posts/*.md').load()
// 根据 posts 元数据生成文件,例如 RSS feed
},
// generate files based on posts metadata, e.g. RSS feed
}
```
**类型**
```ts
interface ContentOptions<T = ContentData[]> {
/**
* Include src?
* @default false
*/
includeSrc?: boolean
/**
* Render src to HTML and include in data?
* @default false
*/
render?: boolean
/**
* If `boolean`, whether to parse and include excerpt? (rendered as HTML)
* 如果是 `boolean`,是否解析并包含摘录? (呈现为 HTML
*
* If `function`, control how the excerpt is extracted from the content.
* 如果是 `function`,控制如何从内容中提取摘录
*
* If `string`, define a custom separator to be used for extracting the
* excerpt. Default separator is `---` if `excerpt` is `true`.
* 如果是 `string`,定义用于提取摘录的自定义分隔符。如果 `excerpt``true`,则默认分隔符为 `---`
*
* @see https://github.com/jonschlinkert/gray-matter#optionsexcerpt
* @see https://github.com/jonschlinkert/gray-matter#optionsexcerpt_separator
*
* @default false
*/
excerpt?: boolean | ((file: { data: { [key: string]: any }; content: string; excerpt?: string }, options?: any) => void) | string
/**
* 转换数据。请注意,如果从组件或 Markdown 文件导入,数据将以 JSON 形式内联到客户端包中。
*/
transform?: (data: ContentData[]) => T | Promise<T>
}
```
@ -236,16 +190,6 @@ export default defineLoader({
glob: ['...'],
async load(): Promise<Data> {
// ...
},
}
})
```
## 配置 {#configuration}
要获取加载器中的配置信息,可以使用如下代码:
```ts
import type { SiteConfig } from 'vitepress'
const config: SiteConfig = (globalThis as any).VITEPRESS_CONFIG
```

@ -73,7 +73,7 @@ Cache-Control: max-age=31536000,immutable
cache-control: immutable
```
注意:该 `_headers` 文件应放置在[public 目录](./asset-handling#the-public-directory)中(在我们的例子中是 `docs/public/_headers`),以便将其逐字复制到输出目录。
注意:该 `_headers` 文件应放置在[public 目录](/guide/asset-handling#the-public-directory)中(在我们的例子中是 `docs/public/_headers`),以便将其逐字复制到输出目录。
[Netlify 自定义标头文档](https://docs.netlify.com/routing/headers/)
@ -111,107 +111,100 @@ Cache-Control: max-age=31536000,immutable
- **构建命令:** `npm run docs:build`
- **输出目录:** `docs/.vitepress/dist`
- **node 版本:** `18` (或更高版本)
- **node 版本:** `16` (或更高版本,默认情况下通常为 14 或 16但在 Cloudflare 页面上,默认值仍然是 12因此你可能需要[更改该版本](https://developers.cloudflare.com/pages/platform/build-configuration/))
::: warning 警告
不要为 HTML 代码启用 _Auto Minify_ 等选项。它将从输出中删除对 Vue 有意义的注释。如果被删除,你可能会看到 [hydration(HTML 添加交互的过程)](https://blog.csdn.net/qq_41800366/article/details/117738916) mismatch 错误。
不要为 HTML 代码启用 _Auto Minify_ 等选项。它将从输出中删除对 Vue 有意义的注释。如果被删除,你可能会看到 hydration mismatch 错误。
:::
### GitHub Pages
1. 在项目的 `.github/workflows` 目录中创建一个名为 `deploy.yml` 的文件,其中包含如下内容:
<!-- 在你的 theme 配置文件中, `docs/.vitepress/config.js`, 设置 `base` 为 GitHub 仓库的名称。如果你打算把站点部署到 `https://foo.github.io/bar/`,那你就需要把 `base` 设置为 `'/bar/'`。它始终以 `/` 开头结尾。 -->
1. 在你的 theme 配置文件中, `docs/.vitepress/config.js`, 设置 `base` 为 GitHub 仓库的名称。如果你打算把站点部署到 `https://foo.github.io/bar/`,那你就需要把 `base` 设置为 `'/bar/'`。它始终以 `/` 开头结尾。
```yaml
# 用于构建 VitePress 站点并将其部署到 GitHub Pages 的示例工作流
#
name: Deploy VitePress site to Pages
2. 在项目目录 `.github/workflows` 下创建一个名为 `deploy.yml` 的文件,包含以下内容:
```yaml
name: Deploy
on:
# 在针对“main”分支的推送上运行。如果你使用 `master` 分支作为默认分支请将其更改为“master”
workflow_dispatch: {}
push:
branches: [main]
# 允许你从 Action 选项卡手动运行此工作流程
workflow_dispatch:
# 设置 GITHUB_TOKEN 的权限以允许部署到 GitHub Pages
branches:
- main
jobs:
deploy:
runs-on: ubuntu-latest
permissions:
contents: read
pages: write
id-token: write
# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
concurrency:
group: pages
cancel-in-progress: false
jobs:
# Build job
build:
runs-on: ubuntu-latest
environment:
name: github-pages
url: ${{ steps.deployment.outputs.page_url }}
steps:
- name: Checkout
uses: actions/checkout@v3
- uses: actions/checkout@v3
with:
fetch-depth: 0 # Not needed if lastUpdated is not enabled
# - uses: pnpm/action-setup@v2 # Uncomment this if you're using pnpm
# - uses: oven-sh/setup-bun@v1 # Uncomment this if you're using Bun
- name: Setup Node
uses: actions/setup-node@v3
fetch-depth: 0
- uses: actions/setup-node@v3
with:
node-version: 18
cache: npm # or pnpm / yarn
- name: Setup Pages
uses: actions/configure-pages@v3
- name: Install dependencies
run: npm ci # or pnpm install / yarn install / bun install
- name: Build with VitePress
run: |
npm run docs:build # or pnpm docs:build / yarn docs:build / bun run docs:build
touch docs/.vitepress/dist/.nojekyll
- name: Upload artifact
uses: actions/upload-pages-artifact@v2
node-version: 16
cache: npm
- run: npm ci
- name: Build
run: npm run docs:build
- uses: actions/configure-pages@v2
- uses: actions/upload-pages-artifact@v1
with:
path: docs/.vitepress/dist
# Deployment job
deploy:
environment:
name: github-pages
url: ${{ steps.deployment.outputs.page_url }}
needs: build
runs-on: ubuntu-latest
name: Deploy
steps:
- name: Deploy to GitHub Pages
- name: Deploy
id: deployment
uses: actions/deploy-pages@v2
uses: actions/deploy-pages@v1
```
::: warning 警告
确保 VitePress 中的 `base` 选项配置正确。有关更多详细信息,请参阅[设置 Public Base Path](#setting-a-public-base-path)
::: tip 提示
请替换相应的分支名称。比如你要建的分支是 `master` ,那么你要把上面文件中的 `main` 换成 `master`
:::
2. 在存储库设置中的 `Pages` 菜单项下,选择 `Build and deployment > Source` 中的 `GitHub Actions`
3. 在仓库设置中找到 `Pages` 选项,在 `Build and deployment` 下的 `Source` 中选择 `GitHub Actions`
3. 将更改推送到 `main` 分支并等待 GitHub Actions 工作流完成。你应该看到你的站点部署到 `https://”<username>.github.io/[repository]/``https://<custom-domain>/`,这取决于你的设置。你的网站将在每次推送到 `main` 分支时自动部署。
4. 现在提交你的代码并将其推送到 `main` 分支。
5. 等待 Actions 完成。
6. 在仓库设置中找到 `Pages` 选项,点击 `Visit site` 就可以看到你的网站。现在,你的文档将在你每次推送时自动部署。
### GitLab Pages
1. 将 `docs/.vitepress/config.js` 中的 `outDir` 设置为 `../public`。如果你想部署到 `https://<username> .gitlab.io/<repository> /`,将 `base` 选项配置为 `'/<repository> /'`
1. 将 `docs/.vitepress/config.js` 中的 `outDir` 设置为 `../public`
2. 在 `docs/.vitepress/config.js` 配置文件中,将 `base` 属性设置为 GitLab 存储库的名称。如果计划将站点部署到 `https://foo.gitlab.io/bar/`,则应将 `base` 设置为 `'/bar/'`。它应始终以 `/`开头和结尾。
2. 在项目的根目录中创建一个名为 `.gitlab-ci.yml` 的文件,其中包含以下内容。每当你更改内容时,都会自动构建和部署你的网站:
3. 使用以下内容在项目的根目录中创建一个名为 `.gitlab-ci.yml` 的文件。每当你更改内容时,会自动构建和部署你的站点:
```yaml
image: node:16
pages:
cache:
paths:
- node_modules/
script:
- npm install
- npm run docs:build
artifacts:
paths:
- public
only:
- main
```
4. 或者,如果要使用 _alpine_ 版本的 node则必须手动安装 `git`。在这种情况下,上面的代码修改为:
```yaml
image: node:18
image: node:16-alpine
pages:
cache:
paths:
- node_modules/
before_script:
- apk add git
script:
# - apk add git # Uncomment this if you're using small docker images like alpine and have lastUpdated enabled
- npm install
- npm run docs:build
artifacts:

@ -1,7 +1,3 @@
---
outline: deep
---
# 扩展默认主题 {#extending-the-default-theme}
VitePress 默认的主题已经针对文档进行了优化,并且可以进行定制。请参考[默认主题配置概览](../reference/default-theme-config)获取完整的选项列表。
@ -14,7 +10,7 @@ VitePress 默认的主题已经针对文档进行了优化,并且可以进行
这些高级自定义配置将需要使用自定义主题来“拓展”默认主题。
::: tip 提示
:::tip
在继续之前,请确保首先阅读[自定义主题](./custom-theme)以了解其工作原理。
:::
@ -33,8 +29,8 @@ export default DefaultTheme
```css
/* .vitepress/theme/custom.css */
:root {
--vp-c-brand-1: #646cff;
--vp-c-brand-2: #747bff;
--vp-c-brand: #646cff;
--vp-c-brand-light: #747bff;
}
```
@ -62,18 +58,18 @@ export default DefaultTheme
}
```
::: warning 警告
如果你在使用像是[团队页](../reference/default-theme-team-page)这样的组件,请确保也在从 `vitepress/theme-without-fonts` 中导入它们!
:::warning
如果你在使用像是[团队页](/reference/default-theme-team-page)这样的组件,请确保也在从 `vitepress/theme-without-fonts` 中导入它们!
:::
如果你的字体是通过 `@font-face` 引用的本地文件,它将会被作为资源被包含在 `.vitepress/dist/asset` 目录下,并且使用哈希后的文件名。为了预加载这个文件,请使用 [transformHead](../reference/site-config#transformhead) 构建钩子:
如果你的字体是通过 `@font-face` 引用的本地文件,它将会被作为资源被包含在 `.vitepress/dist/asset` 目录下,并且使用哈希后的文件名。为了预加载这个文件,请使用 [transformHead](/reference/site-config#transformhead) 构建钩子:
```js
// .vitepress/config.js
export default {
transformHead({ assets }) {
// adjust the regex accordingly to match your font
const myFontFile = assets.find((file) => /font-name\.\w+\.woff2/)
const myFontFile = assets.find(file => /font-name\.\w+\.woff2/)
if (myFontFile) {
return [
[
@ -83,12 +79,12 @@ export default {
href: myFontFile,
as: 'font',
type: 'font/woff2',
crossorigin: '',
},
],
crossorigin: ''
}
]
]
}
},
}
}
```
@ -98,30 +94,13 @@ export default {
// .vitepress/theme/index.js
import DefaultTheme from 'vitepress/theme'
/** @type {import('vitepress').Theme} */
export default {
extends: DefaultTheme,
enhanceApp(ctx) {
// register your custom global components
ctx.app.component('MyGlobalComponent' /* ... */)
},
}
```
如果你使用 TypeScript:
```ts
// .vitepress/theme/index.ts
import type { Theme } from 'vitepress'
import DefaultTheme from 'vitepress/theme'
export default {
extends: DefaultTheme,
async enhanceApp({ app }) {
// register your custom global components
ctx.app.component('MyGlobalComponent' /* ... */)
},
} satisfies Theme
}
```
因为我们使用 Vite你还可以利用 Vite 的 [glob 导入功能](https://cn.vitejs.dev/guide/features.html#glob-import)来自动注册一个组件目录。
@ -139,7 +118,7 @@ export default {
...DefaultTheme,
// override the Layout with a wrapper component that
// injects the slots
Layout: MyLayout,
Layout: MyLayout
}
```
@ -153,7 +132,9 @@ const { Layout } = DefaultTheme
<template>
<Layout>
<template #aside-outline-before> My custom sidebar top content </template>
<template #aside-outline-before>
My custom sidebar top content
</template>
</Layout>
</template>
```
@ -170,9 +151,9 @@ export default {
...DefaultTheme,
Layout() {
return h(DefaultTheme.Layout, null, {
'aside-outline-before': () => h(MyComponent),
'aside-outline-before': () => h(MyComponent)
})
},
}
}
```
@ -223,11 +204,13 @@ export default defineConfig({
alias: [
{
find: /^.*\/VPNavBar\.vue$/,
replacement: fileURLToPath(new URL('./components/CustomNavBar.vue', import.meta.url)),
},
],
},
},
replacement: fileURLToPath(
new URL('./components/CustomNavBar.vue', import.meta.url)
)
}
]
}
}
})
```

@ -8,7 +8,7 @@
### 前置知识 {#prerequisites}
- [Node.js](https://nodejs.org/) 18 及以上版本。
- [Node.js](https://nodejs.org/) 16 及以上版本。
- 通过命令行界面 (CLI) 访问 VitePress 的终端。
- 支持 [Markdown](https://en.wikipedia.org/wiki/Markdown) 语法的编辑器。
- 推荐 [VSCode](https://code.visualstudio.com/) 及其[官方 Vue 扩展](https://marketplace.visualstudio.com/items?itemName=Vue.volar)。
@ -18,7 +18,7 @@ VitePress 可以单独使用,也可以安装到现有项目中。在这两种
::: code-group
```sh [npm]
$ npm add -D vitepress
$ npm install -D vitepress
```
```sh [pnpm]
@ -29,10 +29,6 @@ $ pnpm add -D vitepress
$ yarn add -D vitepress
```
```sh [bun]
$ bun add -D vitepress
```
:::
::: details 遇到了 missing peer deps 警告?
@ -42,8 +38,7 @@ $ bun add -D vitepress
"pnpm": {
"peerDependencyRules": {
"ignoreMissing": [
"@algolia/client-search",
"search-insights"
"@algolia/client-search"
]
}
}
@ -51,14 +46,9 @@ $ bun add -D vitepress
:::
::: tip 注意
VitePress 是仅 ESM 的软件包。不要使用 `require()` 导入它,并确保最新的 `package.json` 包含 `"type": "module"`,或者更改相关文件的文件扩展名,例如`.vitepress/config.js` 到 `.mjs`/`.mts`。更多详情请参考[Vite 故障排除指南](http://vitejs.dev/guide/troubleshooting.html#this-package-is-esm-only)。此外,在异步 CJS 上下文中,你可以使用 `await import('vitepress')` 代替。
:::
### 安装向导 {#setup-wizard}
VitePress 附带一个命令行设置向导,可以帮助构建一个基本项目。安装后,通过运行以下命令启动向导:
VitePress 附带一个命令行设置向导,可以帮助您构建一个基本项目。安装后,通过运行以下命令启动向导:
::: code-group
@ -67,16 +57,18 @@ $ npx vitepress init
```
```sh [pnpm]
$ pnpm dlx vitepress init
$ pnpm exec vitepress init
```
:::
你将需要回答几个简单的问题:
<<< @/snippets/init.ansi
<p>
<img src="./vitepress-init.png" alt="vitepress init screenshot" style="border-radius:8px">
</p>
::: tip Vue as Peer Dependency
:::tip Vue 作为
如果打算使用 Vue 组件或 API 进行自定义,还应该明确地将 `vue` 安装为 peer dependency。
:::
@ -99,7 +91,7 @@ $ pnpm dlx vitepress init
`docs` 目录作为 VitePress 站点的项目**根目录**。`.vitepress` 目录是 VitePress 配置文件、开发服务器缓存、构建输出和可选主题自定义代码的位置。
::: tip 提示
:::tip
默认情况下VitePress 将其开发服务器缓存存储在 `.vitepress/cache` 中,并将生产构建输出存储在 `.vitepress/dist` 中。如果使用 Git应该将它们添加到 `.gitignore` 文件中。也可以手动[配置](../reference/site-config#outdir)这些位置。
:::
@ -116,12 +108,11 @@ export default {
themeConfig: {
// theme-level options
},
}
}
```
还可以通过 `themeConfig` 选项配置主题的行为。有关所有配置选项的完整详细信息,请参见[配置参考](../reference/site-config)。
### 源文件 {#source-files}
`.vitepress` 目录之外的 Markdown 文件被视为**源文件**。

@ -51,7 +51,7 @@ interface LocaleSpecificConfig<ThemeConfig = any> {
有关自定义默认主题的文本占位符的信息,请参考 [`DefaultTheme.Config`](https://github.com/vuejs/vitepress/blob/main/types/default-theme.d.ts) 接口。不要在 locale 级别覆盖 `themeConfig.algolia``themeConfig.carbonAds`。想获取多语言查询的信息,请参考 [Algolia docs](../reference/default-theme-search#i18n)。
**提示:** 配置文件也可以存储在 `docs/.vitepress/config/index.ts`你可以为每个语言环境创建一个配置文件,然后从 `index.ts` 合并并导出它们以更好的组织文件结构
**提示:** 配置文件也可以存储在 `docs/.vitepress/config/index.ts`通过为每个语言环境创建一个配置文件,然后从 `index.ts` 合并并导出它们,你可以更好的组织文件。
## 为本地化设置子目录 {#separate-directory-for-each-locale}

@ -1,21 +0,0 @@
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5.03628 7.87818C4.75336 5.83955 6.15592 3.95466 8.16899 3.66815L33.6838 0.0367403C35.6969 -0.24977 37.5581 1.1706 37.841 3.20923L42.9637 40.1218C43.2466 42.1604 41.8441 44.0453 39.831 44.3319L14.3162 47.9633C12.3031 48.2498 10.4419 46.8294 10.159 44.7908L5.03628 7.87818Z" fill="url(#paint0_linear_1287_1214)"/>
<path d="M6.85877 7.6188C6.71731 6.59948 7.41859 5.65703 8.42512 5.51378L33.9399 1.88237C34.9465 1.73911 35.8771 2.4493 36.0186 3.46861L41.1412 40.3812C41.2827 41.4005 40.5814 42.343 39.5749 42.4862L14.0601 46.1176C13.0535 46.2609 12.1229 45.5507 11.9814 44.5314L6.85877 7.6188Z" fill="white"/>
<path d="M33.1857 14.9195L25.8505 34.1576C25.6991 34.5547 25.1763 34.63 24.9177 34.2919L12.3343 17.8339C12.0526 17.4655 12.3217 16.9339 12.7806 16.9524L22.9053 17.3607C22.9698 17.3633 23.0344 17.3541 23.0956 17.3337L32.5088 14.1992C32.9431 14.0546 33.3503 14.4878 33.1857 14.9195Z" fill="url(#paint1_linear_1287_1214)"/>
<path d="M27.0251 12.5756L19.9352 15.0427C19.8187 15.0832 19.7444 15.1986 19.7546 15.3231L20.3916 23.063C20.4066 23.2453 20.5904 23.3628 20.7588 23.2977L22.7226 22.5392C22.9064 22.4682 23.1021 22.6138 23.0905 22.8128L22.9102 25.8903C22.8982 26.0974 23.1093 26.2436 23.295 26.1567L24.4948 25.5953C24.6808 25.5084 24.892 25.6549 24.8795 25.8624L24.5855 30.6979C24.5671 31.0004 24.9759 31.1067 25.1013 30.8321L25.185 30.6487L29.4298 17.8014C29.5008 17.5863 29.2968 17.3809 29.0847 17.454L27.0519 18.1547C26.8609 18.2205 26.6675 18.0586 26.6954 17.8561L27.3823 12.8739C27.4103 12.6712 27.2163 12.5091 27.0251 12.5756Z" fill="url(#paint2_linear_1287_1214)"/>
<defs>
<linearGradient id="paint0_linear_1287_1214" x1="6.48163" y1="1.9759" x2="39.05" y2="48.2064" gradientUnits="userSpaceOnUse">
<stop stop-color="#49C7FF"/>
<stop offset="1" stop-color="#BD36FF"/>
</linearGradient>
<linearGradient id="paint1_linear_1287_1214" x1="11.8848" y1="16.4266" x2="26.7246" y2="31.4177" gradientUnits="userSpaceOnUse">
<stop stop-color="#41D1FF"/>
<stop offset="1" stop-color="#BD34FE"/>
</linearGradient>
<linearGradient id="paint2_linear_1287_1214" x1="21.8138" y1="13.7046" x2="26.2464" y2="28.8069" gradientUnits="userSpaceOnUse">
<stop stop-color="#FFEA83"/>
<stop offset="0.0833333" stop-color="#FFDD35"/>
<stop offset="1" stop-color="#FFA800"/>
</linearGradient>
</defs>
</svg>

Before

Width:  |  Height:  |  Size: 2.4 KiB

@ -1,332 +0,0 @@
# markdown 基础语法 {#markdown-base}
## markdown-it 插件
通过[markdown-it 插件](https://www.npmjs.com/search?q=keywords:markdown-it-plugin),可以实现更多 markdown 功能。
### 使用
`doc/.vitepress/config.ts` 中引入使用
```js
import mdFootnote from 'markdown-it-footnote'
markdown: {
config: md => {
md.use(mdFootnote)
...
},
},
```
## 标题 {#title}
```md
# 一级标题
## 二级标题
### 三级标题
...
```
::: details 示例
### 三级标题
#### 四级标题
##### 五级标题
###### 六级标题
:::
##### 标题编号
```md
<!-- 要添加自定义标题ID请在与标题相同的行上用大括号括起该自定义ID。 -->
### My Great Heading {#custom-id}
```
## 字体
##### 加粗
```md
**加粗**
```
##### 斜体
```md
_斜体_
```
##### 斜体加粗
```md
**_斜体加粗_**
```
##### 删除线
```md
~~删除线~~
```
::: details 示例
**加粗**
_斜体_
**_斜体加粗_**
~~删除线~~
:::
## 引用
```md
> 这是引用的内容
>
> > 这是引用的内容
> >
> > > > > > 这是引用的内容
<!-- 引用可以嵌套 -->
```
::: details 示例
> 这是引用的内容
>
> > 这是引用的内容
> >
> > > > > > 这是引用的内容
:::
## 分割线
```md
---
---
可以在一行中使用三个或更多的 \* 、 - 或者 \_ 来添加分隔线
```
::: details 示例
---
:::
## 换行
```md
<p></p> 或者
<br>
```
## 链接
```md
<!--Markdown本身语法不支持链接在新页面中打开, VitePress 做了处理 -->
[链接文本](链接 'title')
[VitePressCN](https://vanchkong.github.io/VitePressCN 'Vite & Vue 驱动的静态站点生成器')
<!-- 要将URL或电子邮件地址快速转换为链接请将其括在尖括号中。在 VitePress 中无需次步操作即可自动转换为链接,如果你想禁用自动URL链接可以用 `` 包裹它 -->
<https://vanchkong.github.io/VitePressCN>
<fake@example.com>
<!-- 为了强调链接,请在方括号之前和圆括号之后添加星号。同上方字体用法 -->
```
::: details 示例
[VitePressCN](https://vanchkong.github.io/VitePressCN 'Vite & Vue 驱动的静态站点生成器')
<https://vanchkong.github.io/VitePressCN>
<fake@example.com>
**~~<https://vanchkong.github.io/VitePressCN>~~**
https://vanchkong.github.io/VitePressCN
`https://vanchkong.github.io/VitePressCN`
:::
## 图片
```md
![alt](图片地址 'title')
alt 就是显示在图片下面的文字,相当于对图片内容的解释。
title 是图片的标题,当鼠标移到图片上时显示的内容。
<!-- 图片可以被链接包裹 -->
```
::: details 示例
![vite](./logo.svg 'vite')
:::
## 列表 {#list}
##### 无序列表 {#unordered-list}
```md
<!-- 注意:序号跟内容之间要有空格 -->
<!-- 无序列表也可以用 * 替代 - -->
- 无序列表
- 无序列表
- 无序列表
- - 可以替换为 \* 或者 +
...
```
##### 有序列表 {#ordered-list}
```md
1. 有序列表
2. 有序列表
3. 有序列表
...
```
##### 任务列表
```md
<!-- 任务列表基于 mit 插件 markdown-it-task-lists 实现 -->
- [x] 任务列表
- [ ] 任务列表
- [ ] 任务列表
```
##### 嵌套列表
```md
1. 有序列表
- 无序列表
- 无序列表
2. 有序列表
- 无序列表
1. 有序列表
2. 有序列表
- 无序列表
```
::: details 示例
- 无序列表
- 无序列表
- 无序列表
---
1. 有序列表
2. 有序列表
3. 有序列表
---
1. 有序列表
- 无序列表
- 无序列表
2. 有序列表
---
- [x] 任务列表
- [ ] 任务列表
- [ ] 任务列表
---
- 无序列表
1. 有序列表
2. 有序列表
- 无序列表
:::
## 表格
```md
| 居左 | 居中 | 居右 |
| :--- | :--: | ---: |
| 内容 | 内容 | 内容 |
| 内容 | 内容 | 内容 |
```
::: details 示例
| 表头 | 表头 | 表头 |
| :------- | :------: | -------: |
| 居左内容 | 居中内容 | 居右内容 |
| 内容 | 内容 | 内容 |
:::
## 代码块
##### 单行代码块
```md
`单行代码块`
```
##### 多行代码块
````md
<!-- ```之后可以指定语言类型, ~~~ 可以替换 ``` -->
```md
多行代码块
多行代码块
```
````
::: details 示例
`单行代码块` `单行代码块` `单行代码块`
```md
多行代码块
多行代码块
```
:::
## 转义字符
要显示原义字符,否则将用于设置 Markdown 文档中的文本格式 `\`,请在字符前面添加反斜杠。
```md
\* 如果没有反斜杠,这将是无序列表中的项目符号。
- 如果没有反斜杠,这将是无序列表中的项目符号。
```
::: details 示例 \* 如果没有反斜杠,这将是无序列表中的项目符号。
- 如果没有反斜杠,这将是无序列表中的项目符号。
:::
## 脚注
```md
<!-- 脚注基于 mit 插件 markdown-it-footnote 实现 -->
<!-- 注解始终出现在页面最下方,即使注解下方仍有其他代码内容 -->
任意文字[^1]
[^1]:解释
```
任意文字[^1]
[^1]:解释

@ -6,15 +6,15 @@ VitePress 带有内置的 Markdown 扩展。
标题会自动应用锚点。可以使用 `markdown.anchor` 选项配置锚点的渲染。
### 自定义锚点 {#custom-anchors}
### Custom anchors
要为标题指定自定义锚标记,而不是使用自动生成的锚标记,请在标题中添加后缀:
To specify a custom anchor tag for a heading instead of using the auto-generated one, add a suffix to the heading:
```
# Using custom anchors {#my-anchor}
```
这允许你链接到标题 `#my-anchor` 而不是默认的 `#using-custom-anchors`
This allows you to link to the heading as `#my-anchor` instead of the default `#using-custom-anchors`.
## 链接 {#links}
@ -188,11 +188,9 @@ Danger zone, do not proceed
:::
::: details Click me to view the code
```js
console.log('Hello, VitePress!')
```
:::
````
@ -203,32 +201,11 @@ Danger zone, do not proceed
:::
::: details Click me to view the code
```js
console.log('Hello, VitePress!')
```
:::
此外,你可以通过在站点配置中添加以下内容来全局设置自定义标题,如果不是用英语书写,这会很有帮助:
```ts
// config.ts
export default defineConfig({
// ...
markdown: {
container: {
tipLabel: '提示',
warningLabel: '警告',
dangerLabel: '危险',
infoLabel: '信息',
detailsLabel: '详细信息',
},
},
// ...
})
```
### `raw`
这是一个特殊的容器,可以用来防止与 VitePress 的样式和路由冲突。这在记录组件库时特别有用。你可能还想查看 [whyframe](https://whyframe.dev/docs/integrations/vitepress) 以获得更好的隔离。
@ -243,29 +220,32 @@ Wraps in a <div class="vp-raw">
`vp-raw` class 也可以直接用于元素。样式隔离目前是可选的:
- 使用你喜欢的包管理器来安装 `postcss`
::: details
- 使用你喜欢的包管理器来安装需要的依赖项:
```sh
$ npm add -D postcss
$ npm install -D postcss postcss-prefix-selector
```
- 创建 `docs/postcss.config.mjs` 并将以下内容
- 创建 `docs/.postcssrc.cjs` 并将以下内容
```js
import { postcssIsolateStyles } from 'vitepress'
export default {
plugins: [postcssIsolateStyles()],
module.exports = {
plugins: {
'postcss-prefix-selector': {
prefix: ':not(:where(.vp-raw *))',
includeFiles: [/vp-doc\.css/],
transform(prefix, _selector) {
const [selector, pseudo = ''] = _selector.split(/(:\S*)$/)
return selector + prefix + pseudo
}
}
}
}
```
它在底层使用 [`postcss-prefix-selector`](https://github.com/postcss/postcss-load-config)。你可以像这样传递它的选项:
```js
postcssIsolateStyles({
includeFiles: [/vp-doc\.css/], // 默认 /base\.css/
})
```
:::
## 代码块中的语法高亮 {#syntax-highlighting-in-code-blocks}
@ -296,14 +276,16 @@ export default {
```js
export default {
name: 'MyComponent',
name: 'MyComponent'
// ...
}
```
```html
<ul>
<li v-for="todo in todos" :key="todo.id">{{ todo.text }}</li>
<li v-for="todo in todos" :key="todo.id">
{{ todo.text }}
</li>
</ul>
```
@ -401,9 +383,9 @@ export default {
export default {
data() {
return {
msg: 'Highlighted!', // [!code hl]
msg: 'Highlighted!' // [!code hl]
}
}
},
}
```
@ -435,9 +417,9 @@ export default {
export default {
data() {
return {
msg: 'Focused!', // [!code focus]
msg: 'Focused!' // [!code focus]
}
}
},
}
```
@ -503,9 +485,9 @@ export default {
data() {
return {
msg: 'Error', // [!code error]
msg: 'Warning', // [!code warning]
msg: 'Warning' // [!code warning]
}
}
},
}
```
@ -516,8 +498,8 @@ export default {
```js
export default {
markdown: {
lineNumbers: true,
},
lineNumbers: true
}
}
```
@ -525,8 +507,6 @@ export default {
你可以在你的代码块中添加 `:line-numbers` / `:no-line-numbers` 标记来覆盖在配置中的设置。
你还可以通过在 `:line-numbers` 之后添加 `=` 来自定义起始行号。例如, `:line-numbers=2` 表示代码块中的行号将从“2”开始。
**输入**
````md
@ -541,12 +521,6 @@ const line3 = 'This is line 3'
const line2 = 'This is line 2'
const line3 = 'This is line 3'
```
```ts:line-numbers=2 {1}
// line-numbers is enabled and start from 2
const line3 = 'This is line 3'
const line4 = 'This is line 4'
```
````
**输出**
@ -563,12 +537,6 @@ const line2 = 'This is line 2'
const line3 = 'This is line 3'
```
```ts:line-numbers=2 {1}
// line-numbers is enabled and start from 2
const line3 = 'This is line 3'
const line4 = 'This is line 4'
```
## 导入代码片段 {#import-code-snippets}
你可以通过下面的语法来从现有文件中导入代码片段:
@ -598,7 +566,7 @@ const line4 = 'This is line 4'
<<< @/snippets/snippet.js{2}
::: tip
`@` 的值对应于源代码根目录,默认情况下是 VitePress 项目根目录,除非配置了 `srcDir`。或者你也可以从相对路径导入:
`@` 的值对应于源代码根目录,默认情况下是 VitePress 项目根目录,除非配置了 `srcDir`。或者你也可以从相对路径导入:
```md
<<< ../snippets/snippet.js
@ -728,13 +696,13 @@ export default config
## 包含 markdown 文件 {#markdown-file-inclusion}
你可以在一个 markdown 文件中包含另一个 markdown 文件,甚至嵌套:
你可以像这样在一个 markdown 文件中包含另一个 markdown 文件,甚至是内嵌的。
::: tip 提示
还可以在 markdown 路径前加上 `@` 前缀,它将充当源根目录。默认情况下它是 VitePress 项目根目录,除非配置了 `srcDir`
::: tip
也可以使用 `@`,它的值对应于源代码根目录,默认情况下是 VitePress 项目根目录,除非配置了 `srcDir`
:::
例如,你可以使用以下方式包含一个相对路径的 markdown 文件:
例如,你可以这样用相对路径包含 Markdown 文件:
**输入**
@ -753,7 +721,7 @@ Some getting started stuff.
### Configuration {#configuration}
可以使用 `.foorc.json` 创建。
Can be created using `.foorc.json`.
```
**等价代码**
@ -767,93 +735,49 @@ Some getting started stuff.
### Configuration {#configuration}
可以使用 `.foorc.json` 创建。
Can be created using `.foorc.json`.
```
它还支持选择行范围:
It also supports selecting a line range:
**输入**
**Input**
```md
# Docs {#docs}
# Docs
## Basics {#basics}
## Basics
<!--@include: ./parts/basics.md{3,}-->
```
**另一个文件** (`parts/basics.md`)
**Part file** (`parts/basics.md`)
```md
Some getting started stuff.
### Configuration {#configuration}
### Configuration
可以使用 `.foorc.json` 创建。
Can be created using `.foorc.json`.
```
**等价代码**
**Equivalent code**
```md
# Docs {#docs}
# Docs
## Basics {#basics}
## Basics
### Configuration {#configuration}
### Configuration
可以使用 `.foorc.json` 创建。
Can be created using `.foorc.json`.
```
所选行范围的格式可以是: `{3,}`, `{,10}`, `{1,10}`
The format of the selected line range can be: `{3,}`, `{,10}`, `{1,10}`
::: warning 警告
注意!如果你指定的文件不存在,这将不会产生错误。因此,在使用这个功能的时候请保证内容按预期呈现。
::: warning
如果你指定的文件不存在,这将不会产生错误。因此,在使用这个功能的时候请保证内容按预期呈现。
:::
## Math Equations
This is currently opt-in. 要启用它, 你需要安装 `markdown-it-mathjax3`,在配置文件中设置`markdown.math` 为 `true`
```sh
npm add -D markdown-it-mathjax3
```
```ts
// .vitepress/config.ts
export default {
markdown: {
math: true,
},
}
```
**输入**
```md
当 $a \ne 0$, $(ax^2 + bx + c = 0)$ 有两个解,它们是
$$ x = {-b \pm \sqrt{b^2-4ac} \over 2a} $$
**Maxwell's 方程组:**
| 方程 | 描述 |
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------- |
| $\nabla \cdot \vec{\mathbf{B}} = 0$ | divergence of $\vec{\mathbf{B}}$ is zero |
| $\nabla \times \vec{\mathbf{E}}\, +\, \frac1c\, \frac{\partial\vec{\mathbf{B}}}{\partial t} = \vec{\mathbf{0}}$ | curl of $\vec{\mathbf{E}}$ is proportional to the rate of change of $\vec{\mathbf{B}}$ |
| $\nabla \times \vec{\mathbf{B}} -\, \frac1c\, \frac{\partial\vec{\mathbf{E}}}{\partial t} = \frac{4\pi}{c}\vec{\mathbf{j}} \nabla \cdot \vec{\mathbf{E}} = 4 \pi \rho$ | _wha?_ |
```
**输出**
当 $a \ne 0$, $(ax^2 + bx + c = 0)$ 有两个解,它们是
$$ x = {-b \pm \sqrt{b^2-4ac} \over 2a} $$
**Maxwell's 方程组:**
| 方程 | 描述 |
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------- |
| $\nabla \cdot \vec{\mathbf{B}} = 0$ | divergence of $\vec{\mathbf{B}}$ is zero |
| $\nabla \times \vec{\mathbf{E}}\, +\, \frac1c\, \frac{\partial\vec{\mathbf{B}}}{\partial t} = \vec{\mathbf{0}}$ | curl of $\vec{\mathbf{E}}$ is proportional to the rate of change of $\vec{\mathbf{B}}$ |
| $\nabla \times \vec{\mathbf{B}} -\, \frac1c\, \frac{\partial\vec{\mathbf{E}}}{\partial t} = \frac{4\pi}{c}\vec{\mathbf{j}} \nabla \cdot \vec{\mathbf{E}} = 4 \pi \rho$ | _wha?_ |
## 高级配置 {#advanced-configuration}
VitePress 使用 [markdown-it](https://github.com/markdown-it/markdown-it) 作为 Markdown 渲染器。上面提到的很多拓展功能都是通过自定义插件实现的。你可以使用 `.vitepress/config.js` 中的 `markdown` 选项来进一步自定义 `markdown-it` 实例。
@ -867,7 +791,7 @@ module.exports = {
// options for markdown-it-anchor
// https://github.com/valeriangalliat/markdown-it-anchor#usage
anchor: {
permalink: markdownItAnchor.permalink.headerLink(),
permalink: markdownItAnchor.permalink.headerLink()
},
// options for @mdit-vue/plugin-toc
@ -875,10 +799,10 @@ module.exports = {
toc: { level: [1, 2] },
config: (md) => {
// 使用更多 markdown-it 插件
// use more markdown-it plugins!
md.use(markdownItFoo)
},
},
}
}
}
```

@ -1,4 +1,4 @@
# MPA 模式 <Badge type="warning" text="实验性的" /> {#mpa-mode}
# MPA 模式 <Badge type="warning" text="experimental" /> {#mpa-mode}
可以通过命令行输入 `vitepress build --mpa` 或在配置文件中指定 `mpa: true` 配置选项来启用 MPA (Multi-Page Application) 模式。

@ -95,33 +95,7 @@ src/getting-started.md --> /getting-started.html
[Getting Started](./getting-started.html)
```
在[资源处理](./asset-handling)中了解有关链接到资源(例如图像)的更多信息。
### 链接到非 vitepress 页面 {#linking-to-non-vitepress-pages}
如果你想链接到网站中不是由 VitePress 生成的页面,你需要使用完整的 URL在新选项卡中打开或明确指定 target
**Input**
```md
[链接到 pure.html](/pure.html){target="\_self"}
```
**Output**
[链接到 pure.html](/pure.html){target="\_self"}
::: tip 注意
在 Markdown 链接中,`base` 会自动添加到 URL 前面。这意味着,如果你想链接到 `base` 之外的页面,则链接中需要类似 `../../pure.html` 的内容(由浏览器相对于当前页面解析)。
或者,你可以直接使用锚标记语法:
```md
<a href="/pure.html" target="_self">Link to pure.html</a>
```
:::
在[资源处理](asset-handling)中了解有关链接到资源(例如图像)的更多信息。
## 生成简洁的 URL {#generating-clean-url}
@ -292,7 +266,6 @@ export default {
```js
import fs from 'fs'
export default {
paths() {
return fs.readdirSync('packages').map((pkg) => {
@ -308,7 +281,6 @@ export default {
export default {
async paths() {
const pkgs = await (await fetch('https://my-api.com/packages')).json()
return pkgs.map((pkg) => {
return {
params: {
@ -335,10 +307,8 @@ export default {
```vue
<script setup>
import { useData } from 'vitepress'
// params is a Vue ref
const { params } = useData()
console.log(params.value)
</script>
```
@ -351,16 +321,17 @@ console.log(params.value)
```js
export default {
paths() {
async paths() {
const posts = await (await fetch('https://my-cms.com/blog-posts')).json()
return posts.map((post) => {
return {
params: { id: post.id },
content: post.content, // raw Markdown or HTML
content: post.content // raw Markdown or HTML
}
})
},
}
}
}
```

@ -1,22 +1,22 @@
# Sitemap 生成器 {#sitemap-generation}
# Sitemap Generation
VitePress 提供开箱即用的为你的网站生成 `sitemap.xml` 文件。要启用它,请将以下内容添加到 `.vitepress/config.js` 中:
VitePress comes with out-of-the-box support for generating a `sitemap.xml` file for your site. To enable it, add the following to your `.vitepress/config.js`:
```ts
import { defineConfig } from 'vitepress'
export default defineConfig({
sitemap: {
hostname: 'https://example.com',
},
hostname: 'https://example.com'
}
})
```
要在 `sitemap.xml` 中有 `<lastmod>` 标签,你可以启用 [`lastUpdated`](../reference/default-theme-last-updated) 选项。
To have `<lastmod>` tags in your `sitemap.xml`, you can enable the [`lastUpdated`](../reference/default-theme-last-updated) option.
## 选项 {#options}
## Options
站点地图由 [`sitemap`](https://www.npmjs.com/package/sitemap) 模块提供支持。你可以将其支持的任何选项传递给配置文件中的 `sitemap` 选项。这些将直接传递给 `SitemapStream` 构造函数。有关更多详细信息,请参阅 [`sitemap` 文档](https://www.npmjs.com/package/sitemap#options-you-can-pass)。例如:
Sitemap support is powered by the [`sitemap`](https://www.npmjs.com/package/sitemap) module. You can pass any options supported by it to the `sitemap` option in your config file. These will be passed directly to the `SitemapStream` constructor. Refer to the [`sitemap` documentation](https://www.npmjs.com/package/sitemap#options-you-can-pass) for more details. Example:
```ts
import { defineConfig } from 'vitepress'
@ -24,14 +24,14 @@ import { defineConfig } from 'vitepress'
export default defineConfig({
sitemap: {
hostname: 'https://example.com',
lastmodDateOnly: false,
},
lastmodDateOnly: false
}
})
```
## `transformItems` Hook
在将站点地图项写入 `sitemap.xml` 文件之前,你可以使用 `sitemap.transformItems` 钩子来修改站点地图项。使用站点地图项数组调用此挂钩,并期望返回站点地图项数组。例子:
You can use the `sitemap.transformItems` hook to modify the sitemap items before they are written to the `sitemap.xml` file. This hook is called with an array of sitemap items and expects an array of sitemap items to be returned. Example:
```ts
import { defineConfig } from 'vitepress'
@ -40,14 +40,14 @@ export default defineConfig({
sitemap: {
hostname: 'https://example.com',
transformItems: (items) => {
// 添加新项目或修改/过滤现有项目
// add new items or modify/filter existing items
items.push({
url: '/extra-page',
changefreq: 'monthly',
priority: 0.8,
priority: 0.8
})
return items
},
},
}
}
})
```

@ -48,11 +48,10 @@ if (!import.meta.env.SSR) {
}
```
因为 [`Theme.enhanceApp`](./custom-theme#theme-interface) 可以是异步的,所以你可以有条件地导入并注册访问浏览器 API 的 Vue 插件:
因为 [`Theme.enhanceApp`](/guide/custom-theme#theme-interface) 可以是异步的,所以你可以有条件地导入并注册访问浏览器 API 的 Vue 插件:
```js
// .vitepress/theme/index.js
/** @type {import('vitepress').Theme} */
export default {
// ...
async enhanceApp({ app }) {
@ -60,25 +59,8 @@ export default {
const plugin = await import('plugin-that-access-window-on-import')
app.use(plugin)
}
},
}
```
如果你使用 TypeScript:
```ts
// .vitepress/theme/index.ts
import type { Theme } from 'vitepress'
export default {
// ...
async enhanceApp({ app }) {
if (!import.meta.env.SSR) {
const plugin = await import('plugin-that-access-window-on-import')
app.use(plugin)
}
},
} satisfies Theme
```
### `defineClientComponent` {#`defineclientcomponent`}
@ -99,39 +81,4 @@ const ClientComp = defineClientComponent(() => {
</template>
```
你还可以将 props/children/slots 传递给目标组件:
```vue
<script setup>
import { ref } from 'vue'
import { defineClientComponent } from 'vitepress'
const clientCompRef = ref(null)
const ClientComp = defineClientComponent(
() => import('component-that-access-window-on-import'),
// args are passed to h() - https://vuejs.org/api/render-function.html#h
[
{
ref: clientCompRef,
},
{
default: () => 'default slot',
foo: () => h('div', 'foo'),
bar: () => [h('span', 'one'), h('span', 'two')],
},
],
// callback after the component is loaded, can be async
() => {
console.log(clientCompRef.value)
},
)
</script>
<template>
<ClientComp />
</template>
```
目标组件只会在包装组件的 mounted 钩子中导入。

@ -5,7 +5,7 @@
值得注意的是VitePress 利用 Vue 的编译器自动检测和优化 Markdown 内容的纯静态部分。静态内容被优化为单个占位符节点,并从页面的 JavaScript 负载中删除以供初始访问。在客户端激活期间也会跳过它们。简而言之,你只需注意任何给定页面上的动态部分。
:::tip SSR 兼容性
所有的 Vue 用法都需要兼容 SSR。参 [SSR 兼容性](./ssr-compat)获得更多信息和常见的解决方案。
所有的 Vue 用法都需要兼容 SSR。参 [SSR 兼容性](./ssr-compat)获得更多信息和常见的解决方案。
:::
## 模板化 {#templating}
@ -53,7 +53,9 @@ hello: world
const count = ref(0)
</script>
## Markdown Content The count is: {{ count }}
## Markdown Content
The count is: {{ count }}
<button :class="$style.button" @click="count++">Increment</button>
@ -123,7 +125,7 @@ This is a .md using a custom component
如果一个组件要在大多数页面上使用,可以通过自定义 Vue 实例来全局注册它们。有关示例,请参见[扩展默认主题](./extending-default-theme#registering-global-components)中的相关部分。
::: warning 重要
确保自定义组件的名称包含连字符或采用 PascalCase。否则它将被视为内联元素并包裹在 `<p>` 标签内,这将导致 [hydration(HTML 添加交互的过程)](https://blog.csdn.net/qq_41800366/article/details/117738916) mismatch,因为 `<p>` 不允许将块元素放置在其中。
确保自定义组件的名称包含连字符或采用 PascalCase。否则它将被视为内联元素并包裹在 `<p>` 标签内,这将导致激活不匹配,因为 `<p>` 不允许将块元素放置在其中。
:::
### 在标题中使用组件 <ComponentInHeader /> {#using-components-in-headers}
@ -141,6 +143,7 @@ This is a .md using a custom component
输出 HTML 由 [Markdown-it](https://github.com/Markdown-it/Markdown-it) 完成,而解析的标题由 VitePress 处理 (并用于侧边栏和文档标题)。
:::
## 转义 {#escaping}
可以通过使用 `v-pre` 指令将它们包裹在 `<span>` 或其他元素中来转义 Vue 插值:
@ -161,7 +164,7 @@ This <span v-pre>{{ will be displayed as-is }}</span>
```md
::: v-pre
{{ This will be displayed as-is }}
{{ This will be displayed as-is }}`
:::
```
@ -193,8 +196,6 @@ Hello {{ 1 + 1 }}
Hello {{ 1 + 1 }}
```
请注意,这可能会阻止某些标记被语法正确高亮显示。
## 使用 CSS 预处理器 {#using-css-pre-processors}
VitePress [内置支持](https://cn.vitejs.dev/guide/features.html#css-pre-processors) CSS 预处理器:`.scss`、`.sass`、.`less`、`.styl` 和 `.stylus` 文件。无需为它们安装 Vite 专用插件,但必须安装相应的预处理器:
@ -241,7 +242,6 @@ Vitepress 目前只有使用 teleport 传送到 body 的 SSG 支持。对于其
<script setup>
import ModalDemo from '../../components/ModalDemo.vue'
import ComponentInHeader from '../../components/ComponentInHeader.vue'
</script>
<style>

@ -12,20 +12,7 @@ VitePress 是一个[静态站点生成器](https://en.wikipedia.org/wiki/Static_
- **文档**
VitePress 附带一个专为技术文档设计的默认主题,尤其是那些需要嵌入交互式演示的主题。它驱动你正在阅读的这个页面,以及:[Vite](https://vitejs.dev/)、[Rollup](https://rollupjs.org/)、[Pinia](https://pinia.vuejs.org/)、[VueUse](https://vueuse.org/)、[Vitest](https://vitest.dev/)、[D3](https://d3js.org/)、[UnoCSS](https://unocss.dev/)、[Iconify](https://iconify.design/) and [many more](https://www.vuetelescope.com/explore?framework.slug=vitepress)。
<!-- - [Vite](https://vitejs.dev/): 下一代前端工具
- [Pinia](https://pinia.vuejs.org/): 直观的Vue.js store
- [VueUse](https://vueuse.org/): Vue 组合实用程序的集合
- [D3](https://d3js.org/): 用于定制数据可视化的 JavaScript 库
- [Rollup](https://rollupjs.org/): JavaScript 模块打包器
- [Mermaid](https://mermaid.js.org/): 图表和绘图工具
- [Wikimedia Codex](https://doc.wikimedia.org/codex/latest/): Wikimedia Design System
- [Vitest](https://vitest.dev/): 极快的单元测试框架
- [UnoCSS](https://unocss.dev/): instant on-demand atomic CSS engine
- [VitePWA](https://vite-pwa-org.netlify.app/): PWA integrations for Vite and the ecosystem
- [Iconify](https://iconify.design/): 自由选择图标
- [and many more](https://www.vuetelescope.com/explore?framework.slug=vitepress). -->
VitePress 附带一个专为技术文档设计的默认主题,尤其是那些需要嵌入交互式演示的主题。它支持你正在阅读的这个页面,以及 [Vite](https://vitejs.dev/)、[Pinia](https://pinia.vuejs.org/)、[VueUse](https://vueuse.org/)、[Mermaid](https://mermaid.js.org/)、[Wikimedia Codex](https://doc.wikimedia.org/codex/latest/) 等文档。
[Vue.js 官方文档](https://vuejs.org/) 也是基于 VitePress 的。但是为了可以在不同的翻译文档之间共享,它自定义了自己的主题
@ -61,10 +48,10 @@ VitePress 旨在使用 Markdown 生成内容时提供出色的开发体验。
为了能够嵌入静态 Markdown 中的动态 Vue 部分,每个 Markdown 页面都被处理为 Vue 组件并编译成 JavaScript。这听起来可能效率低下但 Vue 编译器足够聪明,可以将静态和动态部分分开,从而最大限度地减少激活成本和有效负载大小。对于初始页面加载,静态部分会自动从 JavaScript 有效负载中删除,并在激活期间跳过。
## VuePress 用户怎么办 {#what-about-vuepress}
## VuePress 又是什么 {#what-about-vuepress}
VitePress 灵感来源于 VuePress。最初的 VuePress 基于 Vue 2 和 webpack。借助 Vue 3 和 ViteVitePress 提供了更好的开发体验、更好的生产性能、更精美的默认主题和更灵活的自定义 API。
VitePress 和 VuePress 之间的 API 区别主要在于主题和定制。如果使用的是带有默认主题的 VuePress 1迁移到 VitePress 应该相对简单。
VitePress 和 VuePress 之间的 API 区别主要在于主题和定制。如果使用的是带有默认主题的 VuePress 1迁移到 VitePress 应该相对简单。
VuePress 2 也投入了精力,它也支持 Vue 3 和 Vite与 VuePress 1 的兼容性更好。但是,并行维护两个 SSG 是难以持续的,因此 Vue 团队决定将重点放在 VitePress作为长期的主要 SSG 选择推荐。

@ -11,7 +11,7 @@ hero:
actions:
- theme: brand
text: 认识 VitePress
link: /guide/getting-started
link: /zh/guide/what-is-vitepress
- theme: alt
text: GitHub
link: https://github.com/vuejs/vitepress
@ -33,14 +33,13 @@ features:
title: 速度真的很快!
details: 采用静态 HTML 实现快速的页面初次加载,使用客户端路由实现快速的页面切换导航。
---
<style>
:root {
--vp-home-hero-name-color: transparent;
--vp-home-hero-name-background: -webkit-linear-gradient(120deg, #bd34fe 30%, #41d1ff);
--vp-home-hero-image-background-image: linear-gradient(-45deg, #bd34fe 50%, #47caff 50%);
--vp-home-hero-image-filter: blur(44px);
--vp-home-hero-image-filter: blur(40px);
}
@media (min-width: 640px) {
@ -51,7 +50,7 @@ features:
@media (min-width: 960px) {
:root {
--vp-home-hero-image-filter: blur(68px);
--vp-home-hero-image-filter: blur(72px);
}
}
</style>

@ -20,14 +20,14 @@ vitepress dev [root]
| --------------- | ------------------------------------------ |
| `--open [path]` | 启动时打开浏览器 (`boolean \| string`) |
| `--port <port>` | 指定端口 (`number`) |
| `--base <path>` | 公共基础路径 (default: `/`) (`string`) |
| `--base <path>` | 公共 base URL (default: `/`) (`string`) |
| `--cors` | 启用 CORS |
| `--strictPort` | 如果指定的端口已被占用则退出 (`boolean`) |
| `--force` | 强制优化程序忽略缓存并重新绑定 (`boolean`) |
## `vitepress build`
构建用于生产的 VitePress 站点。
构建用于生产环境的 VitePress 站点。
### 用法 {#usage}
@ -40,9 +40,9 @@ vitepress build [root]
| 选项 | 说明 |
| ------------------------------ | ------------------------------------------------------------------------------------------------- |
| `--mpa` (experimental) | 在没有客户端 hydration 的 [MPA 模式](../guide/mpa-mode) 下构建 (`boolean`) |
| `--base <path>` | 公共基础路径 (default: `/`) (`string`) |
| `--base <path>` | 公共 base URL (default: `/`) (`string`) |
| `--target <target>` | 转译目标 (default: `"modules"`) (`string`) |
| `--outDir <dir>` | 相对于 **cwd** 的输出目录(默认值:`<root> /.vitepress/dist` (`string`) |
| `--outDir <dir>` | 输出目录 (default: `.vitepress/dist`) (`string`) |
| `--minify [minifier]` | 启用/禁用压缩,或指定要使用的压缩程序 (default: `"esbuild"`) (`boolean \| "terser" \| "esbuild"`) |
| `--assetsInlineLimit <number>` | 静态资源 base64 内联阈值(以字节为单位)(default: `4096`) (`number`) |
@ -60,7 +60,7 @@ vitepress preview [root]
| 选项 | 说明 |
| --------------- | -------------------------------------- |
| `--base <path>` | 公共基础路径 (default: `/`) (`string`) |
| `--base <path>` | 公共 base URL (default: `/`) (`string`) |
| `--port <port>` | 指定端口 (`number`) |
## `vitepress init`

@ -7,18 +7,17 @@
你可以使用全局组件 `Badge`
```html
### Title <Badge type="info" text="default" /> ### Title <Badge type="tip" text="^1.9.0" /> ### Title <Badge type="warning" text="beta" /> ### Title
<Badge type="danger" text="caution" />
### Title <Badge type="info" text="default" />
### Title <Badge type="tip" text="^1.9.0" />
### Title <Badge type="warning" text="beta" />
### Title <Badge type="danger" text="caution" />
```
上面的代码渲染如下:
### Title <Badge type="info" text="default" />
### Title <Badge type="tip" text="^1.9.0" />
### Title <Badge type="warning" text="beta" />
### Title <Badge type="danger" text="caution" />
## 自定义 `children` {#custom-children}
@ -33,25 +32,39 @@
## 自定义不同类型徽标的背景色 {#customize-type-color}
你可以通过覆写 css 来自定义不同类型 `<Badge />` 的样式。以下是默认值。
你可以通过覆盖 css 变量 `background-color` 来自定义不同类型 `<Badge />` 的背景色。以下是默认值。
```css
:root {
--vp-badge-info-border: transparent;
--vp-badge-info-border: var(--vp-c-divider-light);
--vp-badge-info-text: var(--vp-c-text-2);
--vp-badge-info-bg: var(--vp-c-default-soft);
--vp-badge-info-bg: var(--vp-c-white-soft);
--vp-badge-tip-border: var(--vp-c-green-dimm-1);
--vp-badge-tip-text: var(--vp-c-green-darker);
--vp-badge-tip-bg: var(--vp-c-green-dimm-3);
--vp-badge-warning-border: var(--vp-c-yellow-dimm-1);
--vp-badge-warning-text: var(--vp-c-yellow-darker);
--vp-badge-warning-bg: var(--vp-c-yellow-dimm-3);
--vp-badge-danger-border: var(--vp-c-red-dimm-1);
--vp-badge-danger-text: var(--vp-c-red-darker);
--vp-badge-danger-bg: var(--vp-c-red-dimm-3);
}
.dark {
--vp-badge-info-border: var(--vp-c-divider-light);
--vp-badge-info-bg: var(--vp-c-black-mute);
--vp-badge-tip-border: transparent;
--vp-badge-tip-text: var(--vp-c-brand-1);
--vp-badge-tip-bg: var(--vp-c-brand-soft);
--vp-badge-tip-border: var(--vp-c-green-dimm-2);
--vp-badge-tip-text: var(--vp-c-green-light);
--vp-badge-warning-border: transparent;
--vp-badge-warning-text: var(--vp-c-warning-1);
--vp-badge-warning-bg: var(--vp-c-warning-soft);
--vp-badge-warning-border: var(--vp-c-yellow-dimm-2);
--vp-badge-warning-text: var(--vp-c-yellow-light);
--vp-badge-danger-border: transparent;
--vp-badge-danger-text: var(--vp-c-danger-1);
--vp-badge-danger-bg: var(--vp-c-danger-soft);
--vp-badge-danger-border: var(--vp-c-red-dimm-2);
--vp-badge-danger-text: var(--vp-c-red-light);
}
```

@ -19,7 +19,7 @@ export default {
**此页面上记录的选项仅适用于默认主题**。不同的主题需要不同的主题配置。使用自定义主题时,主题配置对象将传递给主题,以便主题可以基于它作出不同表现。
## i18nRouting {#i18n-routing}
## i18nRouting {#i18nrouting}
- key: `i18nRouting`
- Type: `boolean`
@ -31,7 +31,7 @@ export default {
- key: `logo`
- Type: `ThemeableImage`
Logo file to display in nav bar, right before the site title. Accepts a path string, or an object to set a different logo for light/dark mode.
导航栏上显示的 Logo位于网站标题右侧。可以接受一个路径字符串或者一个对象来设置在浅色/深色模式下不同的 Logo。
```ts
export default {
@ -45,7 +45,7 @@ export default {
type ThemeableImage = string | { src: string; alt?: string } | { light: string; dark: string; alt?: string }
```
## 站点标题开关 {#site-title}
## 站点标题开关 {#sitetitle}
- key: `siteTitle`
- Type: `string | false`
@ -67,7 +67,7 @@ export default {
导航菜单项的配置。你可以在[默认主题: 导航栏](./default-theme-nav#navigation-links) 了解更多详情。
```ts
```js
export default {
themeConfig: {
nav: [
@ -115,7 +115,7 @@ interface NavItemWithChildren {
侧边栏菜单项的配置。你可以在[默认主题: 侧边栏](./default-theme-sidebar) 了解更多详情。
```ts
```js
export default {
themeConfig: {
sidebar: [
@ -169,52 +169,44 @@ export type SidebarItem = {
## 大纲开关 {#aside}
- key: `aside`
- Type: `boolean | 'left'`
- Type: `boolean`
- Default: `true`
- 每个页面可以通过 [frontmatter](./frontmatter-config#aside) 覆写
将此值设置为 `false` 可禁用 aside(大纲) 容器。\
将此值设置为 `true` 将在页面右侧渲染。\
将此值设置为 `left` 将在页面左侧渲染。
将此值设置为 `false` 可禁用 aside(大纲) 容器。
如果你想对所有页面禁用它,你应该使用 `outline: false`
### 大纲层级 {#outline}
## 大纲层级 {#outline}
- key: `outline`
- Type: `number | [number, number] | 'deep' | false`
- Default: `2`
- 每个页面可以通过 [frontmatter](./frontmatter-config#outline) 覆写
将此值设置为 `false` 可禁止渲染大纲容器。更多详情请参考该接口:
配置在大纲中显示的标题级别。你可以通过传递一个数字来指定一个特定的级别,或者你可以通过传递一个包含下限和上限的元组来提供一个级别范围。当传递等于 `[2, 6]``deep` 时,除 `h1` 外,所有标题级别都显示在轮廓中。设置 `false` 以隐藏轮廓。
```ts
interface Outline {
/**
* 大纲中显示的标题级别。
* 单个数字表示仅显示该级别的标题。
* 如果传递一个元组,则第一个数字是最小级别,第二个数字是最大级别。
* `'deep'` 和`[2, 6]` 等效, 这意味着 `<h2>``<h6>` 都会展示。
*
* @default 2
*/
level?: number | [number, number] | 'deep'
## 大纲标题 {#outlinetitle}
/**
* 要显示在大纲上的标题。
*
* @default 'On this page'
*/
label?: string
- key: `outlineTitle`
- Type: `string`
- Default: `On this page`
可用于自定义右侧边栏的标题(在大纲链接的顶部)。这在用另一种语言编写文档时很有用。
```js
export default {
themeConfig: {
outlineTitle: 'In hac pagina',
},
}
```
## 社交链接 {#social-links}
## 社交链接 {#sociallinks}
- key: `socialLinks`
- Type: `SocialLink[]`
你可以定义此选项以在导航栏中展示带有图标的社交帐户链接。
```ts
```js
export default {
themeConfig: {
socialLinks: [
@ -226,8 +218,6 @@ export default {
svg: '<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Dribbble</title><path d="M12...6.38z"/></svg>',
},
link: '...',
// 你也可以自定义标签别名以实现无障碍访问(可选但推荐):
ariaLabel: 'cool link',
},
],
},
@ -237,8 +227,7 @@ export default {
```ts
interface SocialLink {
icon: SocialLinkIcon
link: string
ariaLabel?: string
link: string
}
type SocialLinkIcon = 'discord' | 'facebook' | 'github' | 'instagram' | 'linkedin' | 'mastodon' | 'slack' | 'twitter' | 'youtube' | { svg: string }
@ -246,9 +235,7 @@ type SocialLinkIcon = 'discord' | 'facebook' | 'github' | 'instagram' | 'linkedi
## 页脚 {#footer}
- key: `footer`
- Type: `Footer`
- 每个页面可以通过 [frontmatter](./frontmatter-config#footer) 覆写
页脚配置。你可以添加 message 和 copyright。由于设计原因仅当页面不包含侧边栏时才会显示页脚。
@ -270,15 +257,14 @@ export interface Footer {
}
```
## 编辑链接 {#edit-link}
## 编辑链接 {#editlink}
- key: editLink
- Type: `EditLink`
- 每个页面可以通过 [frontmatter](./frontmatter-config#editlink) 覆写
编辑链接可让你显示链接以编辑 Git 管理服务(例如 GitHub 或 GitLab上的页面。有关详细信息请参阅 [默认主题:编辑链接](./default-theme-edit-link)。
```ts
```js
export default {
themeConfig: {
editLink: {
@ -296,48 +282,21 @@ export interface EditLink {
}
```
## 最近更新 {#last-updated}
## 最近更新时间文本 {#lastupdatedtext}
- key: `lastUpdated`
- Type: `LastUpdatedOptions`
- Type: `string`
- Default: `Last updated`
允许自定义上次更新的文本和日期格式
显示最近更新时间之前的前缀文本
```ts
export default {
themeConfig: {
lastUpdated: {
text: 'Updated at',
formatOptions: {
dateStyle: 'full',
timeStyle: 'medium',
},
},
lastUpdatedText: 'Updated Date',
},
}
```
```ts
export interface LastUpdatedOptions {
/**
* @default 'Last updated'
*/
text?: string
/**
* @default
* { dateStyle: 'short', timeStyle: 'short' }
*/
formatOptions?: Intl.DateTimeFormatOptions & { forceLocale?: boolean }
// calendar?: string | undefined;
// dayPeriod?: "narrow" | "short" | "long" | undefined;
// numberingSystem?: string | undefined;
// dateStyle?: "full" | "long" | "medium" | "short" | undefined;
// timeStyle?: "full" | "long" | "medium" | "short" | undefined;
// hourCycle?: "h11" | "h12" | "h23" | "h24" | undefined;
}
```
## algolia
- Type: `AlgoliaSearch`
@ -378,13 +337,13 @@ export interface CarbonAdsOptions {
Learn more in [Default Theme: Carbon Ads](./default-theme-carbon-ads)
## 翻页文案 {#doc-footer}
## 文档页脚 {#docFooter}
- Type: `DocFooter`
可用于自定义出现在上一篇和下一篇链接上方的文本。 如果不是用英语编写文档,这很有帮助。也可用于全局禁用上一个/下一个链接。如果你想选择性地启用/禁用上一个/下一个链接,可以使用 [frontmatter](./default-theme-prev-next-links)。
可用于自定义出现在上一篇和下一篇链接上方的文本。如果不是用英语编写文档,这很有帮助。
```ts
```js
export default {
themeConfig: {
docFooter: {
@ -397,12 +356,12 @@ export default {
```ts
export interface DocFooter {
prev?: string | false
next?: string | false
prev?: string
next?: string
}
```
## 暗模式开关标签 {#dark-mode-switch-label}
## 暗模式开关标签 {#darkmodeswitchlabel}
- key: `darkModeSwitchLabel`
- Type: `string`
@ -410,7 +369,7 @@ export interface DocFooter {
可用于自定义深色模式开关标签。此标签仅显示在移动视图中。
## 侧边栏菜单标签 {#sidebar-menu-label}
## 侧边栏菜单标签 {#sidebarmenulabel}
- key: `sidebarMenuLabel`
- Type: `string`
@ -418,7 +377,7 @@ export interface DocFooter {
可用于自定义侧边栏菜单标签。此标签仅显示在移动视图中。
## 返回顶部标签 {#return-to-top-label}
## 返回顶部标签 {#returntotoplabel}
- key: `returnToTopLabel`
- Type: `string`
@ -426,18 +385,10 @@ export interface DocFooter {
可用于自定义返回顶部按钮的标签。此标签仅显示在移动视图中。
## 多语言菜单标签 {#langmenu-label}
## 多语言菜单标签 {#langmenulabel}
- key: `langMenuLabel`
- Type: `string`
- Default: `Change language`
可用于自定义导航栏中语言切换按钮的 aria-label。这仅在你使用 [i18n](../guide/i18n) 时使用。
## 外部链接图标 {#external-link-icon}
- key: `externalLinkIcon`
- Type: `boolean`
- Default: `false`
是否在 Markdown 中的外部链接旁边显示外部链接图标。

@ -36,18 +36,8 @@ export default {
}
```
::: warning 警告
只有内联元素可以在 `message``copyright` 中使用,因为它们在 `<p> `元素。如果要添加块元素,请考虑改用 [`layout-bottom`](../guide/extending-default-theme#layout-slots) 插槽。
::: warning
Only inline elements can be used in `message` and `copyright` as they are rendered inside a `<p>` element. If you want to add block elements, consider using [`layout-bottom`](../guide/extending-default-theme#layout-slots) slot instead.
:::
请注意,当[侧边栏](./default-theme-sidebar)可见时,不会显示页脚。
## Frontmatter 配置 {#frontmatter-config}
可以使用 frontmatter 的 `footer` 选项在每页上禁用此功能:
```yaml
---
footer: false
---
```

@ -71,7 +71,7 @@ interface HeroAction {
### 自定义 name 的颜色 {#customizing-the-name-color}
VitePress 通过 (`--vp-c-brand-1`) 设置 `name` 的颜色 .但是,你可以通过覆写 `--vp-home-hero-name-color` 变量来自定义此颜色。
VitePress 通过 (`--vp-c-brand`) 设置 `name` 的颜色 .但是,你可以通过覆写 `--vp-home-hero-name-color` 变量来自定义此颜色。
```css
:root {
@ -116,26 +116,26 @@ features:
```ts
interface Feature {
// 在每个功能框上显示图标。
// Show icon on each feature box.
icon?: FeatureIcon
// 功能的标题。
// Title of the feature.
title: string
// 功能的详细信息。
// Details of the feature.
details: string
// 单击功能组件时的链接。该链接可以是内部链接,也可以是外部链接。
// Link when clicked on feature component. The link can
// be both internal or external.
//
// e.g. `guid/reference/default-theme-home-page` or `htttps://example.com`
link?: string
// 要在功能组件内显示的链接文本。最好与“link”选项一起使用。
// 例如 `Learn more`, `Visit page`, 等等
// Link text to be shown inside feature component. Best
// used with `link` option.
//
// e.g. `Learn more`, `Visit page`, etc.
linkText?: string
// `link` 选项的 Link rel 属性。
// 例如 `external`
rel?: string
}
type FeatureIcon =

@ -2,15 +2,11 @@
最近一条内容的更新时间会显示在页面右下角。要启用它,请将 `lastUpdated` 选项添加到你的配置中。
::: tip 提示
你需要 commit markdown 文件以查看更新的时间。
:::
## 全局配置 {#site-level-config}
```js
export default {
lastUpdated: true,
lastUpdated: true
}
```
@ -24,4 +20,3 @@ lastUpdated: false
---
```
另请参阅[默认主题:上次更新](./default-theme-last-updated#last-updated) 了解更多详细信息。主题级别的任何真值也将启用该功能,除非在站点或页面级别明确禁用。

@ -41,27 +41,3 @@ layout: doc
## 无布局 {#no-layout}
如果你不想要任何布局,你可以通过 frontmatter 传递 `layout: false`。如果你想要一个完全可自定义的登录页面(默认情况下没有任何侧边栏、导航栏或页脚),此选项很有用。
## 自定义布局 {#custom-layout}
你也可以使用自定义布局:
```md
---
layout: foo
---
```
这将在上下文中查找注册名为 `foo` 的组件。例如,你可以在 `.vitepress/theme/index.ts`中全局注册你的组件:
```ts
import DefaultTheme from 'vitepress/theme'
import Foo from './Foo.vue'
export default {
extends: DefaultTheme,
enhanceApp({ app }) {
app.component('foo', Foo)
},
}
```

@ -1,7 +1,3 @@
---
outline: deep
---
# 搜索 {#search}
## 本地搜索 {#local-search}
@ -63,122 +59,6 @@ export default defineConfig({
})
```
### 迷你搜索选项 {#miniSearch-options}
- key `miniSearch`
你可以像这样配置迷你搜索选项
```ts
import { defineConfig } from 'vitepress'
export default defineConfig({
themeConfig: {
search: {
provider: 'local',
options: {
miniSearch: {
/**
* @type {Pick<import('minisearch').Options, 'extractField' | 'tokenize' | 'processTerm'>}
*/
options: {
/* ... */
},
/**
* @type {import('minisearch').SearchOptions}
* @default
* { fuzzy: 0.2, prefix: true, boost: { title: 4, text: 2, titles: 1 } }
*/
searchOptions: {
/* ... */
},
},
},
},
},
})
```
查阅更多 [MiniSearch docs](https://lucaong.github.io/minisearch/classes/_minisearch_.minisearch.html).
### 自定义渲染内容 {#custom-content-renderer}
你可以在索引之前自定义用于渲染 Markdown 内容的函数:
```ts
import { defineConfig } from 'vitepress'
export default defineConfig({
themeConfig: {
search: {
provider: 'local',
options: {
/**
* @param {string} src
* @param {import('vitepress').MarkdownEnv} env
* @param {import('markdown-it')} md
*/
_render(src, env, md) {
// return html string
},
},
},
},
})
```
该函数将从客户端站点数据中剥离,因此你可以在其中使用 Node.js API。
#### 示例:从搜索中排除页面 {#example-excluding-pages-from-search}
你可以通过将 `search: false` 添加到页面的 frontmatter 来从搜索中排除页面。或者,你还可以将 `exclude` 函数传递给 `themeConfig.search.options`,以根据相对于 `srcDir` 的路径排除页面:
你可以通过将 `search: false` 添加到页面的 `frontmatter` 来从搜索中排除页面。或者:
```ts
import { defineConfig } from 'vitepress'
export default defineConfig({
themeConfig: {
search: {
provider: 'local',
options: {
_render(src, env, md) {
const html = md.render(src, env)
if (env.frontmatter?.search === false) return ''
if (env.relativePath.startsWith('some/path')) return ''
return html
},
},
},
},
})
```
::: warning 注意
如果提供了自定义的 `_render` 函数,你需要自己处理 `search: false` 的 frontmatter。此外在调用 `md.render` 之前,`env` 对象不会完全填充,因此对可选 `env` 属性(如 `frontmatter` )的任何检查都应该在此之后完成。
:::
#### 示例:转换内容-添加锚点{#example-transforming-content-adding-anchors}
```ts
import { defineConfig } from 'vitepress'
export default defineConfig({
themeConfig: {
search: {
provider: 'local',
options: {
_render(src, env, md) {
const html = md.render(src, env)
if (env.frontmatter?.title) return md.render(`# ${env.frontmatter.title}`) + html
return html
},
},
},
},
})
```
## Algolia Search {#algolia-search}
VitePress 支持使用 [Algolia DocSearch](https://docsearch.algolia.com/docs/what-is-docsearch) 搜索你的文档站点。请参阅他们的入门指南。在你的 `.vitepress/config.ts` 中,你至少需要提供以下内容才能使其正常工作:
@ -267,102 +147,6 @@ export default defineConfig({
[这些选项](https://github.com/vuejs/vitepress/blob/main/types/docsearch.d.ts)可以被覆盖。请参阅官方 Algolia 文档以了解更多信息。
### 爬虫配置 {#crawler-config}
以下是基于此站点使用的示例配置:
```ts
new Crawler({
appId: '...',
apiKey: '...',
rateLimit: 8,
startUrls: ['https://vitepress.dev/'],
renderJavaScript: false,
sitemaps: [],
exclusionPatterns: [],
ignoreCanonicalTo: false,
discoveryPatterns: ['https://vitepress.dev/**'],
schedule: 'at 05:10 on Saturday',
actions: [
{
indexName: 'vitepress',
pathsToMatch: ['https://vitepress.dev/**'],
recordExtractor: ({ $, helpers }) => {
return helpers.docsearch({
recordProps: {
lvl1: '.content h1',
content: '.content p, .content li',
lvl0: {
selectors: '',
defaultValue: 'Documentation',
},
lvl2: '.content h2',
lvl3: '.content h3',
lvl4: '.content h4',
lvl5: '.content h5',
},
indexHeadings: true,
})
},
},
],
initialIndexSettings: {
vitepress: {
attributesForFaceting: ['type', 'lang'],
attributesToRetrieve: ['hierarchy', 'content', 'anchor', 'url'],
attributesToHighlight: ['hierarchy', 'hierarchy_camel', 'content'],
attributesToSnippet: ['content:10'],
camelCaseAttributes: ['hierarchy', 'hierarchy_radio', 'content'],
searchableAttributes: [
'unordered(hierarchy_radio_camel.lvl0)',
'unordered(hierarchy_radio.lvl0)',
'unordered(hierarchy_radio_camel.lvl1)',
'unordered(hierarchy_radio.lvl1)',
'unordered(hierarchy_radio_camel.lvl2)',
'unordered(hierarchy_radio.lvl2)',
'unordered(hierarchy_radio_camel.lvl3)',
'unordered(hierarchy_radio.lvl3)',
'unordered(hierarchy_radio_camel.lvl4)',
'unordered(hierarchy_radio.lvl4)',
'unordered(hierarchy_radio_camel.lvl5)',
'unordered(hierarchy_radio.lvl5)',
'unordered(hierarchy_radio_camel.lvl6)',
'unordered(hierarchy_radio.lvl6)',
'unordered(hierarchy_camel.lvl0)',
'unordered(hierarchy.lvl0)',
'unordered(hierarchy_camel.lvl1)',
'unordered(hierarchy.lvl1)',
'unordered(hierarchy_camel.lvl2)',
'unordered(hierarchy.lvl2)',
'unordered(hierarchy_camel.lvl3)',
'unordered(hierarchy.lvl3)',
'unordered(hierarchy_camel.lvl4)',
'unordered(hierarchy.lvl4)',
'unordered(hierarchy_camel.lvl5)',
'unordered(hierarchy.lvl5)',
'unordered(hierarchy_camel.lvl6)',
'unordered(hierarchy.lvl6)',
'content',
],
distinct: true,
attributeForDistinct: 'url',
customRanking: ['desc(weight.pageRank)', 'desc(weight.level)', 'asc(weight.position)'],
ranking: ['words', 'filters', 'typo', 'attribute', 'proximity', 'exact', 'custom'],
highlightPreTag: '<span class="algolia-docsearch-suggestion--highlight">',
highlightPostTag: '</span>',
minWordSizefor1Typo: 3,
minWordSizefor2Typos: 7,
allowTyposOnNumericTokens: false,
minProximity: 1,
ignorePlurals: true,
advancedSyntax: true,
attributeCriteriaComputedByMinProximity: true,
removeWordsIfNoResults: 'allOptional',
},
},
})
```
<style>
img[src="/search.png"] {
width: 100%;

@ -179,38 +179,4 @@ export default {
]
}
}
```
## `useSidebar` <Badge type="info" text="composable" />
返回侧边栏相关数据。返回的对象具有以下类型:
```ts
export interface DocSidebar {
isOpen: Ref<boolean>
sidebar: ComputedRef<DefaultTheme.SidebarItem[]>
sidebarGroups: ComputedRef<DefaultTheme.SidebarItem[]>
hasSidebar: ComputedRef<boolean>
hasAside: ComputedRef<boolean>
leftAside: ComputedRef<boolean>
isSidebarEnabled: ComputedRef<boolean>
open: () => void
close: () => void
toggle: () => void
}
```
**示例:**
```vue
<script setup>
import { useSidebar } from 'vitepress/theme'
const { hasSidebar } = useSidebar()
</script>
<template>
<div v-if="hasSidebar">仅当侧边栏存在时展示</div>
</template>
```

@ -2,30 +2,22 @@
import { VPTeamMembers } from 'vitepress/theme'
const members = [
// {
// avatar: 'https://github.com/yyx990803.png',
// name: 'Evan You',
// title: 'Creator',
// links: [
// { icon: 'github', link: 'https://github.com/yyx990803' },
// { icon: 'twitter', link: 'https://twitter.com/youyuxi' }
// ]
// },
// {
// avatar: 'https://github.com/kiaking.png',
// name: 'Kia King Ishii',
// title: 'Developer',
// links: [
// { icon: 'github', link: 'https://github.com/kiaking' },
// { icon: 'twitter', link: 'https://twitter.com/KiaKing85' }
// ]
// }
{
avatar: 'https://avatars.githubusercontent.com/u/50388827?v=4',
name: 'VanchKong',
title: 'Translator',
avatar: 'https://github.com/yyx990803.png',
name: 'Evan You',
title: 'Creator',
links: [
{ icon: 'github', link: 'https://github.com/yyx990803' },
{ icon: 'twitter', link: 'https://twitter.com/youyuxi' }
]
},
{
avatar: 'https://github.com/kiaking.png',
name: 'Kia King Ishii',
title: 'Developer',
links: [
{ icon: 'github', link: 'https://github.com/vanchKong' },
{ icon: 'github', link: 'https://github.com/kiaking' },
{ icon: 'twitter', link: 'https://twitter.com/KiaKing85' }
]
}
]

@ -88,7 +88,7 @@ type HeadConfig = [string, Record<string, string>] | [string, Record<string, str
以下 frontmatter 选项仅在使用默认主题时适用。
### 布局 {#layout}
### 布局 <Badge type="info" text="default theme only" /> {#layout}
- key: `layout`
- Type: `doc | home | page`
@ -106,43 +106,15 @@ layout: doc
---
```
### hero <Badge type="info" text="home page only" />
### hero <Badge type="info" text="default theme only" /> <Badge type="info" text="Home page only" />
`layout` 设置为 `home` 时,定义主页 hero 部分的内容。更多详细信息:[默认主题:主页](./default-theme-home-page)。
### features <Badge type="info" text="home page only" />
### features <Badge type="info" text="default theme only" /> <Badge type="info" text="Home page only" />
定义当`layout` 设置为 `home` 时要在 features 部分中显示的项目。更多详细信息:[默认主题:主页](./default-theme-home-page)。
### 顶部导航条 {#navbar}
- key: `navbar`
- Type: `boolean`
- Default: `true`
是否显示 [顶部导航条](./default-theme-nav).
```yaml
---
navbar: false
---
```
### 侧边导航 {#sidebar}
- key: `sidebar`
- Type: `boolean`
- Default: `true`
是否显示 [侧边导航](./default-theme-sidebar).
```yaml
---
sidebar: false
---
```
### 大纲开关 {#aside}
### 大纲开关 <Badge type="info" text="default theme only" /> {#aside}
- key: `aside`
- Type: `boolean | 'left'`
@ -160,21 +132,21 @@ aside: false
---
```
### 大纲层级 {#outline}
### 大纲层级 <Badge type="info" text="default theme only" /> {#outline}
- key: `outline`
- Type: `number | [number, number] | 'deep' | false`
- Default: `2`
大纲中显示的标题级别。它与 [config.themeConfig.outline.level](./default-theme-config#outline) 相同,它会覆盖站点级的配置。
大纲中显示的标题级别。它与 [config.themeConfig.outline](./default-theme-config#outline) 相同,它会覆盖主题配置。
### 最近更新时间 {#lastupdated}
### 最近更新时间 <Badge type="info" text="default theme only" /> {#lastupdated}
- key: `lastUpdated`
- Type: `boolean | Date`
- Type: `boolean`
- Default: `true`
是否在当前页面的页脚中显示[最近更新时间](./default-theme-last-updated)的文本。如果指定了日期时间,则会显示该日期时间而不是上次 git 修改的时间戳。
是否在当前页面的页脚中显示[最近更新时间](./default-theme-last-updated)的文本。
```yaml
---
@ -182,7 +154,7 @@ lastUpdated: false
---
```
### 编辑链接 {#editlink}
### 编辑链接 <Badge type="info" text="default theme only" /> {#editlink}
- key: `editLink`
- Type: `boolean`
@ -195,37 +167,3 @@ lastUpdated: false
editLink: false
---
```
### 页脚 <Badge type="info" text="default theme only" />
- key: `footer`
- Type: `boolean`
- Default: `true`
是否显示[页脚](./default-theme-footer)。
```yaml
---
footer: false
---
```
### pageClass
- Type: `string`
将额外的类名称添加到特定页面。
```yaml
---
pageClass: custom-page-class
---
```
然后你可以在 `.vitepress/theme/custom.css` 文件中自定义该特定页面的样式:
```css
.custom-page-class {
  /* page-specific styles */
}
```

@ -85,27 +85,8 @@ interface Route {
```ts
interface Router {
/**
* Current route.
*/
route: Route
/**
* Navigate to a new URL.
*/
go: (to?: string) => Promise<void>
/**
* Called before the route changes. Return `false` to cancel the navigation.
*/
onBeforeRouteChange?: (to: string) => Awaitable<void | boolean>
/**
* Called before the page component is loaded (after the history state is
* updated). Return `false` to cancel the navigation.
*/
onBeforePageLoad?: (to: string) => Awaitable<void | boolean>
/**
* Called after the route changes.
*/
onAfterRouteChanged?: (to: string) => Awaitable<void>
go: (href?: string) => Promise<void>
}
```
@ -142,7 +123,7 @@ If you are using or demoing components that are not SSR-friendly (for example, c
</ClientOnly>
```
- 相关文档: [SSR 兼容性](../guide/ssr-compat)
- 相关文档:[SSR 兼容性](/guide/ssr-compat)
## `$frontmatter` <Badge type="info" text="template global" />

@ -10,7 +10,7 @@ Site config 可以定义站点的全局设置。App config 配置选项适用于
### 配置解析 {#config-resolution}
配置文件总是从 `<root>/.vitepress/config.[ext]` 解析,其中 `<root>` 是你的 VitePress [项目根目录](../guide/routing#root-and-source-directory)`[ext]` 是支持的文件扩展名之一。开箱即用地支持 TypeScript。支持的扩展名包括 `.js`、`.ts`、`.mjs` 和 `.mts`
配置文件总是从 `<root>/.vitepress/config.[ext]` 解析,其中 `<root>` 是你的 VitePress [项目根目录](../guide/routing#root-and-source-directory)`[ext]` 是支持的文件扩展名之一。开箱即用地支持 TypeScript。支持的扩展名包括 `.js`、`.ts`、`.cjs`、`.mjs`、`.cts` 和 `.mts`
建议在配置文件中使用 ES 模块语法。配置文件应该默认导出一个对象:
@ -158,48 +158,19 @@ export default {
- 每个页面可以通过 [frontmatter](./frontmatter-config#head) 添加
::: details 要在页面 HTML 的 `<head>` 标记中呈现的其他元素。用户添加的标签在结束 `head` 标签之前呈现,在 VitePress 标签之后。
Additional elements to render in the `<head>` tag in the page HTML. The user-added tags are rendered before the closing `head` tag, after VitePress tags.
:::
```ts
type HeadConfig = [string, Record<string, string>] | [string, Record<string, string>, string]
```
#### 示例:添加一个图标 {#example-adding-a-favicon}
```ts
export default {
head: [['link', { rel: 'icon', href: '/favicon.ico' }]],
} // put favicon.ico in public directory, if base is set, use /base/favicon.ico
/* Would render:
<link rel="icon" href="/favicon.ico">
*/
```
#### 示例:添加谷歌字体 {#example-adding-google-fonts}
```ts
export default {
head: [
['link', { rel: 'preconnect', href: 'https://fonts.googleapis.com' }],
['link', { rel: 'preconnect', href: 'https://fonts.gstatic.com', crossorigin: '' }],
['link', { href: 'https://fonts.googleapis.com/css2?family=Roboto&display=swap', rel: 'stylesheet' }],
[
'link',
{ rel: 'preconnect', href: 'https://fonts.gstatic.com', crossorigin: '' },
// would render:
//
// <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
],
}
/* 将会渲染成:
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
*/
```
#### 示例:添加一个 serviceWorker {#example-registering-a-service-worker}
```ts
export default {
head: [
[
'script',
{ id: 'register-sw' },
@ -208,47 +179,22 @@ export default {
navigator.serviceWorker.register('/sw.js')
}
})()`,
// would render:
//
// <script id="register-sw">
// ;(() => {
// if ('serviceWorker' in navigator) {
// navigator.serviceWorker.register('/sw.js')
// }
// })()
// </script>
],
],
}
/* 将会渲染成:
<script id="register-sw">
;(() => {
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/sw.js')
}
})()
</script>
*/
```
#### 示例:使用谷歌分析 {#example-using-google-analytics}
```ts
export default {
head: [
['script', { async: '', src: 'https://www.googletagmanager.com/gtag/js?id=TAG_ID' }],
[
'script',
{},
`window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'TAG_ID');`,
],
],
}
/* 将会渲染成:
<script async src="https://www.googletagmanager.com/gtag/js?id=TAG_ID"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'TAG_ID');
</script>
*/
type HeadConfig = [string, Record<string, string>] | [string, Record<string, string>, string]
```
### 语言 {#lang}
@ -300,7 +246,7 @@ export default {
- key: `rewrites`
- Type: `Record<string, string>`
自定义目录 &lt;-&gt; URL 映射。详细信息请参阅[路由:路由重写](../guide/routing#route-rewrites)。
自定义目录 <-> URL 映射。详细信息请参阅[路由:路由重写](../guide/routing#route-rewrites)。
```ts
export default {
@ -356,19 +302,6 @@ export default {
}
```
### assetsDir
- Type: `string`
- Default: `assets`
静态资源目录。另参阅: [assetsDir](https://vitejs.dev/config/build-options.html#build-assetsdir).
```ts
export default {
assetsDir: 'static',
}
```
### cacheDir
- key: `cacheDir`
@ -433,7 +366,7 @@ When set to `true`, the production app will be built in [MPA Mode](../guide/mpa-
### 外观 {#appearance}
- key: `appearance`
- Type: `boolean | 'dark' | 'force-dark' | import('@vueuse/core').UseDarkOptions`
- Type: `boolean | 'dark'`
- Default: `true`
是否启用深色模式(通过将 `.dark` 类添加到 `<html>` 元素)。
@ -444,8 +377,6 @@ When set to `true`, the production app will be built in [MPA Mode](../guide/mpa-
此选项注入一个内联脚本,使用 `vitepress-theme-appearance` key 从本地存储恢复用户设置。这确保在呈现页面之前应用 `.dark` 类以避免闪烁。
`appearance.initialValue` 只能是 `'dark' | undefined`。 不支持 Refs 或 getters。
### 最近更新时间 {#lastupdated}
- key: `lastUpdated`
@ -467,9 +398,19 @@ When set to `true`, the production app will be built in [MPA Mode](../guide/mpa-
```js
export default {
markdown: {...}
markdown: {
theme: 'material-theme-palenight',
lineNumbers: true,
// adjust how header anchors are generated,
// useful for integrating with tools that use different conventions
anchor: {
slugify(str) {
return encodeURIComponent(str)
},
},
},
}
```
以下是你可以在此对象中可配置的所有选项:
@ -522,24 +463,8 @@ interface MarkdownOptions extends MarkdownIt.Options {
// See: https://github.com/mdit-vue/mdit-vue/tree/main/packages/plugin-toc#options
toc?: TocPluginOptions
// @mdit-vue/plugin-component plugin options.
// See: https://github.com/mdit-vue/mdit-vue/tree/main/packages/plugin-component#options
component?: ComponentPluginOptions
// Configure the Markdown-it instance.
config?: (md: MarkdownIt) => void
// Same as `config` but will be applied before all other plugins.
preConfig?: (md: MarkdownIt) => void
// Disable cache (experimental)
cache?: boolean
// Math support (experimental)
// You need to install `markdown-it-mathjax3` and set `math` to `true` to enable it.
// You can also pass options to `markdown-it-mathjax3` here.
// See: https://github.com/tani/markdown-it-mathjax3#customization
math?: any
}
```
@ -631,7 +556,7 @@ interface SSGContext {
`transformHead` 是一个构建钩子,用于在生成每个页面之前转换 head。它将允许你添加无法静态添加到你的 VitePress 配置中的 head entries。你只需要返回额外的 entries它们将自动与现有 entries 合并。
::: warning 警告
不要改变 `context` 中的任何东西。
不要改变 `ctx` 中的任何东西。
:::
```ts
@ -656,32 +581,15 @@ interface TransformContext {
}
```
请注意,仅在静态生成站点时才会调用此挂钩。在开发期间不会调用它。如果你需要在开发期间添加动态头条目,你可以使用 [`transformPageData`](#transformpagedata) 钩子来替代:
```ts
export default {
transformPageData(pageData) {
pageData.frontmatter.head ??= []
pageData.frontmatter.head.push([
'meta',
{
name: 'og:title',
content: pageData.frontmatter.layout === 'home' ? `VitePress` : `${pageData.title} | VitePress`,
},
])
},
}
```
### transformHtml
- key: `transformHtml`
- Type: `(code: string, id: string, context: TransformContext) => Awaitable<string | void>`
- Type: `(code: string, id: string, ctx: TransformContext) => Awaitable<string | void>`
`transformHtml` 是一个构建钩子,用于在保存到磁盘之前转换每个页面的内容。
::: warning 警告
不要改变 `context` 中的任何东西。另外,修改 html 内容可能会导致运行时出现 hydration 问题。
不要改变 `ctx` 中的任何东西。另外,修改 html 内容可能会导致运行时出现 hydration 问题。
:::
```ts
@ -695,12 +603,12 @@ export default {
### transformPageData
- key: `transformPageData`
- Type: `(pageData: PageData, context: TransformPageContext) => Awaitable<Partial<PageData> | { [key: string]: any } | void>`
- Type: `(pageData: PageData, ctx: TransformPageContext) => Awaitable<Partial<PageData> | { [key: string]: any } | void>`
`transformPageData` 是一个钩子,用于转换每个页面的 `pageData`。你可以直接改变 `pageData` 或返回将合并到 `PageData` 中的更改值。
::: warning 警告
不要改变 `context` 中的任何东西。请注意,这可能会影响开发服务器的性能,特别是当你在钩子中有一些网络请求或大量计算(例如生成图像)时。你可以通过判断 `process.env.NODE_ENV === 'production'` 匹配符合条件的情况。
不要改变 `ctx` 中的任何东西。
:::
```ts

Loading…
Cancel
Save