diff --git a/docs/zh/guide/asset-handling.md b/docs/zh/guide/asset-handling.md index adf50cb6..eff23ee2 100644 --- a/docs/zh/guide/asset-handling.md +++ b/docs/zh/guide/asset-handling.md @@ -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` 的行为。 常见的图像,媒体和字体文件会被自动检测并视作资源。 @@ -18,25 +18,25 @@ ## public 目录 {#the-public-directory} -有时你可能需要提供一些静态资源,但这些资源没有直接被 Markdown 或主题组件直接引用,或者你可能想以原始文件名提供某些文件,像 `robots.txt`,favicons 和 PWA 图标这样的文件。 +有时可能需要一些静态资源,但这些资源没有直接被 Markdown 或主题组件直接引用,或者你可能想以原始文件名提供某些文件,像 `robots.txt`,favicons 和 PWA 图标这样的文件。 -你可以将这些文件放置在[源目录](./routing#source-directory)的 `public` 目录中。例如,如果你的项目根目录是 `./docs`,并且使用默认源目录位置,那么你的 public 目录将是 `./docs/public`。 +可以将这些文件放置在[源目录](./routing#source-directory)的 `public` 目录中。例如,如果项目根目录是 `./docs`,并且使用默认源目录位置,那么 public 目录将是 `./docs/public`。 放置在 `public` 中的资源将按原样复制到输出目录的根目录中。 -请注意,你应使用根绝对路径来引用放置在 `public` 中的文件 - 例如,`public/icon.png` 应始终在源代码中作为 `/icon.png` 引用。 +请注意,应使用根绝对路径来引用放置在 `public` 中的文件 - 例如,`public/icon.png` 应始终在源代码中作为 `/icon.png` 引用。 ## 根 URL {#base-url} -如果你的网站没有部署在根 URL 上,则需要在 `.vitepress/config.js` 中设置 `base` 选项。例如,如果你计划将网站部署到 `https://foo.github.io/bar/`,则 `base` 应设置为 `'/bar/'`(它应始终以斜杠开头和结尾)。 +如果网站没有部署在根 URL 上,则需要在 `.vitepress/config.js` 中设置 `base` 选项。例如,如果计划将网站部署到 `https://foo.github.io/bar/`,则 `base` 应设置为 `'/bar/'`(它应始终以斜杠开头和结尾)。 -所有静态资源路径都会被自动处理,来适应不同的 `base` 配置值。例如,如果你的 markdown 中有一个对 `public` 中的资源的绝对引用: +所有静态资源路径都会被自动处理,来适应不同的 `base` 配置值。例如,如果 markdown 中有一个对 `public` 中的资源的绝对引用: ```md ![An image](/image-inside-public.png) ``` -在这种情况下,更改 `base` 配置值时,你**无需**更新该引用。 +在这种情况下,更改 `base` 配置值时,**无需**更新该引用。 但是如果你正在编写一个主题组件,它动态的链接到资源,例如一个图片,它的 `src` 基于主题配置值: diff --git a/docs/zh/guide/custom-theme.md b/docs/zh/guide/custom-theme.md index e62844aa..78640cd5 100644 --- a/docs/zh/guide/custom-theme.md +++ b/docs/zh/guide/custom-theme.md @@ -2,7 +2,7 @@ ## 解析主题 {#theme-resolving} -你可以通过创建一个 `.vitepress/theme/index.js` 或 `.vitepress/theme/index.ts` 文件 (即“主题入口文件”) 来启用自定义主题: +可以通过创建一个 `.vitepress/theme/index.js` 或 `.vitepress/theme/index.ts` 文件 (即“主题入口文件”) 来启用自定义主题: ``` . @@ -66,7 +66,7 @@ export default { 默认导出是自定义主题的唯一方式,并且只有 `Layout` 属性是必须的。所以从技术上讲,一个 VitePress 主题可以只是一个单独的 Vue 组件。 -在你的组件内部,它的工作方式就像是一个普通的 Vite + Vue 3 应用。请注意,主题还需要保证 [SSR 兼容](./ssr-compat)。 +在组件内部,它的工作方式就像是一个普通的 Vite + Vue 3 应用。请注意,主题还需要保证 [SSR 兼容](./ssr-compat)。 ## 构建布局 {#building-a-layout} @@ -150,7 +150,7 @@ const { page, frontmatter } = useData() ``` -请查看[运行时 API 参考](../reference/runtime-api)获取主题组件中所有可用内容。此外,你可以利用[构建时数据加载](./data-loading)来生成数据驱动布局——例如,一个列出当前项目中所有博客文章的页面。 +请查看[运行时 API 参考](../reference/runtime-api)获取主题组件中所有可用内容。此外,可以利用[构建时数据加载](./data-loading)来生成数据驱动布局——例如,一个列出当前项目中所有博客文章的页面。 ## 分发自定义主题 {#distributing-a-custom-theme} @@ -160,13 +160,13 @@ const { page, frontmatter } = useData() 1. 在包入口将主题对象作为默认导出来导出。 -2. 如果合适的话,将你的主题配置类型定义作为 `ThemeConfig` 导出。 +2. 如果合适的话,将主题配置类型定义作为 `ThemeConfig` 导出。 -3. 如果你的主题需要调整 VitePress 配置,请在包子路径下 (例如 `my-theme/config`) 下导出该配置,以便用户拓展。 +3. 如果主题需要调整 VitePress 配置,请在包子路径下 (例如 `my-theme/config`) 下导出该配置,以便用户拓展。 4. 记录主题配置选项 (通过配置文件和 frontmatter)。 -5. 提供清晰的说明关于如何使用你的主题 (见下文)。 +5. 提供清晰的说明关于如何使用主题 (见下文)。 ## 使用自定义主题 {#consuming-a-custom-theme} @@ -193,7 +193,7 @@ export default { } ``` -如果主题需要特殊的 VitePress 配置,你也需要在配置中拓展: +如果主题需要特殊的 VitePress 配置,也需要在配置中拓展: ```ts // .vitepress/theme/config.ts diff --git a/docs/zh/guide/data-loading.md b/docs/zh/guide/data-loading.md index 41ae29c9..325c2e6b 100644 --- a/docs/zh/guide/data-loading.md +++ b/docs/zh/guide/data-loading.md @@ -1,8 +1,8 @@ # 构建时数据加载 {#build-time-data-loading} -VitePress 提供了**数据加载**的功能,它允许你加载任意数据并从页面或组件中导入它。数据加载**只在构建时**执行:最终的数据将被序列化为 JavaScript 包中的 JSON。 +VitePress 提供了**数据加载**的功能,它允许加载任意数据并从页面或组件中导入它。数据加载**只在构建时**执行:最终的数据将被序列化为 JavaScript 包中的 JSON。 -数据加载可以被用于获取远程数据,也可以基于本地文件生成元数据。例如,你可以使用数据加载器来解析所有本地 API 页面并自动生成所有 API 入口的索引。 +数据加载可以被用于获取远程数据,也可以基于本地文件生成元数据。例如,可以使用数据加载来解析所有本地 API 页面并自动生成所有 API 入口的索引。 ## 基本用法 {#basic-usage} @@ -19,9 +19,9 @@ export default { } ``` -数据加载模块只在 Node.js 中执行,因此你可以按需导入 Node API 和 npm 依赖。 +数据加载模块只在 Node.js 中执行,因此可以按需导入 Node API 和 npm 依赖。 -然后,你可以在 `.md` 页面和 `.vue` 组件中使用 `data` 命名导出从该文件中导入数据: +然后,可以在 `.md` 页面和 `.vue` 组件中使用 `data` 命名导出从该文件中导入数据: ```vue