docs(zh): update the `config` translation

pull/1593/head
Xavi Lee 4 years ago
parent f95361ea10
commit 422aba0f9a

@ -0,0 +1,383 @@
# 应用全局配置 {#app-configs}
应用全局配置是定义站点的全局配置的地方。应用全局配置不仅限于主题配置,还有如“根目录”的配置,或站点的“标题”设置。
```ts
export default {
// These are app level configs.
lang: 'en-US',
title: 'VitePress',
description: 'Vite & Vue powered static site generator.',
...
}
```
## appearance
- 类型:`boolean | 'dark'`
- 默认值:`true`
这个配置项可以配置是否开启“黑暗”模式。
- 如果选项设置为 `true`,默认的主题将由用户的首选的颜色方案来决定。
- 如果选项设置为 `dark`,该主题将默认为深色,用户手动切换颜色才会发生改变。
- 如果选项设置为 `false`,用户将无法切换主题。
它还注入了内联脚本,通过 `vitepress-theme-appearance` 键从本地存储中读取用户设置,并恢复用户偏好的颜色模式。
```ts
export default {
appearance: true
}
```
## base
- 类型:`string`
- 默认值:`/`
站点将被部署到的根 URL。如果你打算在一个子路径下部署你的站点例如 GitHub 页面,你就需要进行配置。如果你计划将站点部署到 `https://foo.github.io/bar/`,那么你应该将 base 设置为 `'/bar/'`。它应该总是以斜线开始,以斜线结束。
base 会自动预置到其他选项中以/开头的所有 URL 中,所以你只需要指定一次。
```ts
export default {
base: '/base/'
}
```
## description
- 类型:`string`
- 默认值:`A VitePress site`
站点的描述。在 HTML 页面中将被渲染成 `<meta>` 标签。
```ts
export default {
description: 'A VitePress site'
}
```
## head
- 类型:`HeadConfig[]`
- 默认值:`[]`
在 HTML 页面的 `<head>` 标签中呈现的额外元素。用户添加的标签将在 `head` 标签结束前呈现,在 VitePress 标签之后。
```ts
export default {
head: [
[
'link',
{ rel: 'preconnect', href: 'https://fonts.gstatic.com', crossorigin: '' }
]
// would render: <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
]
}
```
```ts
type HeadConfig =
| [string, Record<string, string>]
| [string, Record<string, string>, string]
```
## ignoreDeadLinks
- 类型:`boolean`
- 默认值:`false`
当将其设置为 `true`VitePress 不会因为死链接构建失败。
```ts
export default {
ignoreDeadLinks: true
}
```
## lang
- 类型:`string`
- 默认值:`en-US`
站点的语言属性。在 HTML 页面中将被渲染为 `<html lang="en-US">` 标签。
```ts
export default {
lang: 'en-US'
}
```
## lastUpdated
- 类型:`boolean`
- 默认值:`false`
使用 git commit 来获取时间戳。该选项使默认主题显示页面的最后更新时间。你可以通过 [`themeConfig.lastUpdatedText`](theme-configs#lastupdatedtext) 选项来自定义文本。
```ts
export default {
lastUpdated: true
}
```
## markdown
- 类型:`MarkdownOption`
配置 Markdown 解析器的选项。VitePress 使用 [Markdown-it](https://github.com/markdown-it/markdown-it) 作为解析器,并使用 [Shiki](https://shiki.matsu.io/) 来高亮语言的语法。在这个选项中,你可以通过各种与 Markdown 有关的选项来满足你的需要。
```js
export default {
markdown: {
theme: 'material-palenight',
lineNumbers: true
}
}
```
以下是你在这个对象中可以进行设置的所有选项:
```ts
interface MarkdownOptions extends MarkdownIt.Options {
// Custom theme for syntax highlighting.
// You can use an existing theme.
// See: https://github.com/shikijs/shiki/blob/main/docs/themes.md#all-themes
// Or add your own theme.
// See: https://github.com/shikijs/shiki/blob/main/docs/themes.md#loading-theme
theme?:
| Shiki.IThemeRegistration
| { light: Shiki.IThemeRegistration; dark: Shiki.IThemeRegistration }
// Enable line numbers in code block.
lineNumbers?: boolean
// markdown-it-anchor plugin options.
// See: https://github.com/valeriangalliat/markdown-it-anchor#usage
anchor?: anchorPlugin.AnchorOptions
// markdown-it-attrs plugin options.
// See: https://github.com/arve0/markdown-it-attrs
attrs?: {
leftDelimiter?: string
rightDelimiter?: string
allowedAttributes?: string[]
disable?: boolean
}
// specify default language for syntax highlighter
defaultHighlightLang?: string
// @mdit-vue/plugin-frontmatter plugin options.
// See: https://github.com/mdit-vue/mdit-vue/tree/main/packages/plugin-frontmatter#options
frontmatter?: FrontmatterPluginOptions
// @mdit-vue/plugin-headers plugin options.
// See: https://github.com/mdit-vue/mdit-vue/tree/main/packages/plugin-headers#options
headers?: HeadersPluginOptions
// @mdit-vue/plugin-sfc plugin options.
// See: https://github.com/mdit-vue/mdit-vue/tree/main/packages/plugin-sfc#options
sfc?: SfcPluginOptions
// @mdit-vue/plugin-toc plugin options.
// See: https://github.com/mdit-vue/mdit-vue/tree/main/packages/plugin-toc#options
toc?: TocPluginOptions
// Configure the Markdown-it instance.
config?: (md: MarkdownIt) => void
}
```
## outDir
- 类型:`string`
- 默认值:`./.vitepress/dist`
站点的构建输出位置,相对于项目根目录。(比如相对于 `docs` 目录,如果你运行的是 `vitepress build docs`)。
```ts
export default {
outDir: '../public'
}
```
## cacheDir
- 类型:`string`
- 默认值:`./.vitepress/cache`
缓存文件的目录,相对于项目根目录。(比如相对于 `docs` 目录,如果你运行的是 `vitepress build docs`)。参见:[cacheDir](https://cn.vitejs.dev/config/shared-options.html#cachedir)。
```ts
export default {
cacheDir: './.vitepress/.vite'
}
```
## srcDir
- 类型:`string`
- 默认值:`.`
存储 markdown 文件的位置,相对于项目根目录。
```ts
export default {
srcDir: './src'
}
```
## title
- 类型:`string`
- 默认值:`VitePress`
站点的标题。这将显示在导航栏中。除非定义了 `titleTemplate`,否则也作为所有页面标题的后缀。
```ts
export default {
title: 'VitePress'
}
```
## titleTemplate
- 类型:`string | boolean`
标题的后缀。例如,如果你将 `title` 设置为 `VitePress`,并将 `titleTemplate` 设置为 `My Site`那么html 标题就变成 `VitePress | My Site`
设置为 `false` 表示禁用该功能。如果该选项是 `undefined`,那么将使用 `title` 选项的值。
```ts
export default {
title: 'VitePress',
titleTemplate: 'Vite & Vue powered static site generator'
}
```
要配置 `|` 以外的标题分隔符,你可以省略 `title`,在 `titleTemplate` 中使用 `:title` 符号。
```ts
export default {
titleTemplate: ':title - Vitepress'
}
```
## cleanUrls (实验性的) {#cleanurls-experimental}
- 类型:`'disabled' | 'without-subfolders' | 'with-subfolders'`
- 默认值:`'disabled'`
允许从 URL 中去除尾部的 `.html`,并可选择生成简洁的目录结构。可用的模式如下:
| Mode | Page | Generated Page | URL |
| :--------------------: | :-------: | :---------------: | :---------: |
| `'disabled'` | `/foo.md` | `/foo.html` | `/foo.html` |
| `'without-subfolders'` | `/foo.md` | `/foo.html` | `/foo` |
| `'with-subfolders'` | `/foo.md` | `/foo/index.html` | `/foo` |
::: warning
启用这一点可能需要在你的主机平台上进行额外的配置。为了使其发挥作用,你的服务器必须在请求 URL (见上表) 时提供生成的页面,而不能**重定向**。
:::
```ts
export default {
cleanUrls: 'with-subfolders'
}
```
## 构建钩子 {#build-hooks}
VitePress 构建钩子允许你向你的网站添加新的功能和行为:
- Sitemap
- Search Indexing
- PWA
### transformHead
- 类型:`(ctx: TransformContext) => Awaitable<HeadConfig[]>`
`transformHead` 是一个构建钩子,用于在生成每个页面之前转换 head。它将允许你添加不能静态添加到你的VitePress 配置中的 head 选项。你只需要返回额外的选项,它们将被自动合并到现有的选项中。
::: warning
不要改变 `ctx` 中的任何东西。
:::
```ts
export default {
async transformHead(ctx) {
// ...
}
}
```
```ts
interface TransformContext {
siteConfig: SiteConfig
siteData: SiteData
pageData: PageData
title: string
description: string
head: HeadConfig[]
content: string
}
```
### transformHtml
- 类型:`(code: string, id: string, ctx: TransformContext) => Awaitable<string | void>`
`transformHtml` 是一个构建钩子,用于在保存到磁盘之前转换每个页面的内容。
::: warning
不要改变 `ctx` 中的任何东西。另外,修改 html 内容可能会在运行时引起激活问题。
:::
```ts
export default {
async transformHtml(code, id, context) {
// ...
}
}
```
### transformPageData
- 类型:`(pageData: PageData) => Awaitable<Partial<PageData> | { [key: string]: any } | void>`
`transformPageData` 是一个用于转换每个页面的 `pageData` 的钩子。你可以直接改变 `pageData` 或者返回改变的值,这些值将被合并到 PageData 中。
```ts
export default {
async transformPageData(pageData) {
pageData.contributors = await getPageContributors(pageData.relativePath)
}
// or return data to be merged
async transformPageData(pageData) {
return {
contributors: await getPageContributors(pageData.relativePath)
}
}
}
```
### buildEnd
- 类型:`(siteConfig: SiteConfig) => Awaitable<void>`
`buildEnd` 是一个构建 CLI 的钩子,它将在构建 (SSG) 完成后VitePress CLI 进程退出前运行。
```ts
export default {
async buildEnd(siteConfig) {
// ...
}
}
```

@ -0,0 +1,192 @@
# Frontmatter 配置 {#frontmatter-configs}
Frontmatter 支持基于页面的配置。在每个标签上,你可以自由地添加任何设置来覆盖任何全局应用或主题配置。此外,还有一些配置,你只能在 Frontmatter 中定义。
```yaml
---
title: Docs with VitePress
editLink: true
---
```
你可以通过 `$frontmatter` 在任何 markdown 文件中访问 frontmatter。
```md
{{ $frontmatter.title }}
```
## title
- Type: `string`
页面的标题。它与 [config.title](../config/app-configs#title) 相同,并覆盖了应用全局配置。
```yaml
---
title: VitePress
---
```
## titleTemplate
- Type: `string | boolean`
标题的后缀。它与 [config.titleTemplate](../config/app-configs#titletemplate) 相同,并覆盖了应用全局配置。
```yaml
---
title: VitePress
titleTemplate: Vite & Vue powered static site generator
---
```
## description
- Type: `string`
页面的描述。它与 [config.description](../config/app-configs#description) 相同,并覆盖了应用全局配置。
```yaml
---
description: VitePress
---
```
### head
- Type: `HeadConfig[]`
指定要注入的额外 head 标签。
```yaml
---
head:
- - meta
- name: description
content: hello
- - meta
- name: keywords
content: super duper SEO
---
```
```ts
type HeadConfig =
| [string, Record<string, string>]
| [string, Record<string, string>, string]
```
## lastUpdated
- Type: `boolean`
- Default: `true`
在当前页面是否显示[最后更新](../guide/theme-last-updated)文本。
```yaml
---
lastUpdated: false
---
```
## layout
- Type: `doc | home | page`
- Default: `doc`
决定页面的布局。
- `doc` - It applies default documentation styles to the markdown content.
- `home` - Special layout for "Home Page". You may add extra options such as `hero` and `features` to rapidly create beautiful landing page.
- `page` - Behave similar to `doc` but it applies no styles to the content. Useful when you want to create a fully custom page.
```yaml
---
layout: doc
---
```
## hero
- Type: `Hero`
This option only takes effect when `layout` is set to `home`.
It defines contents of home hero section.
```yaml
---
layout: home
hero:
name: VitePress
text: Vite & Vue powered static site generator.
tagline: Lorem ipsum...
actions:
- theme: brand
text: Get Started
link: /guide/what-is-vitepress
- theme: alt
text: View on GitHub
link: https://github.com/vuejs/vitepress
---
```
```ts
interface Hero {
// The string shown top of `text`. Comes with brand color
// and expected to be short, such as product name.
name?: string
// The main text for the hero section. This will be defined
// as `h1` tag.
text: string
// Tagline displayed below `text`.
tagline?: string
// Action buttons to display in home hero section.
actions?: HeroAction[]
}
interface HeroAction {
// Color theme of the button. Defaults to `brand`.
theme?: 'brand' | 'alt'
// Label of the button.
text: string
// Destination link of the button.
link: string
}
```
## features
- Type: `Feature[]`
This option only takes effect when `layout` is set to `home`.
It defines items to display in features section.
You may learn more about it in [Theme: Home Page](../guide/theme-home-page).
## aside
- Type: `boolean`
- Default: `true`
If you want the right aside component in `doc` layout not to be shown, set this option to `false`.
```yaml
---
aside: false
---
```
## outline
- Type: `number | [number, number] | 'deep' | false`
- Default: `2`
The levels of header in the outline to display for the page. It's same as [config.themeConfig.outline](../config/theme-configs#outline), and it overrides the theme config.

@ -0,0 +1,76 @@
# 简介 {#introduction}
将配置文件放在 `.vitepress/config.js` 中。 这是放置所有 VitePress 特定文件的地方。
```
.
├─ docs
│ ├─ .vitepress
│ │ └─ config.js
│ └─ index.md
└─ package.json
```
::: tip 提示
你也可以使用任意的 `.ts`、`.cjs`、`.mjs`、`.cts` 和 `.mts` 作为配置文件的扩展名。
:::
VitePress 带有 2 种类型的配置。一种是[应用全局配置](./app-configs),它配置站点的基本功能,例如设置站点的标题,或自定义 Markdown 解析器的工作方式。其次是[主题配置](./theme-configs),用于配置站点的主题,例如添加侧边栏,或者添加“在 GitHub 上编辑此页面”链接等功能。
你还可以在 [Frontmatter](./frontmatter-configs) 中进行另一种配置。Frontmatter 配置可以覆盖在该特定页面的应用全局配置或主题配置上定义的全局配置。但是,有几个选项也仅在 frontmatter 中可用。
请参阅相应的配置页面以了解更多信息。
## 配置智能提示 {#config-intellisense}
由于 VitePress 附带 TypeScript 类型,你可以利用 IDE 的智能提示和 jsdoc 类型提示:
```js
/**
* @type {import('vitepress').UserConfig}
*/
const config = {
// ...
}
export default config
```
或者,你可以使用 `defineConfig` 辅助函数,它会提供智能提示,而无需 jsdoc 注释:
```js
import { defineConfig } from 'vitepress'
export default defineConfig({
// ...
})
```
VitePress 也直接支持 TS 配置文件。 你也可以将 `.vitepress/config.ts``defineConfig` 辅助函数一起使用。
## 主题配置类型 {#typed-theme-config}
默认情况下,`defineConfig` 辅助函数使用默认主题的主题配置类型:
```ts
import { defineConfig } from 'vitepress'
export default defineConfig({
themeConfig: {
// Type is `DefaultTheme.Config`
}
})
```
如果你使用自定义主题并希望对主题配置进行类型检查,则需要使用 `defineConfigWithTheme`,并通过通用参数传递自定义主题的配置类型:
```ts
import { defineConfigWithTheme } from 'vitepress'
import { ThemeConfig } from 'your-theme'
export default defineConfigWithTheme<ThemeConfig>({
themeConfig: {
// Type is `ThemeConfig`
}
})
```

@ -0,0 +1,316 @@
# 主题配置 {#theme-configs}
主题配置可让你自定义主题。你可以通过将 `themeConfig` 键添加到配置文件来定义主题配置。
```ts
export default {
lang: 'en-US',
title: 'VitePress',
description: 'Vite & Vue powered static site generator.',
// Theme related configurations.
themeConfig: {
logo: '/logo.svg',
nav: [...],
sidebar: { ... }
}
}
```
这里描述了 VitePress 默认主题的设置。如果你使用的是其他人创建的自定义主题,这些设置可能没有任何效果,或者可能表现不同。
## logo
- 类型:`ThemeableImage`
显示在导航栏中的 logo 文件,位于站点标题之前。接受路径字符串或包含明亮或黑暗模式不同 logo 的对象。
```ts
export default {
themeConfig: {
logo: '/logo.svg'
}
}
```
```ts
type ThemeableImage =
| string
| { src: string; alt?: string }
| { light: string; dark: string; alt?: string }
```
## siteTitle
- 类型:`string | false`
你可以自定义此项以替换导航中的默认站点标题 (应用配置中的 `title`)。当设置为 `false` 时,导航中的标题将被禁用。这在当你的 `logo` 已经包含网站标题文本时很有用。
```ts
export default {
themeConfig: {
siteTitle: 'Hello World'
}
}
```
## nav
- 类型:`NavItem`
导航菜单项的配置。你可以在[主题: 导航栏](../guide/theme-nav#navigation-links)中了解更多详情。
```js
export default {
themeConfig: {
nav: [
{ text: 'Guide', link: '/guide' },
{
text: 'Dropdown Menu',
items: [
{ text: 'Item A', link: '/item-1' },
{ text: 'Item B', link: '/item-2' },
{ text: 'Item C', link: '/item-3' }
]
}
]
}
}
```
```ts
type NavItem = NavItemWithLink | NavItemWithChildren
type NavItemWithLink = {
text: string
link: string
activeMatch?: string
}
interface NavItemWithChildren {
text?: string
items: NavItemWithLink[]
activeMatch?: string
}
```
## sidebar
- 类型:`Sidebar`
侧边栏菜单项的配置。你可以在[主题: 侧边栏](../guide/theme-sidebar)了解更多详情。
```js
export default {
themeConfig: {
sidebar: [
{
text: 'Guide',
items: [
{ text: 'Introduction', link: '/introduction' },
{ text: 'Getting Started', link: '/getting-started' },
...
]
}
]
}
}
```
```ts
type Sidebar = SidebarGroup[] | SidebarMulti
interface SidebarMulti {
[path: string]: SidebarGroup[]
}
interface SidebarGroup {
text: string
items: SidebarItem[]
collapsible?: boolean
collapsed?: boolean
}
interface SidebarItem {
text: string
link: string
}
```
## outline
- 类型:`number | [number, number] | 'deep' | false`
- 默认值:`2`
纲要中显示的标题的级别。你可以通过传递一个数字来指定一个特定的级别,也可以通过传递一个包含底限和上限的元组来提供一个级别范围。当传递等于 `[2, 6]``'deep'` 时,除了 `h1` 之外,所有的标题级别都显示在大纲中。可以设置 `false` 来隐藏轮廓。
## outlineTitle
- 类型:`string`
- 默认值:`On this page`
可用于自定义右侧边栏的标题 (在大纲链接的顶部)。这在用另一种语言编写文档时很有用。
```js
export default {
themeConfig: {
outlineTitle: 'In hac pagina'
}
}
```
## socialLinks
- 类型:`SocialLink[]`
你可以定义此选项以在导航中展示带有图标的社交帐户链接。
```js
export default {
themeConfig: {
socialLinks: [
{ icon: 'github', link: 'https://github.com/vuejs/vitepress' },
{ icon: 'twitter', link: '...' },
// You can also add custom icons by passing SVG as string:
{
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>'
},
link: '...'
}
]
}
}
```
```ts
interface SocialLink {
icon: SocialLinkIcon
link: string
}
type SocialLinkIcon =
| 'discord'
| 'facebook'
| 'github'
| 'instagram'
| 'linkedin'
| 'mastodon'
| 'slack'
| 'twitter'
| 'youtube'
| { svg: string }
```
## footer
- 类型:`Footer`
页脚配置。你可以添加一些消息和版权内容。出于设计考虑,仅当页面不包含侧边栏时才会显示页脚。
```ts
export default {
themeConfig: {
footer: {
message: 'Released under the MIT License.',
copyright: 'Copyright © 2019-present Evan You'
}
}
}
```
```ts
export interface Footer {
message?: string
copyright?: string
}
```
## editLink
- 类型:`EditLink`
编辑链接可让你显示链接以编辑 Git 管理服务 (例如 GitHub 或 GitLab上的页面)。有关详细信息,请参见[主题:编辑链接](../guide/theme-edit-link)。
```js
export default {
themeConfig: {
editLink: {
pattern: 'https://github.com/vuejs/vitepress/edit/main/docs/:path',
text: 'Edit this page on GitHub'
}
}
}
```
```ts
export interface EditLink {
pattern: string
text?: string
}
```
## lastUpdatedText
- 类型:`string`
- 默认值:`Last updated`
显示“上次更新时间”之前的前缀文本。
```ts
export default {
themeConfig: {
lastUpdatedText: 'Updated Date'
}
}
```
## carbonAds
- 类型:`CarbonAds`
显示 [Carbon Ads](https://www.carbonads.net/) 的选项。
```ts
export default {
themeConfig: {
carbonAds: {
code: 'your-carbon-code',
placement: 'your-carbon-placement'
}
}
}
```
```ts
export interface CarbonAds {
code: string
placement: string
}
```
有关详细信息,请参见 [Theme: Carbon Ads](../guide/theme-carbon-ads)
## docFooter
- 类型:`DocFooter`
可用于自定义出现在上一个和下一个链接上方的文本。如果不是用英语编写文档,这很有帮助。
```js
export default {
themeConfig: {
docFooter: {
prev: 'Pagina prior',
next: 'Proxima pagina'
}
}
}
```
```ts
export interface DocFooter {
prev?: string
next?: string
}
```

@ -16,7 +16,7 @@
## Public 文件 {#public-files} ## Public 文件 {#public-files}
有时你可能需要提供一些 Markdown 或主题组件中未直接引用的静态资源 (例如,站图标和 PWA 图标)。 项目根目录下的 `public` 目录 (如果你正在运行的是 `vitepress build docs`,则为 `docs` 文件夹) 将会保留,用以提供源代码中从未引用的静态资源 (例如 `robots.txt`) 和需要保留完全相同的文件名 (不生成哈希) 的资源。 有时你可能需要提供一些 Markdown 或主题组件中未直接引用的静态资源 (例如,站图标和 PWA 图标)。 项目根目录下的 `public` 目录 (如果你正在运行的是 `vitepress build docs`,则为 `docs` 文件夹) 将会保留,用以提供源代码中从未引用的静态资源 (例如 `robots.txt`) 和需要保留完全相同的文件名 (不生成哈希) 的资源。
放在 `public` 中的资源将会直接复制到 dist 的根目录。 放在 `public` 中的资源将会直接复制到 dist 的根目录。

@ -1,6 +1,6 @@
# 配置 {#configuration} # 配置 {#configuration}
当没有任何配置的时候,页面将非常轻量,但用户也无法通过导航去访问站。要自定义站点,首先在 docs 目录里创建一个 `.vitepress` 目录。 这是放置所有 VitePress 特定文件的地方。 这时候你的项目结构大概是这样的: 当没有任何配置的时候,页面将非常轻量,但用户也无法通过导航去访问站。要自定义站点,首先在 docs 目录里创建一个 `.vitepress` 目录。 这是放置所有 VitePress 特定文件的地方。 这时候你的项目结构大概是这样的:
``` ```
. .

@ -95,12 +95,12 @@ VitePress 将在 `http://localhost:5173` 启动一个支持热部署的本地开
## 下一步? {#what-s-next} ## 下一步? {#what-s-next}
到目前为止,你应该拥有一个基本但功能强大的 VitePress 文档站点。但现在用户还无法浏览该站点,因为它缺少菜单,类似于这个站上的侧边栏。 到目前为止,你应该拥有一个基本但功能强大的 VitePress 文档站点。但现在用户还无法浏览该站点,因为它缺少菜单,类似于这个站上的侧边栏。
要启用这些导航,我们必须向站点添加一些配置。前往[配置指南](./configuration)了解如何配置 VitePress。 要启用这些导航,我们必须向站点添加一些配置。前往[配置指南](./configuration)了解如何配置 VitePress。
如果你想了解更多关于可以在页面中执行的操作,例如编写 Markdown 或使用 Vue 组件,请查看文档的“编写”部分。[Markdown 指南](./markdown)将是一个很好的起点。 如果你想了解更多关于可以在页面中执行的操作,例如编写 Markdown 或使用 Vue 组件,请查看文档的“编写”部分。[Markdown 指南](./markdown)将是一个很好的起点。
如果你想了解如何自定义站外观(主题),并了解 VitePress 默认主题提供的功能,请访问[主题:简介](./theme-introduction)。 如果你想了解如何自定义站外观(主题),并了解 VitePress 默认主题提供的功能,请访问[主题:简介](./theme-introduction)。
当你的文档站点已经成形准备部署时,请务必阅读[部署指南](./deploying)。 当你的文档站点已经成形准备部署时,请务必阅读[部署指南](./deploying)。

@ -281,7 +281,7 @@ export default {
在 Shiki 的仓库里有对应支持的[语言列表](https://github.com/shikijs/shiki/blob/main/docs/languages.md)。 在 Shiki 的仓库里有对应支持的[语言列表](https://github.com/shikijs/shiki/blob/main/docs/languages.md)。
你还可以在应用配置中自定义语法高亮主题。有关详细信息,请参阅 [`markdown` 选项](../config/app-configs#markdown)。 你还可以在应用全局配置中自定义语法高亮主题。有关详细信息,请参阅 [`markdown` 选项](../config/app-configs#markdown)。
## 代码块中定义行高亮 {#line-highlighting-in-code-blocks} ## 代码块中定义行高亮 {#line-highlighting-in-code-blocks}
@ -617,4 +617,4 @@ module.exports = {
} }
``` ```
通过[配置:应用配置](../config/app-configs#markdown)查看可配置属性的完整列表。 通过[配置:应用全局配置](../config/app-configs#markdown)查看可配置属性的完整列表。

@ -2,7 +2,7 @@
如果你来自 VitePress 0.x 版本,由于新功能和增强功能,会有一些重大更改。 请按照本指南了解如何将你的应用程序迁移到最新的 VitePress。 如果你来自 VitePress 0.x 版本,由于新功能和增强功能,会有一些重大更改。 请按照本指南了解如何将你的应用程序迁移到最新的 VitePress。
## 应用配置 {#app-config} ## 应用全局配置 {#app-config}
- 国际化功能尚未实现。 - 国际化功能尚未实现。

@ -19,4 +19,4 @@ export default {
`//cdn.carbonads.com/carbon.js?serve=${code}&placement=${placement}` `//cdn.carbonads.com/carbon.js?serve=${code}&placement=${placement}`
``` ```
如需了解有关 Carbon Ads 配置的更多信息,请访问 [Carbon Ads 站](https://www.carbonads.net/)。 如需了解有关 Carbon Ads 配置的更多信息,请访问 [Carbon Ads ](https://www.carbonads.net/)。

@ -2,7 +2,7 @@
Nav 是显示在页面顶部的导航栏。 它包含站点标题、全局菜单链接等。 Nav 是显示在页面顶部的导航栏。 它包含站点标题、全局菜单链接等。
## 站的标题和 logo {#site-title-and-logo} ## 站的标题和 logo {#site-title-and-logo}
默认情况下,导航的展示会引用 [`config.title`](../config/app-configs#title) 配置的站点标题。如果想更改导航上显示的内容,可以在 `themeConfig.siteTitle` 选项中定义自定义文本。 默认情况下,导航的展示会引用 [`config.title`](../config/app-configs#title) 配置的站点标题。如果想更改导航上显示的内容,可以在 `themeConfig.siteTitle` 选项中定义自定义文本。
@ -14,7 +14,7 @@ export default {
} }
``` ```
可以通过配置 `logo` 来展示站的 logologo 应该直接放在 `public` 中,并定义为绝对路径。 可以通过配置 `logo` 来展示站的 logologo 应该直接放在 `public` 中,并定义为绝对路径。
```js ```js
export default { export default {
@ -24,7 +24,7 @@ export default {
} }
``` ```
添加 logo 后将会与站标题一起显示。如果只想要展示 logo 而隐藏标题,请将 `siteTitle` 设置为 `false` 添加 logo 后将会与站标题一起显示。如果只想要展示 logo 而隐藏标题,请将 `siteTitle` 设置为 `false`
```js ```js
export default { export default {

@ -68,7 +68,7 @@ export default {
## 多个侧边栏 {#multiple-sidebars} ## 多个侧边栏 {#multiple-sidebars}
你可能会根据页面路径显示不同的侧边栏。例如,如本站所示,你可能希望在文档中创建单独的内容部分,例如“指南”页面和“配置”页面。 你可能会根据页面路径显示不同的侧边栏。例如,如本站所示,你可能希望在文档中创建单独的内容部分,例如“指南”页面和“配置”页面。
为此,首先将你的页面放到所在的目录中: 为此,首先将你的页面放到所在的目录中:

@ -34,7 +34,7 @@
<div class="language-text"><pre><code><span v-for="i in 3">{{ i }} </span></code></pre></div> <div class="language-text"><pre><code><span v-for="i in 3">{{ i }} </span></code></pre></div>
### 获取站和页面数据 {#access-to-site-page-data} ### 获取站和页面数据 {#access-to-site-page-data}
你可以在 `<script>` 里使用 [`useData` 辅助函数](./api#usedata) 并在页面里绑定数据。 你可以在 `<script>` 里使用 [`useData` 辅助函数](./api#usedata) 并在页面里绑定数据。

Loading…
Cancel
Save