msb-public
/
vitepress
mirror of https://github.com/vuejs/vitepress
2
1
Code Issues Projects Releases Wiki Activity

docs: improve chinese translation (#3402)

Browse Source
pull/3403/head
烽宁 6 months ago committed by GitHub
parent 862b4be867
commit 1407baf9b9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
23 changed files with 202 additions and 211 deletions
Show Stats Download Patch File Download Diff File

6
docs/zh/guide/cms.md
Unescape View File

@ -24,16 +24,16 @@ outline: deep
```js ```js
export default { export default {
async paths() { async paths() {
// use respective CMS client library if needed // 如有需要，使用相应的 CMS 客户端库
const data = await (await fetch('https://my-cms-api', { const data = await (await fetch('https://my-cms-api', {
headers: { headers: {
// token if necessary // 如有必要，可使用 token
} }
})).json() })).json()
return data.map(entry => { return data.map(entry => {
return { return {
params: { id: entry.id, /* title, authors, date etc. */ }, params: { id: entry.id, /* title, authors, date 等 */ },
content: entry.content content: entry.content
} }
}) })

28
docs/zh/guide/custom-theme.md
Unescape View File

@ -6,11 +6,11 @@
``` ```
. .
├─ docs # project root ├─ docs # 项目根目录
│ ├─ .vitepress │ ├─ .vitepress
│ │ ├─ theme │ │ ├─ theme
│ │ │ └─ index.js # theme entry │ │ │ └─ index.js # 主题入口
│ │ └─ config.js # config file │ │ └─ config.js # 配置文件
│ └─ index.md │ └─ index.md
└─ package.json └─ package.json
``` ```
@ -24,26 +24,26 @@ VitePress 自定义主题是一个对象，该对象具有如下接口：
```ts ```ts
interface Theme { interface Theme {
/** /**
* Root layout component for every page * 每个页面的根布局组件
* @required * @required
*/ */
Layout: Component Layout: Component
/** /**
* Enhance Vue app instance * 增强 Vue 应用实例
* @optional * @optional
*/ */
enhanceApp?: (ctx: EnhanceAppContext) => Awaitable<void> enhanceApp?: (ctx: EnhanceAppContext) => Awaitable<void>
/** /**
* Extend another theme, calling its `enhanceApp` before ours * 扩展另一个主题，在我们的主题之前调用它的 `enhanceApp`
* @optional * @optional
*/ */
extends?: Theme extends?: Theme
} }
interface EnhanceAppContext { interface EnhanceAppContext {
app: App // Vue app instance app: App // Vue 应用实例
router: Router // VitePress router instance router: Router // VitePress 路由实例
siteData: Ref<SiteData> // Site-level metadata siteData: Ref<SiteData> // 站点级元数据
} }
``` ```
@ -52,8 +52,8 @@ interface EnhanceAppContext {
```js ```js
// .vitepress/theme/index.js // .vitepress/theme/index.js
// You can directly import Vue files in the theme entry // 可以直接在主题入口导入 Vue 文件
// VitePress is pre-configured with @vitejs/plugin-vue. // VitePress 已预先配置 @vitejs/plugin-vue
import Layout from './Layout.vue' import Layout from './Layout.vue'
export default { export default {
@ -77,7 +77,7 @@ export default {
<template> <template>
<h1>Custom Layout!</h1> <h1>Custom Layout!</h1>
<!-- this is where markdown content will be rendered --> <!-- 此处将渲染 markdown 内容 -->
<Content /> <Content />
</template> </template>
``` ```
@ -200,7 +200,7 @@ export default {
import baseConfig from 'awesome-vitepress-theme/config' import baseConfig from 'awesome-vitepress-theme/config'
export default { export default {
// extend theme base config (if needed) // 扩展主题的基本配置（如需要）
extends: baseConfig extends: baseConfig
} }
``` ```
@ -216,7 +216,7 @@ import type { ThemeConfig } from 'awesome-vitepress-theme'
export default defineConfigWithTheme<ThemeConfig>({ export default defineConfigWithTheme<ThemeConfig>({
extends: baseConfig, extends: baseConfig,
themeConfig: { themeConfig: {
// Type is `ThemeConfig` // 类型为 `ThemeConfig`
} }
}) })
``` ```

54
docs/zh/guide/data-loading.md
Unescape View File

@ -46,7 +46,7 @@ import { data } from './example.data.js'
```js ```js
export default { export default {
async load() { async load() {
// fetch remote data // 获取远程数据
return (await fetch('...')).json() return (await fetch('...')).json()
} }
} }
@ -67,9 +67,8 @@ import { parse } from 'csv-parse/sync'
export default { export default {
watch: ['./data/*.csv'], watch: ['./data/*.csv'],
load(watchedFiles) { load(watchedFiles) {
// watchedFiles will be an array of absolute paths of the matched files. // watchFiles 是一个所匹配文件的绝对路径的数组。
// 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'), { return parse(fs.readFileSync(file, 'utf-8'), {
columns: true, columns: true,
@ -99,14 +98,14 @@ export default createContentLoader('posts/*.md', /* options */)
```ts ```ts
interface ContentData { interface ContentData {
// mapped URL for the page. e.g. /posts/hello.html (does not include base) // 页面的映射 URL，如 /posts/hello.html（不包括 base）
// manually iterate or use custom `transform` to normalize the paths // 手动迭代或使用自定义 `transform` 来标准化路径
url: string url: string
// frontmatter data of the page // 页面的 frontmatter 数据
frontmatter: Record<string, any> frontmatter: Record<string, any>
// the following are only present if relevant options are enabled // 只有启用了相关选项，才会出现以下内容
// we will discuss them below // 我们将在下面讨论它们
src: string | undefined src: string | undefined
html: string | undefined html: string | undefined
excerpt: string | undefined excerpt: string | undefined
@ -140,18 +139,18 @@ import { data as posts } from './posts.data.js'
import { createContentLoader } from 'vitepress' import { createContentLoader } from 'vitepress'
export default createContentLoader('posts/*.md', { export default createContentLoader('posts/*.md', {
includeSrc: true, // include raw markdown source? includeSrc: true, // 包含原始 markdown 源?
render: true, // include rendered full page HTML? render: true, // 包含渲染的整页 HTML?
excerpt: true, // include excerpt? excerpt: true, // 包含摘录?
transform(rawData) { transform(rawData) {
// map, sort, or filter the raw data as you wish. // 根据需要对原始数据进行 map、sort 或 filter
// 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) return +new Date(b.frontmatter.date) - +new Date(a.frontmatter.date)
}).map((page) => { }).map((page) => {
page.src // raw markdown source page.src // 原始 markdown 源
page.html // rendered full page HTML page.html // 渲染的整页 HTML
page.excerpt // rendered excerpt HTML (content above first `---`) page.excerpt // 渲染的摘录 HTML（第一个 `---` 上面的内容）
return {/* ... */} return {/* ... */}
}) })
} }
@ -167,7 +166,7 @@ export default createContentLoader('posts/*.md', {
export default { export default {
async buildEnd() { async buildEnd() {
const posts = await createContentLoader('posts/*.md').load() const posts = await createContentLoader('posts/*.md').load()
// generate files based on posts metadata, e.g. RSS feed // 根据 posts 元数据生成文件，如 RSS 订阅源
} }
} }
``` ```
@ -177,24 +176,24 @@ export default {
```ts ```ts
interface ContentOptions<T = ContentData[]> { interface ContentOptions<T = ContentData[]> {
/** /**
* Include src? * 包含 src?
* @default false * @default false
*/ */
includeSrc?: boolean includeSrc?: boolean
/** /**
* Render src to HTML and include in data? * 将 src 渲染为 HTML 并包含在数据中?
* @default false * @default false
*/ */
render?: boolean 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 * 如果为 `string`，则定义用于提取摘录的自定义分隔符
* excerpt. Default separator is `---` if `excerpt` is `true`. * 如果 `excerpt` 为 `true`，则默认分隔符为 `---`
* *
* @see https://github.com/jonschlinkert/gray-matter#optionsexcerpt * @see https://github.com/jonschlinkert/gray-matter#optionsexcerpt
* @see https://github.com/jonschlinkert/gray-matter#optionsexcerpt_separator * @see https://github.com/jonschlinkert/gray-matter#optionsexcerpt_separator
@ -207,8 +206,7 @@ interface ContentOptions<T = ContentData[]> {
| string | string
/** /**
* Transform the data. Note the data will be inlined as JSON in the client * 转换数据。请注意，如果从组件或 Markdown 文件导入，数据将以 JSON 形式内联到客户端包中
* bundle if imported from components or markdown files.
*/ */
transform?: (data: ContentData[]) => T | Promise<T> transform?: (data: ContentData[]) => T | Promise<T>
} }
@ -222,14 +220,14 @@ interface ContentOptions<T = ContentData[]> {
import { defineLoader } from 'vitepress' import { defineLoader } from 'vitepress'
export interface Data { export interface Data {
// data type // data 类型
} }
declare const data: Data declare const data: Data
export { data } export { data }
export default defineLoader({ export default defineLoader({
// type checked loader options // 类型检查加载器选项
watch: ['...'], watch: ['...'],
async load(): Promise<Data> { async load(): Promise<Data> {
// ... // ...

32
docs/zh/guide/deploy.md
Unescape View File

@ -122,61 +122,61 @@ Cache-Control: max-age=31536000,immutable
1. 在项目的 `.github/workflows` 目录中创建一个名为 `deploy.yml` 的文件，其中包含这样的内容： 1. 在项目的 `.github/workflows` 目录中创建一个名为 `deploy.yml` 的文件，其中包含这样的内容：
```yaml ```yaml
# Sample workflow for building and deploying a VitePress site to GitHub Pages # 构建 VitePress 站点并将其部署到 GitHub Pages 的示例工作流程
# #
name: Deploy VitePress site to Pages name: Deploy VitePress site to Pages
on: on:
# Runs on pushes targeting the `main` branch. Change this to `master` if you're # 在针对 `main` 分支的推送上运行。如果您
# using the `master` branch as the default branch. # 使用 `master` 分支作为默认分支，请将其更改为 `master`
push: push:
branches: [main] branches: [main]
# Allows you to run this workflow manually from the Actions tab # 允许您从 Actions 选项卡手动运行此工作流程
workflow_dispatch: workflow_dispatch:
# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages # 设置 GITHUB_TOKEN 的权限，以允许部署到 GitHub Pages
permissions: permissions:
contents: read contents: read
pages: write pages: write
id-token: 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: concurrency:
group: pages group: pages
cancel-in-progress: false cancel-in-progress: false
jobs: jobs:
# Build job # 构建工作
build: build:
runs-on: ubuntu-latest runs-on: ubuntu-latest
steps: steps:
- name: Checkout - name: Checkout
uses: actions/checkout@v3 uses: actions/checkout@v3
with: with:
fetch-depth: 0 # Not needed if lastUpdated is not enabled fetch-depth: 0 # 如果未启用 lastUpdated，则不需要
# - uses: pnpm/action-setup@v2 # Uncomment this if you're using pnpm # - uses: pnpm/action-setup@v2 # 如果使用 pnpm，请取消注释
# - uses: oven-sh/setup-bun@v1 # Uncomment this if you're using Bun # - uses: oven-sh/setup-bun@v1 # 如果使用 Bun，请取消注释
- name: Setup Node - name: Setup Node
uses: actions/setup-node@v3 uses: actions/setup-node@v3
with: with:
node-version: 18 node-version: 18
cache: npm # or pnpm / yarn cache: npm # 或 pnpm / yarn
- name: Setup Pages - name: Setup Pages
uses: actions/configure-pages@v3 uses: actions/configure-pages@v3
- name: Install dependencies - name: Install dependencies
run: npm ci # or pnpm install / yarn install / bun install run: npm ci # 或 pnpm install / yarn install / bun install
- name: Build with VitePress - name: Build with VitePress
run: | run: |
npm run docs:build # or pnpm docs:build / yarn docs:build / bun run docs:build npm run docs:build # 或 pnpm docs:build / yarn docs:build / bun run docs:build
touch docs/.vitepress/dist/.nojekyll touch docs/.vitepress/dist/.nojekyll
- name: Upload artifact - name: Upload artifact
uses: actions/upload-pages-artifact@v2 uses: actions/upload-pages-artifact@v2
with: with:
path: docs/.vitepress/dist path: docs/.vitepress/dist
# Deployment job # 部署工作
deploy: deploy:
environment: environment:
name: github-pages name: github-pages
@ -211,7 +211,7 @@ Cache-Control: max-age=31536000,immutable
paths: paths:
- node_modules/ - node_modules/
script: script:
# - apk add git # Uncomment this if you're using small docker images like alpine and have lastUpdated enabled # - apk add git # 如果你使用的是像 alpine 这样的小型 docker 镜像，并且启用了 lastUpdated，请取消注释
- npm install - npm install
- npm run docs:build - npm run docs:build
artifacts: artifacts:

9
docs/zh/guide/extending-default-theme.md
Unescape View File

@ -72,7 +72,7 @@ export default DefaultTheme
// .vitepress/config.js // .vitepress/config.js
export default { export default {
transformHead({ assets }) { 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) { if (myFontFile) {
return [ return [
@ -102,7 +102,7 @@ import DefaultTheme from 'vitepress/theme'
export default { export default {
extends: DefaultTheme, extends: DefaultTheme,
enhanceApp({ app }) { enhanceApp({ app }) {
// register your custom global components // 注册自定义全局组件
app.component('MyGlobalComponent' /* ... */) app.component('MyGlobalComponent' /* ... */)
} }
} }
@ -117,7 +117,7 @@ import DefaultTheme from 'vitepress/theme'
export default { export default {
extends: DefaultTheme, extends: DefaultTheme,
enhanceApp({ app }) { enhanceApp({ app }) {
// register your custom global components // 注册自定义全局组件
app.component('MyGlobalComponent' /* ... */) app.component('MyGlobalComponent' /* ... */)
} }
} satisfies Theme } satisfies Theme
@ -136,8 +136,7 @@ import MyLayout from './MyLayout.vue'
export default { export default {
extends: DefaultTheme, extends: DefaultTheme,
// override the Layout with a wrapper component that // 使用注入插槽的包装组件覆盖 Layout
// injects the slots
Layout: MyLayout Layout: MyLayout
} }
``` ```

4
docs/zh/guide/getting-started.md
Unescape View File

@ -115,12 +115,12 @@ $ bunx vitepress init
```js ```js
// .vitepress/config.js // .vitepress/config.js
export default { export default {
// site-level options // 站点级选项
title: 'VitePress', title: 'VitePress',
description: 'Just playing around.', description: 'Just playing around.',
themeConfig: { themeConfig: {
// theme-level options // 主题级选项
} }
} }
``` ```

12
docs/zh/guide/i18n.md
Unescape View File

@ -17,7 +17,7 @@ docs/
import { defineConfig } from 'vitepress' import { defineConfig } from 'vitepress'
export default defineConfig({ export default defineConfig({
// shared properties and other top-level stuff... // 共享属性和其他顶层内容...
locales: { locales: {
root: { root: {
@ -26,10 +26,10 @@ export default defineConfig({
}, },
fr: { fr: {
label: 'French', label: 'French',
lang: 'fr', // optional, will be added as `lang` attribute on `html` tag lang: 'fr', // 可选，将作为 `lang` 属性添加到 `html` 标签中
link: '/fr/guide' // default /fr/ -- shows on navbar translations menu, can be external link: '/fr/guide' // 默认 /fr/ -- 显示在导航栏翻译菜单上，可以是外部的
// other locale specific properties... // 其余 locale 特定属性...
} }
} }
}) })
@ -44,8 +44,8 @@ interface LocaleSpecificConfig<ThemeConfig = any> {
title?: string title?: string
titleTemplate?: string | boolean titleTemplate?: string | boolean
description?: string description?: string
head?: HeadConfig[] // will be merged with existing head entries, duplicate meta tags are automatically removed head?: HeadConfig[] // 将与现有的头部条目合并，重复的元标签将自动删除
themeConfig?: ThemeConfig // will be shallow merged, common stuff can be put in top-level themeConfig entry themeConfig?: ThemeConfig // 会进行浅层合并，常见内容可放在顶层的 themeConfig 属性中
} }
``` ```

43
docs/zh/guide/markdown.md
Unescape View File

@ -42,12 +42,12 @@ VitePress 带有内置的 Markdown 拓展。
假设现在处于 `foo/one.md` 文件中： 假设现在处于 `foo/one.md` 文件中：
```md ```md
[Home](/) <!-- sends the user to the root index.md --> [Home](/) <!-- 将用户导航至根目录下的 index.html -->
[foo](/foo/) <!-- sends the user to index.html of directory foo --> [foo](/foo/) <!-- 将用户导航至目录 foo 下的 index.html -->
[foo heading](./#heading) <!-- anchors user to a heading in the foo index file --> [foo heading](./#heading) <!-- 将用户锚定到 foo 索引文件中的一个标题上 -->
[bar - three](../bar/three) <!-- you can omit extension --> [bar - three](../bar/three) <!-- 可以省略扩展名 -->
[bar - three](../bar/three.md) <!-- you can append .md --> [bar - three](../bar/three.md) <!-- 可以添加 .md -->
[bar - four](../bar/four.html) <!-- or you can append .html --> [bar - four](../bar/four.html) <!-- 或者可以添加 .html -->
``` ```
### 页面后缀 {#page-suffix} ### 页面后缀 {#page-suffix}
@ -259,7 +259,7 @@ Wraps in a <div class="vp-raw">
```js ```js
postcssIsolateStyles({ postcssIsolateStyles({
includeFiles: [/vp-doc\.css/] // defaults to /base\.css/ includeFiles: [/vp-doc\.css/] // 默认为 /base\.css/
}) })
``` ```
@ -523,23 +523,25 @@ export default {
可以在代码块中添加 `:line-numbers` / `:no-line-numbers` 标记来覆盖在配置中的设置。 可以在代码块中添加 `:line-numbers` / `:no-line-numbers` 标记来覆盖在配置中的设置。
还可以通过在 `:line-numbers` 之后添加 `=` 来自定义起始行号，例如 `:line-numbers=2` 表示代码块中的行号从 2 开始。
**输入** **输入**
````md ````md
```ts {1} ```ts {1}
// line-numbers is disabled by default // 默认禁用行号
const line2 = 'This is line 2' const line2 = 'This is line 2'
const line3 = 'This is line 3' const line3 = 'This is line 3'
``` ```
```ts:line-numbers {1} ```ts:line-numbers {1}
// line-numbers is enabled // 启用行号
const line2 = 'This is line 2' const line2 = 'This is line 2'
const line3 = 'This is line 3' const line3 = 'This is line 3'
``` ```
```ts:line-numbers=2 {1} ```ts:line-numbers=2 {1}
// line-numbers is enabled and start from 2 // 行号已启用，并从 2 开始
const line3 = 'This is line 3' const line3 = 'This is line 3'
const line4 = 'This is line 4' const line4 = 'This is line 4'
``` ```
@ -548,19 +550,19 @@ const line4 = 'This is line 4'
**输出** **输出**
```ts {1} ```ts {1}
// line-numbers is disabled by default // 默认禁用行号
const line2 = 'This is line 2' const line2 = 'This is line 2'
const line3 = 'This is line 3' const line3 = 'This is line 3'
``` ```
```ts:line-numbers {1} ```ts:line-numbers {1}
// line-numbers is enabled // 启用行号
const line2 = 'This is line 2' const line2 = 'This is line 2'
const line3 = 'This is line 3' const line3 = 'This is line 3'
``` ```
```ts:line-numbers=2 {1} ```ts:line-numbers=2 {1}
// line-numbers is enabled and start from 2 // 行号已启用，并从 2 开始
const line3 = 'This is line 3' const line3 = 'This is line 3'
const line4 = 'This is line 4' const line4 = 'This is line 4'
``` ```
@ -701,11 +703,11 @@ export default config
```md ```md
::: code-group ::: code-group
<!-- filename is used as title by default --> <!-- 文件名默认用作标题 -->
<<< @/snippets/snippet.js <<< @/snippets/snippet.js
<!-- you can provide a custom one too --> <!-- 也可以提供定制的代码组 -->
<<< @/snippets/snippet-with-region.js#snippet{1,2 ts:line-numbers} [snippet with region] <<< @/snippets/snippet-with-region.js#snippet{1,2 ts:line-numbers} [snippet with region]
@ -853,12 +855,13 @@ $$ x = {-b \pm \sqrt{b^2-4ac} \over 2a} $$
## 图片懒加载 {#image-lazy-loading} ## 图片懒加载 {#image-lazy-loading}
You can enable lazy loading for each image added via markdown by setting `lazyLoading` to `true` in your config file: 通过在配置文件中将 `lazyLoading` 设置为 `true`，可以为通过 markdown 添加的每张图片启用懒加载。
```js ```js
export default { export default {
markdown: { markdown: {
image: { image: {
// image lazy loading is disabled by default // 默认禁用图片懒加载
lazyLoading: true lazyLoading: true
} }
} }
@ -876,16 +879,16 @@ import markdownItFoo from 'markdown-it-foo'
export default defineConfig({ export default defineConfig({
markdown: { markdown: {
// options for markdown-it-anchor // markdown-it-anchor 的选项
// https://github.com/valeriangalliat/markdown-it-anchor#usage // https://github.com/valeriangalliat/markdown-it-anchor#usage
anchor: { anchor: {
permalink: markdownItAnchor.permalink.headerLink() permalink: markdownItAnchor.permalink.headerLink()
}, },
// options for @mdit-vue/plugin-toc // @mdit-vue/plugin-toc 的选项
// https://github.com/mdit-vue/mdit-vue/tree/main/packages/plugin-toc#options // https://github.com/mdit-vue/mdit-vue/tree/main/packages/plugin-toc#options
toc: { level: [1, 2] }, toc: { level: [1, 2] },
config: (md) => { config: (md) => {
// use more markdown-it plugins! // 使用更多的 Markdown-it 插件！
md.use(markdownItFoo) md.use(markdownItFoo)
} }
} }

18
docs/zh/guide/routing.md
Unescape View File

@ -40,8 +40,8 @@ VitePress 项目的文件结构中有两个重要的概念：项目根目录 (**
``` ```
. .
├─ docs # project root ├─ docs # 项目根目录
│ ├─ .vitepress # config dir │ ├─ .vitepress # 配置目录
│ ├─ getting-started.md │ ├─ getting-started.md
│ └─ index.md │ └─ index.md
└─ ... └─ ...
@ -65,9 +65,9 @@ docs/getting-started.md --> /getting-started.html
`srcDir` 选项是相对于项目根目录解析的。例如，对于 `srcDir: 'src'`，文件结构将如下所示： `srcDir` 选项是相对于项目根目录解析的。例如，对于 `srcDir: 'src'`，文件结构将如下所示：
``` ```
. # project root . # 项目根目录
├─ .vitepress # config dir ├─ .vitepress # 配置目录
└─ src # source dir └─ src # 源目录
├─ getting-started.md ├─ getting-started.md
└─ index.md └─ index.md
``` ```
@ -218,8 +218,8 @@ export default {
``` ```
. .
└─ packages └─ packages
├─ [pkg].md # route template ├─ [pkg].md # 路由模板
└─ [pkg].paths.js # route paths loader └─ [pkg].paths.js # 路由路径加载器
``` ```
路径加载器应该提供一个带有 `paths` 方法的对象作为其默认导出。`paths` 方法应返回具有 `params` 属性的对象数组。这些对象中的每一个都将生成一个相应的页面。 路径加载器应该提供一个带有 `paths` 方法的对象作为其默认导出。`paths` 方法应返回具有 `params` 属性的对象数组。这些对象中的每一个都将生成一个相应的页面。
@ -338,7 +338,7 @@ export default {
<script setup> <script setup>
import { useData } from 'vitepress' import { useData } from 'vitepress'
// params is a Vue ref // params 是一个 Vue ref
const { params } = useData() const { params } = useData()
console.log(params.value) console.log(params.value)
@ -359,7 +359,7 @@ export default {
return posts.map((post) => { return posts.map((post) => {
return { return {
params: { id: post.id }, params: { id: post.id },
content: post.content // raw Markdown or HTML content: post.content // 原始 Markdown 或 HTML
} }
}) })
} }

2
docs/zh/guide/sitemap-generation.md
Unescape View File

@ -40,7 +40,7 @@ export default defineConfig({
sitemap: { sitemap: {
hostname: 'https://example.com', hostname: 'https://example.com',
transformItems: (items) => { transformItems: (items) => {
// add new items or modify/filter existing items // 添加新选项或修改/过滤现有选项
items.push({ items.push({
url: '/extra-page', url: '/extra-page',
changefreq: 'monthly', changefreq: 'monthly',

4
docs/zh/guide/ssr-compat.md
Unescape View File

@ -109,7 +109,7 @@ const clientCompRef = ref(null)
const ClientComp = defineClientComponent( const ClientComp = defineClientComponent(
() => import('component-that-access-window-on-import'), () => import('component-that-access-window-on-import'),
// args are passed to h() - https://vuejs.org/api/render-function.html#h // 参数传递给 h() - https://vuejs.org/api/render-function.html#h
[ [
{ {
ref: clientCompRef ref: clientCompRef
@ -121,7 +121,7 @@ const ClientComp = defineClientComponent(
} }
], ],
// callback after the component is loaded, can be async // 组件加载后的回调，可以是异步的
() => { () => {
console.log(clientCompRef.value) console.log(clientCompRef.value)
} }

4
docs/zh/reference/cli.md
Unescape View File

@ -7,10 +7,10 @@
### 用法 ### 用法
```sh ```sh
# start in current directory, omitting `dev` # 从当前目录启动，省略 `dev`
vitepress vitepress
# start in sub directory # 从子目录启动
vitepress dev [root] vitepress dev [root]
``` ```

4
docs/zh/reference/default-theme-badge.md
Unescape View File

@ -60,10 +60,10 @@
```ts ```ts
interface Props { interface Props {
// When `<slot>` is passed, this value gets ignored. // 当传递 `<slot>` 时，该值将被忽略
text?: string text?: string
// Defaults to `tip`. // 默认为 `tip`.
type?: 'info' | 'tip' | 'warning' | 'danger' type?: 'info' | 'tip' | 'warning' | 'danger'
} }
``` ```

44
docs/zh/reference/default-theme-config.md
Unescape View File

@ -8,7 +8,7 @@ export default {
title: 'VitePress', title: 'VitePress',
description: 'Vite & Vue powered static site generator.', description: 'Vite & Vue powered static site generator.',
// Theme related configurations. // 主题相关配置
themeConfig: { themeConfig: {
logo: '/logo.svg', logo: '/logo.svg',
nav: [...], nav: [...],
@ -139,26 +139,26 @@ export interface SidebarMulti {
export type SidebarItem = { export type SidebarItem = {
/** /**
* The text label of the item. * 侧边栏项的文本标签
*/ */
text?: string text?: string
/** /**
* The link of the item. * 侧边栏项的链接
*/ */
link?: string link?: string
/** /**
* The children of the item. * 侧边栏项的子项
*/ */
items?: SidebarItem[] items?: SidebarItem[]
/** /**
* If not specified, group is not collapsible. * 如果未指定，侧边栏组不可折叠
* *
* If `true`, group is collapsible and collapsed by default * 如果为 `true`，则侧边栏组可折叠并且默认折叠
* *
* If `false`, group is collapsible but expanded by default * 如果为 `false`，则侧边栏组可折叠但默认展开
*/ */
collapsed?: boolean collapsed?: boolean
} }
@ -186,17 +186,17 @@ export type SidebarItem = {
```ts ```ts
interface Outline { interface Outline {
/** /**
* The levels of headings to be displayed in the outline. * outline 中要显示的标题级别。
* Single number means only headings of that level will be displayed. * 单个数字表示只显示该级别的标题。
* If a tuple is passed, the first number is the minimum level and the second number is the maximum level. * 如果传递的是一个元组，第一个数字是最小级别，第二个数字是最大级别。
* `'deep'` is same as `[2, 6]`, which means all headings from `<h2>` to `<h6>` will be displayed. * `'deep'` 与 `[2, 6]` 相同，将显示从 `<h2>` 到 `<h6>` 的所有标题。
* *
* @default 2 * @default 2
*/ */
level?: number | [number, number] | 'deep' level?: number | [number, number] | 'deep'
/** /**
* The title to be displayed on the outline. * 显示在 outline 上的标题。
* *
* @default 'On this page' * @default 'On this page'
*/ */
@ -216,13 +216,13 @@ export default {
socialLinks: [ socialLinks: [
{ icon: 'github', link: 'https://github.com/vuejs/vitepress' }, { icon: 'github', link: 'https://github.com/vuejs/vitepress' },
{ icon: 'twitter', link: '...' }, { icon: 'twitter', link: '...' },
// You can also add custom icons by passing SVG as string: // 可以通过将 SVG 作为字符串传递来添加自定义图标：
{ {
icon: { icon: {
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>' 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: '...', link: '...',
// You can include a custom label for accessibility too (optional but recommended): // 也可以为可访问性添加一个自定义标签（可选但推荐）:
ariaLabel: 'cool link' ariaLabel: 'cool link'
} }
] ]
@ -373,7 +373,7 @@ export interface CarbonAdsOptions {
} }
``` ```
Learn more in [Default Theme: Carbon Ads](./default-theme-carbon-ads) 在 [Default Theme: Carbon Ads](./default-theme-carbon-ads) 中了解更多信息。
## docFooter ## docFooter
@ -404,46 +404,46 @@ export interface DocFooter {
- 类型：`string` - 类型：`string`
- 默认值：`Appearance` - 默认值：`Appearance`
Can be used to customize the dark mode switch label. This label is only displayed in the mobile view. 用于自定义暗模式开关标签，该标签仅在移动端视图中显示。
## lightModeSwitchTitle ## lightModeSwitchTitle
- 类型：`string` - 类型：`string`
- 默认值：`Switch to light theme` - 默认值：`Switch to light theme`
Can be used to customize the light mode switch title that appears on hovering. 用于自定义悬停时显示的亮模式开关标题。
## darkModeSwitchTitle ## darkModeSwitchTitle
- 类型：`string` - 类型：`string`
- 默认值：`Switch to dark theme` - 默认值：`Switch to dark theme`
Can be used to customize the dark mode switch title that appears on hovering. 用于自定义悬停时显示的暗模式开关标题。
## sidebarMenuLabel ## sidebarMenuLabel
- 类型：`string` - 类型：`string`
- 默认值：`Menu` - 默认值：`Menu`
Can be used to customize the sidebar menu label. This label is only displayed in the mobile view. 用于自定义侧边栏菜单标签，该标签仅在移动端视图中显示。
## returnToTopLabel ## returnToTopLabel
- 类型：`string` - 类型：`string`
- 默认值：`Return to top` - 默认值：`Return to top`
Can be used to customize the label of the return to top button. This label is only displayed in the mobile view. 用于自定义返回顶部按钮的标签，该标签仅在移动端视图中显示。
## langMenuLabel ## langMenuLabel
- 类型：`string` - 类型：`string`
- 默认值：`Change language` - 默认值：`Change language`
Can be used to customize the aria-label of the language toggle button in navbar. This is only used if you're using [i18n](../guide/i18n). 用于自定义导航栏中语言切换按钮的 aria-label，仅当使用 [i18n](../guide/i18n) 时才使用此选项。
## externalLinkIcon ## externalLinkIcon
- 类型：`boolean` - 类型：`boolean`
- 默认值：`false` - 默认值：`false`
Whether to show an external link icon next to external links in markdown. 是否在 markdown 中的外部链接旁显示外部链接图标。

4
docs/zh/reference/default-theme-footer.md
Unescape View File

@ -15,10 +15,10 @@ export default {
```ts ```ts
export interface Footer { export interface Footer {
// The message shown right before copyright. // 版权前显示的信息
message?: string message?: string
// The actual copyright text. // 实际的版权文本
copyright?: string copyright?: string
} }
``` ```

40
docs/zh/reference/default-theme-home-page.md
Unescape View File

@ -37,21 +37,19 @@ hero:
```ts ```ts
interface Hero { interface Hero {
// The string shown top of `text`. Comes with brand color // `text` 上方的字符，带有品牌颜色，预计简短，例如产品名称
// and expected to be short, such as product name.
name?: string name?: string
// The main text for the hero section. This will be defined // hero 部分的主要文字，被定义为 `h1` 标签
// as `h1` tag.
text: string text: string
// Tagline displayed below `text`. // `text` 下方的标语
tagline?: string tagline?: string
// The image is displayed next to the text and tagline area. // text 和 tagline 区域旁的图片
image?: ThemeableImage image?: ThemeableImage
// Action buttons to display in home hero section. // 主页 hero 部分的操作按钮
actions?: HeroAction[] actions?: HeroAction[]
} }
@ -61,13 +59,13 @@ type ThemeableImage =
| { light: string; dark: string; alt?: string } | { light: string; dark: string; alt?: string }
interface HeroAction { interface HeroAction {
// Color theme of the button. Defaults to `brand`. // 按钮的颜色主题，默认为 `brand`
theme?: 'brand' | 'alt' theme?: 'brand' | 'alt'
// Label of the button. // 按钮的标签
text: string text: string
// Destination link of the button. // 按钮的目标链接
link: string link: string
} }
``` ```
@ -119,30 +117,28 @@ features:
```ts ```ts
interface Feature { interface Feature {
// Show icon on each feature box. // 在每个 feature 框中显示图标
icon?: FeatureIcon icon?: FeatureIcon
// Title of the feature. // feature 的标题
title: string title: string
// Details of the feature. // feature 的详情
details: string details: string
// Link when clicked on feature component. The link can // 点击 feature 组件时的链接，可以是内部链接，也可以是外部链接。
// be both internal or external.
// //
// e.g. `guide/reference/default-theme-home-page` or `https://example.com` // 例如 `guide/reference/default-theme-home-page` 或 `https://example.com`
link?: string link?: string
// Link text to be shown inside feature component. Best // feature 组件内显示的链接文本，最好与 `link` 选项一起使用
// used with `link` option.
// //
// e.g. `Learn more`, `Visit page`, etc. // 例如 `Learn more`, `Visit page` 等
linkText?: string linkText?: string
// Link rel attribute for the `link` option. // `link` 选项的链接 rel 属性
// //
// e.g. `external` // 例如 `external`
rel?: string rel?: string
} }
@ -156,4 +152,4 @@ type FeatureIcon =
width?: string width?: string
height: string height: string
} }
``` ```

3
docs/zh/reference/default-theme-nav.md
Unescape View File

@ -122,8 +122,7 @@ export default {
export default { export default {
themeConfig: { themeConfig: {
nav: [ nav: [
// This link gets active state when the user is // 当用户位于 `/config/` 路径时，该链接处于激活状态
// on `/config/` path.
{ {
text: 'Guide', text: 'Guide',
link: '/guide', link: '/guide',

2
docs/zh/reference/default-theme-search.md
Unescape View File

@ -116,7 +116,7 @@ export default defineConfig({
* @param {import('markdown-it')} md * @param {import('markdown-it')} md
*/ */
_render(src, env, md) { _render(src, env, md) {
// return html string // 返回 html 字符串
} }
} }
} }

8
docs/zh/reference/default-theme-sidebar.md
Unescape View File

@ -57,7 +57,7 @@ export default {
{ {
text: 'Guide', text: 'Guide',
items: [ items: [
// This shows `/guide/index.md` page. // 显示的是 `/guide/index.md` 页面
{ text: 'Introduction', link: '/guide/' } { text: 'Introduction', link: '/guide/' }
] ]
} }
@ -117,8 +117,7 @@ export default {
export default { export default {
themeConfig: { themeConfig: {
sidebar: { sidebar: {
// This sidebar gets displayed when a user // 当用户位于 `guide` 目录时，会显示此侧边栏
// is on `guide` directory.
'/guide/': [ '/guide/': [
{ {
text: 'Guide', text: 'Guide',
@ -130,8 +129,7 @@ export default {
} }
], ],
// This sidebar gets displayed when a user // 当用户位于 `config` 目录时，会显示此侧边栏
// is on `config` directory.
'/config/': [ '/config/': [
{ {
text: 'Config', text: 'Config',

27
docs/zh/reference/default-theme-team-page.md
Unescape View File

@ -178,42 +178,41 @@ const partners = [...]
```ts ```ts
interface Props { interface Props {
// Size of each members. Defaults to `medium`. // 每个成员的大小，默认为 `medium`
size?: 'small' | 'medium' size?: 'small' | 'medium'
// List of members to display. // 显示的成员列表
members: TeamMember[] members: TeamMember[]
} }
interface TeamMember { interface TeamMember {
// Avatar image for the member. // 成员的头像图像
avatar: string avatar: string
// Name of the member. // 成员的名称
name: string name: string
// Title to be shown below member's name. // 成员姓名下方的标题
// e.g. Developer, Software Engineer, etc. // 例如：Developer, Software Engineer, etc.
title?: string title?: string
// Organization that the member belongs. // 成员所属的组织
org?: string org?: string
// URL for the organization. // 组织的 URL
orgLink?: string orgLink?: string
// Description for the member. // 成员的描述
desc?: string desc?: string
// Social links. e.g. GitHub, Twitter, etc. You may pass in // 社交媒体链接，例如 GitHub、Twitter 等，可以在此处传入 Social Links 对象
// the Social Links object here. // 参见: https://vitepress.dev/reference/default-theme-config.html#sociallinks
// See: https://vitepress.dev/reference/default-theme-config.html#sociallinks
links?: SocialLink[] links?: SocialLink[]
// URL for the sponsor page for the member. // 成员 sponsor 页面的 URL
sponsor?: string sponsor?: string
// Text for the sponsor link. Defaults to 'Sponsor'. // sponsor 链接的文本，默认为 'Sponsor'
actionText?: string actionText?: string
} }
``` ```

2
docs/zh/reference/frontmatter-config.md
Unescape View File

@ -216,6 +216,6 @@ pageClass: custom-page-class
```css ```css
.custom-page-class { .custom-page-class {
  /* page-specific styles */   /* 特定页面的样式 */
} }
``` ```

21
docs/zh/reference/runtime-api.md
Unescape View File

@ -13,23 +13,23 @@ VitePress 提供了几个内置的 API 来让你访问应用程序数据。ViteP
```ts ```ts
interface VitePressData<T = any> { interface VitePressData<T = any> {
/** /**
* Site-level metadata * 站点级元数据
*/ */
site: Ref<SiteData<T>> site: Ref<SiteData<T>>
/** /**
* themeConfig from .vitepress/config.js * .vitepress/config.js 中的 themeConfig
*/ */
theme: Ref<T> theme: Ref<T>
/** /**
* Page-level metadata * 页面级元数据
*/ */
page: Ref<PageData> page: Ref<PageData>
/** /**
* Page frontmatter * 页面 frontmatter
*/ */
frontmatter: Ref<PageData['frontmatter']> frontmatter: Ref<PageData['frontmatter']>
/** /**
* Dynamic route params * 动态路由参数
*/ */
params: Ref<PageData['params']> params: Ref<PageData['params']>
title: Ref<string> title: Ref<string>
@ -87,24 +87,23 @@ interface Route {
```ts ```ts
interface Router { interface Router {
/** /**
* Current route. * 当前路由
*/ */
route: Route route: Route
/** /**
* Navigate to a new URL. * 导航到新的 URL
*/ */
go: (to?: string) => Promise<void> go: (to?: string) => Promise<void>
/** /**
* Called before the route changes. Return `false` to cancel the navigation. * 在路由更改前调用。返回 `false` 表示取消导航
*/ */
onBeforeRouteChange?: (to: string) => Awaitable<void | boolean> onBeforeRouteChange?: (to: string) => Awaitable<void | boolean>
/** /**
* Called before the page component is loaded (after the history state is * 在页面组件加载前（history 状态更新后）调用。返回 `false` 表示取消导航
* updated). Return `false` to cancel the navigation.
*/ */
onBeforePageLoad?: (to: string) => Awaitable<void | boolean> onBeforePageLoad?: (to: string) => Awaitable<void | boolean>
/** /**
* Called after the route changes. * 在路由更改后调用
*/ */
onAfterRouteChanged?: (to: string) => Awaitable<void> onAfterRouteChanged?: (to: string) => Awaitable<void>
} }

42
docs/zh/reference/site-config.md
Unescape View File

@ -16,7 +16,7 @@ outline: deep
```ts ```ts
export default { export default {
// app level config options // 应用级配置选项
lang: 'en-US', lang: 'en-US',
title: 'VitePress', title: 'VitePress',
description: 'Vite & Vue powered static site generator.', description: 'Vite & Vue powered static site generator.',
@ -35,12 +35,12 @@ export default async () => defineConfig({
const posts = await (await fetch('https://my-cms.com/blog-posts')).json() const posts = await (await fetch('https://my-cms.com/blog-posts')).json()
return { return {
// app level config options // 应用级配置选项
lang: 'en-US', lang: 'en-US',
title: 'VitePress', title: 'VitePress',
description: 'Vite & Vue powered static site generator.', description: 'Vite & Vue powered static site generator.',
// theme level config options // 主题级别配置选项
themeConfig: { themeConfig: {
sidebar: [ sidebar: [
...posts.map((post) => ({ ...posts.map((post) => ({
@ -61,12 +61,12 @@ import { defineConfig } from 'vitepress'
const posts = await (await fetch('https://my-cms.com/blog-posts')).json() const posts = await (await fetch('https://my-cms.com/blog-posts')).json()
export default defineConfig({ export default defineConfig({
// app level config options // 应用级配置选项
lang: 'en-US', lang: 'en-US',
title: 'VitePress', title: 'VitePress',
description: 'Vite & Vue powered static site generator.', description: 'Vite & Vue powered static site generator.',
// theme level config options // 主题级别配置选项
themeConfig: { themeConfig: {
sidebar: [ sidebar: [
...posts.map((post) => ({ ...posts.map((post) => ({
@ -101,7 +101,7 @@ import { defineConfig } from 'vitepress'
export default defineConfig({ export default defineConfig({
themeConfig: { themeConfig: {
// Type is `DefaultTheme.Config` // 类型为 `DefaultTheme.Config`
} }
}) })
``` ```
@ -114,7 +114,7 @@ import type { ThemeConfig } from 'your-theme'
export default defineConfigWithTheme<ThemeConfig>({ export default defineConfigWithTheme<ThemeConfig>({
themeConfig: { themeConfig: {
// Type is `ThemeConfig` // 类型为 `ThemeConfig`
} }
}) })
``` ```
@ -222,9 +222,9 @@ type HeadConfig =
```ts ```ts
export default { export default {
head: [['link', { rel: 'icon', href: '/favicon.ico' }]] head: [['link', { rel: 'icon', href: '/favicon.ico' }]]
} // put favicon.ico in public directory, if base is set, use /base/favicon.ico } // 将 favicon.ico 放在公共目录中，如果设置了 base，则使用 /base/favicon.ico
/* Would render: /* 渲染成:
<link rel="icon" href="/favicon.ico"> <link rel="icon" href="/favicon.ico">
*/ */
``` ```
@ -249,7 +249,7 @@ export default {
] ]
} }
/* Would render: /* 渲染成:
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
@ -273,7 +273,7 @@ export default {
] ]
} }
/* Would render: /* 渲染成:
<script id="register-sw"> <script id="register-sw">
;(() => { ;(() => {
if ('serviceWorker' in navigator) { if ('serviceWorker' in navigator) {
@ -304,7 +304,7 @@ export default {
] ]
} }
/* Would render: /* 渲染成:
<script async src="https://www.googletagmanager.com/gtag/js?id=TAG_ID"></script> <script async src="https://www.googletagmanager.com/gtag/js?id=TAG_ID"></script>
<script> <script>
window.dataLayer = window.dataLayer || []; window.dataLayer = window.dataLayer || [];
@ -457,13 +457,13 @@ export default {
```ts ```ts
export default { export default {
ignoreDeadLinks: [ ignoreDeadLinks: [
// ignore exact url "/playground" // 忽略精确网址 "/playground"
'/playground', '/playground',
// ignore all localhost links // 忽略所有 localhost 链接
/^https?:\/\/localhost/, /^https?:\/\/localhost/,
// ignore all links include "/repl/"" // 忽略所有包含 "/repl/" 的链接
/\/repl\//, /\/repl\//,
// custom function, ignore all links include "ignore" // 自定义函数，忽略所有包含 "ignore "的链接
(url) => { (url) => {
return url.toLowerCase().includes('ignore') return url.toLowerCase().includes('ignore')
} }
@ -529,7 +529,7 @@ export default {
```js ```js
export default { export default {
vite: { vite: {
// Vite config options // Vite 配置选项
} }
} }
``` ```
@ -543,7 +543,7 @@ export default {
```js ```js
export default { export default {
vue: { vue: {
// @vitejs/plugin-vue options // @vitejs/plugin-vue 选项
} }
} }
``` ```
@ -613,8 +613,8 @@ export default {
```ts ```ts
interface TransformContext { interface TransformContext {
page: string // e.g. index.md (relative to srcDir) page: string // 例如 index.md (相对于 srcDir)
assets: string[] // all non-js/css assets as fully resolved public URL assets: string[] // 所有非 js/css 资源均作为完全解析的公共 URL
siteConfig: SiteConfig siteConfig: SiteConfig
siteData: SiteData siteData: SiteData
pageData: PageData pageData: PageData
@ -679,7 +679,7 @@ export default {
pageData.contributors = await getPageContributors(pageData.relativePath) pageData.contributors = await getPageContributors(pageData.relativePath)
} }
// or return data to be merged // 或返回要合并的数据
async transformPageData(pageData, { siteConfig }) { async transformPageData(pageData, { siteConfig }) {
return { return {
contributors: await getPageContributors(pageData.relativePath) contributors: await getPageContributors(pageData.relativePath)

Write Preview
Loading…
Cancel
Save