docs(zh): improve translations (#3427)

pull/3431/head
Xavi Lee 11 months ago committed by GitHub
parent d2c6e37659
commit 3258cde376
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

@ -22,8 +22,8 @@ export const zh = defineConfig({
},
footer: {
message: '根据 MIT 许可发布。',
copyright: '版权所有 © 2019 至今 尤雨溪'
message: '基于 MIT 许可发布',
copyright: `版权所有 © 2019-${new Date().getFullYear()} 尤雨溪`
},
docFooter: {

@ -2,13 +2,13 @@
## 引用静态资源 {#referencing-static-assets}
所有的 Markdown 文件都会被编译成 Vue 组件,并由 [Vite](https://vitejs.dev/guide/assets.html) 处理。可以**并且应该**使用相对路径来引用资源:
所有的 Markdown 文件都会被编译成 Vue 组件,并由 [Vite](https://vitejs.dev/guide/assets.html) 处理。可以**并且应该**使用相对路径来引用资源:
```md
![An image](./image.png)
```
可以在 Markdown 文件、主题中的 `*.vue` 组件、样式和普通的 `.css` 文件中引用静态资源,通过使用绝对路径 (基于项目根目录) 或者相对路径 (基于文件系统)。后者类似于 Vite、Vue CLI 或者 webpack 的 `file-loader` 的行为。
可以在 Markdown 文件、主题中的 `*.vue` 组件、样式和普通的 `.css` 文件中引用静态资源,可以使用绝对路径 (基于项目根目录) 或者相对路径 (基于文件系统)。后者类似于 Vite、Vue CLI 或者 webpack 的 `file-loader` 的行为。
常见的图像,媒体和字体文件会被自动检测并视作资源。
@ -24,7 +24,7 @@
放置在 `public` 中的资源将按原样复制到输出目录的根目录中。
请注意,应使用根绝对路径来引用放置在 `public` 中的文件——例如,`public/icon.png` 应始终在源代码中作为 `/icon.png` 引用。
请注意,应使用根绝对路径来引用放置在 `public` 中的文件——例如,`public/icon.png` 应始终在源代码中使用 `/icon.png` 引用。
## 根 URL {#base-url}
@ -38,13 +38,13 @@
在这种情况下,更改 `base` 配置值时,**无需**更新该引用。
但是如果你正在编写一个主题组件,它动态地链接到资源,例如一个图片,它的 `src` 基于主题配置
但是如果你正在编写一个主题组件,它动态地链接到资源,例如一个图片,它的 `src` 基于主题配置:
```vue
<img :src="theme.logoPath" />
```
在这种情况下,建议使用 VitePress 提供的 [`withBase` helper](../reference/runtime-api#withbase) 来包路径:
在这种情况下,建议使用 VitePress 提供的 [`withBase` helper](../reference/runtime-api#withbase) 来包路径:
```vue
<script setup>

@ -53,4 +53,4 @@ outline: deep
## 整合指南 {#integration-guides}
如果你已经写了一篇关于如何将 VitePress 与特定 CMS 集成的指南,请点击下面的“在 GitHub 上编辑此页面”链接将它提交到这里!
如果你已经写了一篇关于如何将 VitePress 与特定 CMS 集成的指南,请点击下面的“在 GitHub 上编辑此页面”链接将它提交到这里!

@ -15,7 +15,7 @@
└─ package.json
```
当检测到存在主题入口文件时VitePress 总会使用自定义主题而不是默认主题。但你可以[展默认主题](./extending-default-theme)来在其基础上实现更高级的自定义。
当检测到存在主题入口文件时VitePress 总会使用自定义主题而不是默认主题。但你可以[展默认主题](./extending-default-theme)来在其基础上实现更高级的自定义。
## 主题接口 {#theme-interface}
@ -100,7 +100,7 @@ const { page } = useData()
</template>
```
[`useData()`](../reference/runtime-api#usedata) 为我们提供了所有的运行时数据,以便我们根据不同条件渲染不同的布局。我们可以访问的另一个数据是当前页面的 frontmatter。通过利用这个数据我们允许用户控制每个页面的布局。例如,用户可以指定一个页面是否使用特殊的主页布局:
[`useData()`](../reference/runtime-api#usedata) 为我们提供了所有的运行时数据,以便我们根据不同条件渲染不同的布局。我们可以访问的另一个数据是当前页面的 frontmatter。通过利用这个数据可以让用户单独控制每个页面的布局。例如,用户可以指定一个页面是否使用特殊的主页布局:
```md
---
@ -108,7 +108,7 @@ layout: home
---
```
并且我们可以调整我们的主题进行处理:
并且我们可以调整主题进行处理:
```vue{3,12-14}
<script setup>
@ -158,11 +158,11 @@ const { page, frontmatter } = useData()
如果你希望将主题作为 npm 包来分发,请按照下面的步骤操作:
1. 在包入口将主题对象作为默认导出来导出。
1. 在包入口将主题对象使用默认导出。
2. 如果合适的话,将主题配置类型定义作为 `ThemeConfig` 导出。
3. 如果主题需要调整 VitePress 配置,请在包的子路径下 (例如 `my-theme/config`) 下导出该配置,以便用户展。
3. 如果主题需要调整 VitePress 配置,请在包的子路径下 (例如 `my-theme/config`) 下导出该配置,以便用户展。
4. 记录主题配置选项 (通过配置文件和 frontmatter)。
@ -179,7 +179,7 @@ import Theme from 'awesome-vitepress-theme'
export default Theme
```
如果主题需要展:
如果主题需要展:
```js
// .vitepress/theme/index.js
@ -193,7 +193,7 @@ export default {
}
```
如果主题需要特殊的 VitePress 配置,也需要在配置中展:
如果主题需要特殊的 VitePress 配置,也需要在配置中展:
```ts
// .vitepress/theme/config.ts

@ -21,7 +21,7 @@ export default {
数据加载模块只在 Node.js 中执行,因此可以按需导入 Node API 和 npm 依赖。
然后,可以在 `.md` 页面和 `.vue` 组件中使用 `data` 名导出从该文件中导入数据:
然后,可以在 `.md` 页面和 `.vue` 组件中使用 `data` 名导出从该文件中导入数据:
```vue
<script setup>
@ -39,7 +39,7 @@ import { data } from './example.data.js'
}
```
你会注意到数据加载本身并没有导出 `data`。这是因为 VitePress 在后台调用了 `load()` 方法,并通过名为 `data`名导出隐式地暴露了结果。
你会注意到 data loader 本身并没有导出 `data`。这是因为 VitePress 在后台调用了 `load()` 方法,并通过名为 `data`名导出隐式地暴露了结果。
即使它是异步的,这也是有效的:
@ -54,11 +54,11 @@ export default {
## 使用本地文件生成数据 {#data-from-local-files}
当需要基于本地文件生成数据时,应该在数据加载中使用 `watch` 选项,以便这些文件改动时可以触发热更新。
当需要基于本地文件生成数据时,需要在 data loader 中使用 `watch` 选项,以便这些文件改动时可以触发热更新。
`watch` 选项也很方便,因为可以使用 [glob 模式](https://github.com/mrmlnc/fast-glob#pattern-syntax) 匹配多个文件。模式可以相对于数据加载文件本身,`load()` 函数将接收匹配文件的绝对路径。
下面的例子展示了如何使用 [csv-parse](https://github.com/adaltas/node-csv/tree/master/packages/csv-parse/) 加载 CSV 文件并将其转换为 JSON。因为此文件仅在构建时执行因此不会将 CSV 解析器发送到客户端
下面的例子展示了如何使用 [csv-parse](https://github.com/adaltas/node-csv/tree/master/packages/csv-parse/) 加载 CSV 文件并将其转换为 JSON。因为此文件仅在构建时执行因此不会将 CSV 解析器发送到客户端
```js
import fs from 'node:fs'
@ -68,7 +68,8 @@ export default {
watch: ['./data/*.csv'],
load(watchedFiles) {
// watchFiles 是一个所匹配文件的绝对路径的数组。
// 生成一个博客文章元数据数组,可用于在主题布局中呈现列表。
// 生成一个博客文章元数据数组
// 可用于在主题布局中呈现列表。
return watchedFiles.map((file) => {
return parse(fs.readFileSync(file, 'utf-8'), {
columns: true,
@ -81,7 +82,7 @@ export default {
## `createContentLoader`
当构建一个内容为主的站点时,我们经常需要创建一个“档”或“索引”页面:一个我们可以列出内容中的所有可用条目的页面,例如博客文章或 API 页面。我们**可以**直接使用数据加载 API 实现这一点,但由于这是一个常见的用例VitePress 还提供了一个 `createContentLoader` 辅助函数来简化这个过程:
当构建一个内容为主的站点时,我们经常需要创建一个“档”或“索引”页面:一个我们可以列出内容中的所有可用条目的页面,例如博客文章或 API 页面。我们**可以**直接使用数据加载 API 实现这一点,但由于这会经常使用VitePress 还提供了一个 `createContentLoader` 辅助函数来简化这个过程:
```js
// posts.data.js
@ -112,7 +113,7 @@ interface ContentData {
}
```
默认情况下只提供 `url``frontmatter`。这是因为加载的数据将作为 JSON 内联在客户端中,我们需要谨慎考虑其大小。下面的例子展示了如何使用数据构建最小的博客索引页面:
默认情况下只提供 `url``frontmatter`。这是因为加载的数据将作为 JSON 内联在客户端 bundle 中,我们需要谨慎考虑其大小。下面的例子展示了如何使用数据构建最小的博客索引页面:
```vue
<script setup>
@ -212,7 +213,7 @@ interface ContentOptions<T = ContentData[]> {
}
```
## 为数据加载器导出类型 {#typed-data-loaders}
## 为 data loader 导出类型 {#typed-data-loaders}
当使用 TypeScript 时,可以像这样为 loader 和 `data` 导出类型:
@ -237,7 +238,7 @@ export default defineLoader({
## 配置 {#configuration}
要获取数据加载中的配置信息,可以使用如下代码:
要获取 data loader 中的配置信息,可以使用如下代码:
```ts
import type { SiteConfig } from 'vitepress'

@ -33,7 +33,7 @@ outline: deep
$ npm run docs:preview
```
`preview` 命令将启动一个本地静态 Web 服务器`http://localhost:4173`,该服务器`.vitepress/dist` 作为源文件。这是检查生产版本在本地环境中是否正常的一种简单方法。
`preview` 命令将启动一个本地静态 Web 服务 `http://localhost:4173`,该服务`.vitepress/dist` 作为源文件。这是检查生产版本在本地环境中是否正常的一种简单方法。
3. 可以通过传递 `--port` 作为参数来配置服务器的端口。
@ -45,13 +45,13 @@ outline: deep
}
```
现在 `docs:preview` 方法将在 `http://localhost:8080` 启动服务
现在 `docs:preview` 方法将`http://localhost:8080` 启动服务。
## 设定 public 根目录 {#setting-a-public-base-path}
默认情况下,我们假设站点将部署在域名 `/`的根路径上。如果站点在子路径中提供服务,例如 `https://mywebsite.com/blog/`,则需要在 VitePress 配置中将 [`base`](../reference/site-config#base)选项设置为 `'/blog/'`
默认情况下,我们假设站点将部署在域名 (`/`) 的根路径上。如果站点在子路径中提供服务,例如 `https://mywebsite.com/blog/`,则需要在 VitePress 配置中将 [`base`](../reference/site-config#base) 选项设置为 `'/blog/'`
**例** 如果你使用的是 Github或 GitLab页面并部署到 `user.github.io/repo/`,请将 `base` 设置为 `/repo/`
**例**如果你使用的是 Github或 GitLab页面并部署到 `user.github.io/repo/`,请将 `base` 设置为 `/repo/`
## HTTP 缓存标头 {#http-cache-headers}
@ -73,7 +73,7 @@ Cache-Control: max-age=31536000,immutable
cache-control: immutable
```
注意:该 `_headers` 文件应放置在[public 目录](/guide/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/)
@ -127,12 +127,12 @@ Cache-Control: max-age=31536000,immutable
name: Deploy VitePress site to Pages
on:
# 在针对 `main` 分支的推送上运行。如果
# 在针对 `main` 分支的推送上运行。如果
# 使用 `master` 分支作为默认分支,请将其更改为 `master`
push:
branches: [main]
# 允许从 Actions 选项卡手动运行此工作流程
# 允许从 Actions 选项卡手动运行此工作流程
workflow_dispatch:
# 设置 GITHUB_TOKEN 的权限,以允许部署到 GitHub Pages

@ -214,7 +214,7 @@ export default {
- `nav-screen-content-before`
- `nav-screen-content-after`
## Using View Transitions API
## 使用视图过渡 API
### 关于外观切换 {#on-appearance-toggle}

@ -1,6 +1,6 @@
# Markdown 展 {#markdown-extensions}
# Markdown 展 {#markdown-extensions}
VitePress 带有内置的 Markdown 展。
VitePress 带有内置的 Markdown 展。
## 标题锚点 {#header-anchors}
@ -58,7 +58,7 @@ VitePress 带有内置的 Markdown 拓展。
外部链接带有 `target="_blank" rel="noreferrer"`
- [vuejs.org](https://vuejs.org)
- [vuejs.org](https://cn.vuejs.org)
- [VitePress on GitHub](https://github.com/vuejs/vitepress)
## frontmatter {#frontmatter}
@ -634,7 +634,7 @@ const line4 = 'This is line 4'
<<< @/snippets/snippet.cs{1,2,4-6 c#:line-numbers}
```
如果无法从文件展名推测出源语言,这将会很有帮助
如果无法从文件展名推测出源语言,这将会很有帮助
## 代码组 {#code-groups}
@ -870,7 +870,7 @@ export default {
## 高级配置 {#advanced-configuration}
VitePress 使用 [markdown-it](https://github.com/markdown-it/markdown-it) 作为 Markdown 渲染器。上面提到的很多展功能都是通过自定义插件实现的。可以使用 `.vitepress/config.js` 中的 `markdown` 选项来进一步自定义 `markdown-it` 实例。
VitePress 使用 [markdown-it](https://github.com/markdown-it/markdown-it) 作为 Markdown 渲染器。上面提到的很多展功能都是通过自定义插件实现的。可以使用 `.vitepress/config.js` 中的 `markdown` 选项来进一步自定义 `markdown-it` 实例。
```js
import { defineConfig } from 'vitepress'

@ -1,4 +1,4 @@
# 从 VitePress 0.x 迁移 {#migration-from-vitepress-0-x}
n# 从 VitePress 0.x 迁移 {#migration-from-vitepress-0-x}
如果你来自 VitePress 0.x 版本VitePress 有了一些重大更改。请按照本指南了解如何将应用程序迁移到最新的 VitePress。

@ -20,4 +20,4 @@ document.querySelector('h1').addEventListener('click', () => {
`<script client>` 是 VitePress 独有的功能,而不是 Vue 的功能。它可以在 `.md``.vue` 文件中使用,但只能在 MPA 模式下使用。所有主题组件中的客户端脚本将被打包在一起,而特定页面的客户端脚本将会分开处理。
请注意,`<script client>` **不会被视为 Vue 组件代码**:它会看做普通的 JavaScript 模块来处理。因此,只有在站点需要绝对最小的客户端交互性时,才应该使用 MPA 模式。
请注意,`<script client>` **不会被视为 Vue 组件代码**:它将是普通的 JavaScript 模块。因此,只有在站点需要绝对最小的客户端交互性时,才应该使用 MPA 模式。

@ -26,7 +26,7 @@ guide/index.md --> /guide/index.html (可以通过 /guide/ 访问)
guide/getting-started.md --> /guide/getting-started.html
```
生成的 HTML 可以托管在任何可以提供静态文件的 Web 服务器上。
生成的 HTML 可以托管在任何支持静态文件的 Web 服务器上。
## 根目录和源目录 {#root-and-source-directory}
@ -81,7 +81,7 @@ src/getting-started.md --> /getting-started.html
## 链接页面 {#linking-between-pages}
在页面之间链接时,可以使用绝对路径和相对路径。请注意,虽然 `.md``.html` 扩展名都可以使用,但最佳做法是省略文件扩展名,以便 VitePress 可以根据配置生成最终 URL。
在页面之间链接时,可以使用绝对路径和相对路径。请注意,虽然 `.md``.html` 扩展名都可以使用,但最佳做法是省略文件扩展名,以便 VitePress 可以根据配置生成最终 URL。
```md
<!-- Do -->
@ -95,7 +95,7 @@ src/getting-started.md --> /getting-started.html
在[资源处理](./asset-handling)中了解有关链接到资源(例如图像)的更多信息。
### 链接到非 vitepress 页面 {#linking-to-non-vitepress-pages}
### 链接到非 VitePress 页面 {#linking-to-non-vitepress-pages}
如果想链接到站点中不是由 VitePress 生成的页面,需要使用完整的 URL在新选项卡中打开或明确指定 target
@ -124,14 +124,14 @@ src/getting-started.md --> /getting-started.html
## 生成简洁的 URL {#generating-clean-url}
:::warning 需要服务器支持
要使 VitePress 提供简洁 URL需要服务器端支持。
要使 VitePress 提供简洁 URL需要服务器端支持。
:::
默认情况下VitePress 将入站链接解析为以 `.html` 结尾的 URL。但是一些用户可能更喜欢没有 .html 扩展名的“简洁 URL”——例如`example.com/path` 而不是 `example.com/path.html`
某些服务器或托管平台(例如 Netlify 或 Vercel提供将 `/foo` 之类的 URL 映射到 `/foo.html`(如果存在)的功能,而无需重定向:
某些服务器或托管平台 (例如 Netlify 或 Vercel) 提供将 `/foo` 之类的 URL 映射到 `/foo.html` (如果存在) 的功能,而无需重定向:
- Netlify 默认支持这个
- Netlify 默认支持。
- Vercel 需要在 [vercel.json 中启用 cleanUrls 选项](https://vercel.com/docs/concepts/projects/project-configuration#cleanurls)。
如果可以使用此功能,还可以启用 VitePress 自己的 [`cleanUrls`](../reference/site-config#cleanurls) 配置选项,以便:
@ -139,7 +139,7 @@ src/getting-started.md --> /getting-started.html
- 页面之间的入站链接是在没有 `.html` 扩展名的情况下生成的。
- 如果当前路径以 `.html` 结尾,路由器将执行客户端重定向到无扩展路径。
但是,如果无法为服务器配置此类支持(例如 GitHub 页面),则必须手动采用以下目录结构:
但是,如果无法为服务器配置此类支持 (例如 GitHub Pages),则必须手动采用以下目录结构:
```
.
@ -196,7 +196,7 @@ export default {
}
```
重写路径是使用 `path-to-regexp` 包编译的——请参阅其[文档](https://github.com/pillarjs/path-to-regexp#parameters)以获取更高级的语法。
重写路径是使用 `path-to-regexp` 包编译的——请参阅其[文档](https://github.com/pillarjs/path-to-regexp#parameters)以获取更语法。
::: warning 开启重写功能时使用相对链接
@ -213,7 +213,7 @@ export default {
### 路径加载文件 {#paths-loader-file}
由于 VitePress 是静态站点生成器,因此**必须**在构建时确定可能的页面路径。因此,动态路由页面必须伴随**路径加载文件**。对于 `packages/[pkg].md`,我们需要 `packages/[pkg].paths.js`(也支持 `.ts`
由于 VitePress 是静态站点生成器,因此**必须**在构建时确定可能的页面路径。因此,动态路由页面必须伴随**路径加载文件**。对于 `packages/[pkg].md`,我们需要 `packages/[pkg].paths.js` (也支持 `.ts`)
```
.
@ -251,7 +251,7 @@ export default {
动态路由可以包含多个参数:
**File Structure**
**文件结构**
```
.
@ -332,7 +332,7 @@ export default {
- version: {{ $params.version }}
```
还可以通过 [`useData`](../reference/runtime-api#usedata) runtime API 访问当前页面的参数。这在 Markdown 文件和 Vue 组件中都可用:
还可以通过 [`useData`](../reference/runtime-api#usedata) 运行时 API 访问当前页面的参数。这在 Markdown 文件和 Vue 组件中都可用:
```vue
<script setup>

@ -6,7 +6,7 @@ outline: deep
通过使用 Vue 的服务器端渲染 (SSR) 功能VitePress 能够在生产构建期间在 Node.js 中预渲染应用程序。这意味着主题组件中的所有自定义代码都需要考虑 SSR 兼容性。
[Vue 官方文档的 SSR 部分](https://cn.vuejs.org/guide/scaling-up/ssr.html)提供了更多有关 SSR 是什么SSR / SSG 之间的关系以及编写 SSR 友好代码的常见注意事项等信息。原则上只在 Vue 组件的 `beforeMount``mounted` 钩子中访问 browser / DOM API。
[Vue 官方文档的 SSR 部分](https://cn.vuejs.org/guide/scaling-up/ssr.html)提供了更多有关 SSR 是什么SSR / SSG 之间的关系以及编写 SSR 友好代码的常见注意事项等信息。原则上只在 Vue 组件的 `beforeMount``mounted` 钩子中访问浏览器或 DOM API。
## `<ClientOnly>`
@ -38,7 +38,7 @@ onMounted(() => {
### 条件导入 {#conditional-import}
也可以使用 `import.meta.env.SSR` 标志 ([Vite 环境变量](https://cn.vitejs.dev/guide/env-and-mode.html#env-变量)的一部分) 来有条件地导入依赖项:
也可以使用 `import.meta.env.SSR` 标志 ([Vite 环境变量](https://cn.vitejs.dev/guide/env-and-mode.html#env-variables)的一部分) 来有条件地导入依赖项:
```js
if (!import.meta.env.SSR) {
@ -109,7 +109,7 @@ const clientCompRef = ref(null)
const ClientComp = defineClientComponent(
() => import('component-that-access-window-on-import'),
// 参数传递给 h() - https://vuejs.org/api/render-function.html#h
// 参数传递给 h() - https://cn.vuejs.org/api/render-function.html#h
[
{
ref: clientCompRef

@ -26,7 +26,7 @@
### 指令 {#directives}
也可以使用指令 (请注意,根据设计,原始 HTML 在 Markdown 中也有效):
也可以使用指令 (请注意,原始 HTML 在 Markdown 中也有效):
**输入**
@ -111,7 +111,7 @@ import CustomComponent from '../../components/CustomComponent.vue'
# Docs
这是一个使用自定义组件的 .md
This is a .md using a custom component
<CustomComponent />

@ -1,6 +1,6 @@
# VitePress 是什么? {#what-is-vitepress}
VitePress 是一个[静态站点生成器](https://en.wikipedia.org/wiki/Static_site_generator) (SSG)专为构建快速、以内容为中心的站点而设计。简而言之VitePress 获取用 Markdown 编写的内容,对其应用主题,并生成可以轻松部署到任何地方的静态 HTML 页面。
VitePress 是一个[静态站点生成器](https://en.wikipedia.org/wiki/Static_site_generator) (SSG)专为构建快速、以内容为中心的站点而设计。简而言之VitePress 获取用 Markdown 编写的内容,对其应用主题,并生成可以轻松部署到任何地方的静态 HTML 页面。
<div class="tip custom-block" style="padding-top: 8px">
@ -12,13 +12,13 @@ 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/) [](https://www.vuetelescope.com/explore?framework.slug=vitepress)文档提供了支持
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/) [](https://www.vuetelescope.com/explore?framework.slug=vitepress)文档都是基于这个主题的
[Vue.js 官方文档](https://vuejs.org/)也是基于 VitePress 的。但是为了可以在不同的翻译文档之间共享,它自定义了自己的主题
[Vue.js 官方文档](https://cn.vuejs.org/)也是基于 VitePress 的。但是为了可以在不同的翻译文档之间切换,它自定义了自己的主题。
- **博客、档案和营销网站**
VitePress 支持[完全的自定义主题](./custom-theme),具有标准 Vite + Vue 应用程序的开发体验。基于 Vite 构建还意味着可以直接利用其丰富生态系统中的 Vite 插件。此外VitePress 提供了灵活的 API 来[加载数据](./data-loading) (本地或远程),也可以[动态生成路由](./routing#dynamic-routes)。只要可以在构建时确定数据,就可以使用它来构建几乎任何东西。
VitePress 支持[完全的自定义主题](./custom-theme),具有标准 Vite + Vue 应用程序的开发体验。基于 Vite 构建还意味着可以直接利用其生态系统中丰富的 Vite 插件。此外VitePress 提供了灵活的 API 来[加载数据](./data-loading) (本地或远程),也可以[动态生成路由](./routing#dynamic-routes)。只要可以在构建时确定数据,就可以使用它来构建几乎任何东西。
[Vue.js 官方博客](https://blog.vuejs.org/)是一个简单的博客页面,它根据本地内容生成其索引页面。
@ -26,7 +26,7 @@ VitePress 是一个[静态站点生成器](https://en.wikipedia.org/wiki/Static_
VitePress 旨在使用 Markdown 生成内容时提供出色的开发体验。
- **[Vite 驱动](https://cn.vitejs.dev/)**:即时服务器启动,始终立即反映<100ms编辑变化,无需重新加载页面。
- **[Vite 驱动](https://cn.vitejs.dev/)**:即时服务器启动,始终立即反映 (<100ms) 编辑变化,无需重新加载页面。
- **[内置 Markdown 扩展](./markdown)**frontmatter、表格、语法高亮……应有尽有。具体来说VitePress 提供了许多用于处理代码块的高级功能,使其真正成为技术文档的理想选择。
@ -36,17 +36,17 @@ VitePress 旨在使用 Markdown 生成内容时提供出色的开发体验。
与许多传统的 SSG 不同VitePress 生成的站点实际上是一个[单页应用程序](https://en.wikipedia.org/wiki/Single-page_application) (SPA)。
- **快速初始加载**
- **快速初始加载**
对任何页面的初次访问都将提供静态的、预呈现的 HTML以实现极快的加载速度和最佳的 SEO。然后页面加载一个 JavaScript ,将页面变成 Vue SPA (这被称为“激活”)。激活是非常快的:在 [PageSpeed Insights](https://pagespeed.web.dev/report?url=https%3A%2F%2Fvitepress.dev%2F) 上,典型的 VitePress 站点即使在网络速度较慢的低端移动设备上也能获得近乎完美的性能分数。
对任何页面的初次访问都将会是静态的、预呈现的 HTML以实现极快的加载速度和最佳的 SEO。然后页面加载一个 JavaScript bundle,将页面变成 Vue SPA (这被称为“激活”)。激活是非常快的:在 [PageSpeed Insights](https://pagespeed.web.dev/report?url=https%3A%2F%2Fvitepress.dev%2F) 上,典型的 VitePress 站点即使在网络速度较慢的低端移动设备上也能获得近乎完美的性能分数。
- **加载完成后可以快速切换**
更重要的是SPA 模型在首次加载后能够提升用户体验。用户在站点内导航时,不会再触发整个页面的刷新。而是通过获取并动态更新页面的内容来实现切换。VitePress还会自动预加载视口范围内链接对应的页面片段。这样一来大部分情况下用户在加载完成后就能立即浏览新页面。
更重要的是SPA 模型在首次加载后能够提升用户体验。用户在站点内导航时不会再触发整个页面的刷新。而是通过获取并动态更新页面的内容来实现切换。VitePress 还会自动预加载视口范围内链接对应的页面片段。这样一来,大部分情况下,用户在加载完成后就能立即浏览新页面。
- **高效的交互**
为了能够嵌入静态 Markdown 中的动态 Vue 部分,每个 Markdown 页面都被处理为 Vue 组件并编译成 JavaScript。这听起来可能效率低下但 Vue 编译器足够聪明,可以将静态和动态部分分开,从而最大限度地减少激活成本和有效负载大小。对于初始页面加载,静态部分会自动从 JavaScript 有效负载中删除,并在激活期间跳过。
为了能够嵌入静态 Markdown 中的动态 Vue 部分,每个 Markdown 页面都被处理为 Vue 组件并编译成 JavaScript。这听起来可能效率低下但 Vue 编译器足够聪明,可以将静态和动态部分分开,从而最大限度地减少激活成本和有效负载大小。对于初始页面加载,静态部分会自动从 JavaScript 有效负载中删除,并在激活期间跳过。
## VuePress 又是什么? {#what-about-vuepress}
@ -54,4 +54,4 @@ VitePress 灵感来源于 VuePress。最初的 VuePress 基于 Vue 2 和 webpack
VitePress 和 VuePress 之间的 API 区别主要在于主题和自定义。如果使用的是带有默认主题的 VuePress 1迁移到 VitePress 应该相对简单。
VuePress 2 也投入了精力,它也支持 Vue 3 和 Vite与 VuePress 1 的兼容性更好。但是,并行维护两个 SSG 是难以持续的,因此 Vue 团队决定将重点放在 VitePress作为长期的主要 SSG 选择推荐。
VuePress 2 我们也投入了精力,它也支持 Vue 3 和 Vite与 VuePress 1 的兼容性更好。但是,并行维护两个 SSG 是难以持续的,因此 Vue 团队决定将重点放在 VitePress作为长期的主要 SSG 选择推荐。

@ -1,6 +1,6 @@
# 默认主题配置 {#default-theme-config}
主题配置可让自定义主题。可以通过将 `themeConfig` 添加到配置文件来定义主题配置:
主题配置可你能够自定义主题。可以通过将 `themeConfig` 添加到配置文件来进行主题配置:
```ts
export default {
@ -50,7 +50,7 @@ type ThemeableImage =
- 类型:`string | false`
可以自定义此项以替换导航中的默认站点标题(应用配置中的 `title`。当设置为 `false` 时,导航中的标题将被禁用。这在当 `logo` 已经包含站点标题文本时很有用。
可以自定义此项以替换导航中的默认站点标题 (应用配置中的 `title`)。当设置为 `false` 时,导航中的标题将被禁用。这在当 `logo` 已经包含站点标题文本时很有用。
```ts
export default {
@ -111,7 +111,7 @@ interface NavItemWithChildren {
- 类型:`Sidebar`
侧边栏菜单项的配置。可以在[默认主题: 侧边栏](./default-theme-sidebar) 了解更多详情。
侧边栏菜单项的配置。可以在[默认主题: 侧边栏](./default-theme-sidebar)了解更多详情。
```ts
export default {
@ -170,7 +170,7 @@ export type SidebarItem = {
- 默认值:`true`
- 每个页面可以通过 [frontmatter](./frontmatter-config#aside) 覆盖
将此值设置为 `false` 可禁用 aside(大纲) 容器。\
将此值设置为 `false` 可禁用 aside 容器。\
将此值设置为 `true` 将在页面右侧渲染。\
将此值设置为 `left` 将在页面左侧渲染。
@ -222,7 +222,7 @@ 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'
}
]
@ -280,7 +280,7 @@ export interface Footer {
- 类型:`EditLink`
- 每个页面可以通过 [frontmatter](./frontmatter-config#editlink) 覆盖
编辑链接可让显示链接以编辑 Git 管理服务(例如 GitHub 或 GitLab上的页面。有关详细信息请参阅 [默认主题:编辑链接](./default-theme-edit-link)。
编辑链接可让显示链接以编辑 Git 管理服务 (例如 GitHub 或 GitLab) 上的页面。有关详细信息,请参阅[默认主题:编辑链接](./default-theme-edit-link)。
```ts
export default {
@ -339,7 +339,7 @@ export interface LastUpdatedOptions {
- 类型:`AlgoliaSearch`
支持使用 [Algolia DocSearch](https://docsearch.algolia.com/docs/what-is-docsearch) 搜索站点文档。在 [默认主题:搜索](./default-theme-search) 中了解更多信息。
支持使用 [Algolia DocSearch](https://docsearch.algolia.com/docs/what-is-docsearch) 搜索站点文档。在[默认主题:搜索](./default-theme-search) 中了解更多信息。
```ts
export interface AlgoliaSearchOptions extends DocSearchProps {
@ -404,21 +404,21 @@ export interface DocFooter {
- 类型:`string`
- 默认值:`Appearance`
用于自定义模式开关标签,该标签仅在移动端视图中显示。
用于自定义深色模式开关标签,该标签仅在移动端视图中显示。
## lightModeSwitchTitle
- 类型:`string`
- 默认值:`Switch to light theme`
用于自定义悬停时显示的模式开关标题。
用于自定义悬停时显示的浅色模式开关标题。
## darkModeSwitchTitle
- 类型:`string`
- 默认值:`Switch to dark theme`
用于自定义悬停时显示的模式开关标题。
用于自定义悬停时显示的深色模式开关标题。
## sidebarMenuLabel

@ -8,11 +8,11 @@ layout: home
---
```
但是,仅此选项不会有太大作用。可以通过设置其他选项(例如 `hero``features`)向主页添加几个不同的预模板化
但是,仅做这个配置不会有太大作用。可以通过设置其他选项 (例如 `hero``features`) 向主页添加几个不同的预设
## Hero 部分 {#hero-section}
Hero section 位于主页顶部。以下是配置 Hero 的方法。
Hero 部分位于主页顶部。以下是配置 Hero 的方法。
```yaml
---
@ -91,7 +91,7 @@ VitePress 通过 (`--vp-c-brand-1`) 设置 `name` 的颜色 .但是,可以通
## Features 部分 {#features-section}
在 Features section可以在 Hero section 之后列出任意数量的 Features。可以在 frontmatter 中配置 `features`
在 Features 部分,可以在 Hero 部分之后列出任意数量的 Feature。可以在 frontmatter 中配置 `features`
可以为每个 feature 提供一个图标可以是表情符号或任何类型的图像。当配置的图标是图片svg, png, jpeg...)时,必须提供合适的宽度和高度的图标;还可以在需要时配置其描述、固有大小以及深色和浅色主题下的不同表现。

@ -3,7 +3,7 @@
最近一条内容的更新时间会显示在页面右下角。要启用它,请将 `lastUpdated` 选项添加到配置中。
::: tip
你必须提交 markdown 文件才能看到最更新时间。
你必须提交 markdown 文件才能看到最更新时间。
:::
## 全局配置 {#site-level-config}
@ -24,4 +24,4 @@ lastUpdated: false
---
```
另请参阅[默认主题:最更新时间](./default-theme-config#lastupdated) 了解更多详细信息。主题级别的任何 [truthy](https://developer.mozilla.org/zh-CN/docs/Glossary/Truthy) 值也将启用该功能,除非在站点或页面级别明确禁用。
另请参阅[默认主题:最更新时间](./default-theme-config#lastupdated) 了解更多详细信息。主题级别的任何 [truthy](https://developer.mozilla.org/zh-CN/docs/Glossary/Truthy) 值也将启用该功能,除非在站点或页面级别明确禁用。

@ -23,7 +23,7 @@ layout: doc
## page 布局 {#page-layout}
`page` 被视为“空白页”。Markdown 仍然会被解析,所有的 [Markdown 展](../guide/markdown) 都和 `doc` 布局一样运行,但它没有任何默认样式。
`page` 被视为“空白页”。Markdown 仍然会被解析,所有的 [Markdown 展](../guide/markdown) 都和 `doc` 布局一样运行,但它没有任何默认样式。
`page` 布局将使可以自行设计所有内容,而不会受 VitePress 主题影响。当想要创建自己的自定义页面时,这很有用。

@ -35,7 +35,7 @@ export default {
}
```
如果想添加 `alt` 属性或根据暗/亮模式自定义它,还可以将图标作为对象传递。有关详细信息,请参阅 [`themeConfig.logo`](./default-theme-config#logo)。
如果想添加 `alt` 属性或根据深色/浅色模式自定义,还可以将图标作为对象传递。有关详细信息,请参阅 [`themeConfig.logo`](./default-theme-config#logo)。
## 导航链接 {#navigation-links}
@ -75,7 +75,7 @@ export default {
}
```
请注意,下拉菜单标题(上例中的 `下拉菜单`不能具有 `link` 属性,因为它是打开下拉对话框的按钮。
请注意,下拉菜单标题 (上例中的 `Dropdown Menu`) 不能具有 `link` 属性,因为它是打开下拉对话框的按钮。
还可以通过传入更多嵌套项来进一步向下拉菜单项添加“sections”。
@ -116,7 +116,7 @@ export default {
### 自定义链接的路由匹配状态 {#customize-link-s-active-state}
当前页面位于匹配路径下时,导航菜单项将突出显示。如果 想自定义要匹配的路径,请将 `activeMatch` 属性和正则表达式定义为字符串值。
当前页面位于匹配路径下时,导航菜单项将突出显示。如果想自定义要匹配的路径,请将 `activeMatch` 属性和正则表达式定义为字符串值。
```js
export default {

@ -151,10 +151,10 @@ export default defineConfig({
```
::: warning 注意
如果提供了自定义的 `_render` 函数,你需要自己处理 `search: false` 的 frontmatter。此外在调用 `md.render` 之前,`env` 对象不会完全填充,因此对可选 `env` 属性(如 `frontmatter` 的任何检查都应该在此之后完成。
如果提供了自定义的 `_render` 函数,你需要自己处理 `search: false` 的 frontmatter。此外在调用 `md.render` 之前,`env` 对象不会完全填充,因此对可选 `env` 属性 (如 `frontmatter`) 的任何检查都应该在此之后完成。
:::
#### 示例:转换内容-添加锚点{#example-transforming-content-adding-anchors}
#### 示例:转换内容——添加锚点 {#example-transforming-content-adding-anchors}
```ts
import { defineConfig } from 'vitepress'

@ -163,7 +163,7 @@ export default {
}
```
默认情况下,所有部分都是“打开”的。如果 希望它们在初始页面加载时“关闭”,请将 `collapsed` 选项设置为 `true`
默认情况下,所有部分都是“打开”的。如果希望它们在初始页面加载时“关闭”,请将 `collapsed` 选项设置为 `true`
```js
export default {

@ -60,7 +60,7 @@ Say hello to our awesome team.
<VPTeamMembers size="small" :members="members" />
`<VPTeamMembers>` 组件有 2 种不同的尺寸,`small` 和 `medium`。虽然它取决于你的偏好,但通常尺寸在文档页面中使用时 `small` 应该更适合。此外,你可以为每个成员添加更多属性,例如添加“描述”或“赞助”按钮。在 [`<VPTeamMembers>`](#vpteammembers)中了解更多信息。
`<VPTeamMembers>` 组件有 2 种不同的尺寸,`small` 和 `medium`。虽然它取决于你的偏好,但通常尺寸在文档页面中使用时 `small` 应该更适合。此外,你可以为每个成员添加更多属性,例如添加“描述”或“赞助”按钮。在 [`<VPTeamMembers>`](#vpteammembers) 中了解更多信息。
在文档页面中嵌入团队成员对于小型团队来说非常有用,某种情况下,完整的贡献团队可能太大了,可以引入部分成员作为文档上下文的参考。
@ -119,9 +119,9 @@ const members = [
`<VPMembers>` 和在 doc 页面中使用时一样。它将显示成员列表。
### 添加分段以划分团队成员 {#add-sections-to-divide-team-members}
### 添加 section 以划分团队成员 {#add-sections-to-divide-team-members}
你可以将“分段”添加到团队页面。例如,你可能有不同类型的团队成员,例如核心团队成员和社区合作伙伴。你可以将这些成员分成几个部分,以更好地解释每组的角色。
你可以将“section”添加到团队页面。例如,你可能有不同类型的团队成员,例如核心团队成员和社区合作伙伴。你可以将这些成员分成几个部分,以更好地解释每组的角色。
为此,将 `<VPTeamPageSection>` 组件添加到我们之前创建的 `team.md` 文件中。
@ -241,7 +241,7 @@ interface TeamMember {
## `<VPTeamPageSection>`
在团队页面中创建一个“分段”。它接受 `#title`、`#lead` 和 `#members` 插槽。你可以在 `<VPTeamPage>` 中添加任意数量的分段
在团队页面中创建一个“section”。它接受 `#title`、`#lead` 和 `#members` 插槽。你可以在 `<VPTeamPage>` 中添加任意数量的section
```html
<VPTeamPage>

@ -166,7 +166,7 @@ aside: false
- 类型:`boolean | Date`
- 默认值:`true`
是否在当前页面的页脚中显示[最更新时间](./default-theme-last-updated)的文本。如果指定了日期时间,则会显示该日期时间而不是上次 git 修改的时间戳。
是否在当前页面的页脚中显示[最更新时间](./default-theme-last-updated)的文本。如果指定了日期时间,则会显示该日期时间而不是上次 git 修改的时间戳。
```yaml
---

@ -2,9 +2,9 @@
VitePress 提供了几个内置的 API 来让你访问应用程序数据。VitePress 还附带了一些可以在全局范围内使用的内置组件。
辅助函数可从 `vitepress` 全局导入,通常用于自定义主题 Vue 组件。但是,它们也可以在 `.md` 页面内使用,因为 markdown 文件被编译成 Vue [单文件组件](https://vuejs.org/guide/scaling-up/sfc.html)。
辅助函数可从 `vitepress` 全局导入,通常用于自定义主题 Vue 组件。但是,它们也可以在 `.md` 页面内使用,因为 markdown 文件被编译成 Vue [单文件组件](https://cn.vuejs.org/guide/scaling-up/sfc.html)。
`use*` 开头的方法表示它是一个 [Vue 3 Composition API](https://vuejs.org/guide/introduction.html#composition-api) 函数“Composable(可组合)”),只能在 `setup()``<script setup>` 中使用。
`use*` 开头的方法表示它是一个 [Vue 3 组合式 API](https://cn.vuejs.org/guide/introduction.html#composition-api) 函数,只能在 `setup()``<script setup>` 中使用。
## `useData` <Badge type="info" text="composable" />

@ -82,7 +82,7 @@ export default defineConfig({
### 配置智能提示 {#config-intellisense}
使用 `defineConfig` 辅助函数将为配置选项提供 TypeScript 支持的智能提示。假设 IDE 支持它,那么智能提示在 JavaScript 和 TypeScript 中都将触发。
使用 `defineConfig` 辅助函数将为配置选项提供 TypeScript 支持的智能提示。假设 IDE 支持它,那么在 JavaScript 和 TypeScript 中都将触发智能提示
```js
import { defineConfig } from 'vitepress'
@ -94,7 +94,7 @@ export default defineConfig({
### 主题类型提示 {#typed-theme-config}
默认情况下,`defineConfig` 辅助函数期望默认主题的主题配置数据类型:
默认情况下,`defineConfig` 辅助函数期望默认主题的主题配置数据类型
```ts
import { defineConfig } from 'vitepress'
@ -127,7 +127,7 @@ export default defineConfigWithTheme<ThemeConfig>({
- **Vue**
VitePress 已经包含 Vite 的官方 Vue 插件[@vitejs/plugin-vue](https://github.com/vitejs/vite-plugin-vue))。可以配置 VitePress 中的 [vue](#vue) 选项。
VitePress 已经包含 Vite 的官方 Vue 插件 ([@vitejs/plugin-vue](https://github.com/vitejs/vite-plugin-vue)),所以我们可以配置 VitePress 中的 [vue](#vue) 选项。
- **Markdown**
@ -207,9 +207,9 @@ export default {
- 类型:`HeadConfig[]`
- 默认值: `[]`
- 每个页面可以通过 [frontmatter](./frontmatter-config#head)
- 可以通过 [frontmatter](./frontmatter-config#head) 为每个页面追
要在页面 HTML 的 `<head>`中呈现的其他元素。用户添加的标签在结束 `head` 标签之前呈现,在 VitePress 标签之后。
要在页面 HTML 的 `<head>`中呈现的其他元素。用户添加的标签在结束 `head` 标签之前呈现,在 VitePress 标签之后。
```ts
type HeadConfig =
@ -333,7 +333,7 @@ export default {
- 类型:`string`
- 默认值: `/`
站点将部署到的 base URL。如果计划在子路径例如 GitHub 页面)下部署站点,则需要设置此项。如果计划将站点部署到 `https://foo.github.io/bar/`,那么应该将 `base` 设置为 `“/bar/”`。它应该始终以 `/`开头和结尾。
站点将部署到的 base URL。如果计划在子路径例如 GitHub 页面)下部署站点,则需要设置此项。如果计划将站点部署到 `https://foo.github.io/bar/`,那么应该将 `base` 设置为 `“/bar/”`。它应该始终以 `/` 开头和结尾。
base 会自动添加到其他选项中以 `/` 开头的所有 URL 前面,因此只需指定一次。
@ -485,7 +485,7 @@ export default {
- 类型:`boolean | 'dark' | 'force-dark' | import('@vueuse/core').UseDarkOptions`
- 默认值: `true`
是否启用深色模式(通过将 `.dark` 类添加到 `<html>` 元素)
是否启用深色模式 (通过将 `.dark` 类添加到 `<html>` 元素)
- 如果该选项设置为 `true`,则默认主题将由用户的首选配色方案决定。
- 如果该选项设置为 `dark`,则默认情况下主题将是深色的,除非用户手动切换它。
@ -510,7 +510,7 @@ export default {
- 类型:`MarkdownOption`
配置 Markdown 解析器选项。VitePress 使用 [Markdown-it](https://github.com/markdown-it/markdown-it) 作为解析器,使用[Shikiji](https://github.com/antfu/shikiji) ([Shiki](https://shiki.matsu.io/) 的改进版本) 来高亮不同语言语法。在此选项中,可以传递各种 Markdown 相关选项以满足的需要。
配置 Markdown 解析器选项。VitePress 使用 [Markdown-it](https://github.com/markdown-it/markdown-it) 作为解析器,使用 [Shikiji](https://github.com/antfu/shikiji) ([Shiki](https://shiki.matsu.io/) 的改进版本) 来高亮不同语言语法。在此选项中,可以传递各种 Markdown 相关选项以满足的需要。
```js
export default {
@ -561,7 +561,7 @@ VitePress 构建钩子允许向站点添加新功能和行为:
- 类型:`(siteConfig: SiteConfig) => Awaitable<void>`
`buildEnd` 是一个构建 CLI 钩子,它将在构建SSG完成后但在 VitePress CLI 进程退出之前运行。
`buildEnd` 是一个构建 CLI 钩子,它将在构建 SSG 完成后但在 VitePress CLI 进程退出之前运行。
```ts
export default {
@ -625,7 +625,7 @@ interface TransformContext {
}
```
请注意,仅在静态生成站点时才会调用此钩。在开发期间不会调用它。如果需要在开发期间添加动态条目,可以使用 [`transformPageData`](#transformpagedata) 钩子来替代:
请注意,仅在静态生成站点时才会调用此钩。在开发期间不会调用它。如果需要在开发期间添加动态 head 条目,可以使用 [`transformPageData`](#transformpagedata) 钩子来替代:
```ts
export default {
@ -670,7 +670,7 @@ export default {
`transformPageData` 是一个钩子,用于转换每个页面的 `pageData`。可以直接改变 `pageData` 或返回将合并到 `PageData` 中的更改值。
::: warning
不要改变 `context` 中的任何东西。请注意,这可能会影响开发服务器的性能,特别是当在钩子中有一些网络请求或大量计算(例如生成图像)时。可以通过判断 `process.env.NODE_ENV === 'production'` 匹配符合条件的情况。
不要改变 `context` 中的任何东西。请注意,这可能会影响开发服务器的性能,特别是当在钩子中有一些网络请求或大量计算 (例如生成图像) 时。可以通过判断 `process.env.NODE_ENV === 'production'` 匹配符合条件的情况。
:::
```ts

Loading…
Cancel
Save