`
+定义能动态提供内容的 “虚拟” 路由。 路由是预期路径与字符串或函数之间的映射。 如果映射值是字符串，它将被视为 markdown 并进行相应的解析。 如果是函数，则应返回 markdown 内容。
-一个语言列表。在浏览这个列表中的语言的翻译文档时都会在请求到一个对应语言的翻译文档，不存在时显示默认语言的同名文档
+路由函数接收最多三个参数：
-Example:
+1. `route` - 请求的路由路径（例如`/bar/baz`）
+2. `matched` - 路由匹配的 [`RegExpMatchArray`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/match)（例如，对于 `/bar/(.+)`，你会得到 `['/bar/baz', 'baz']`）
+3. `next` - 这是一个回调，当路由函数为异步时可以调用
-- 尝试访问`/de/overview`，如果存在则显示
-- 如果不存在则尝试`/overview`（取决于默认语言），如果存在即显示
-- 如果也不存在，显示404页面
+请注意，顺序很重要！ 路由的匹配顺序与你声明路由的顺序相同，这意味着在路由重叠的情况下，你可能希望先列出更具体的路由。
```js
window.$docsify = {
- fallbackLanguages: ['fr', 'de'],
+ routes: {
+ // Basic match w/ return string
+ '/foo': '# Custom Markdown',
+
+ // RegEx match w/ synchronous function
+ '/bar/(.*)'(route, matched) {
+ return '# Custom Markdown';
+ },
+
+ // RegEx match w/ asynchronous function
+ '/baz/(.*)'(route, matched, next) {
+ fetch('/api/users?id=12345')
+ .then(response => {
+ next('# Custom Markdown');
+ })
+ .catch(err => {
+ // Handle error...
+ });
+ },
+ },
};
```
-## notFoundPage
+除字符串外，路由函数还可以返回一个假值（`null` \ `undefined`），以表示忽略当前请求：
-- 类型: `Boolean` | `String` | `Object`
+```js
+window.$docsify = {
+ routes: {
+ // accepts everything other than dogs (synchronous)
+ '/pets/(.+)'(route, matched) {
+ if (matched[0] === 'dogs') {
+ return null;
+ } else {
+ return 'I like all pets but dogs';
+ }
+ }
+
+ // accepts everything other than cats (asynchronous)
+ '/pets/(.*)'(route, matched, next) {
+ if (matched[0] === 'cats') {
+ next();
+ } else {
+ // Async task(s)...
+ next('I like all pets but cats');
+ }
+ }
+ }
+}
+```
-在找不到指定页面时加载`_404.md`:
+最后，如果某个特定路径有真正的 markdown 文件（因此路由不应匹配该文件），可以通过返回一个明确的 `false` 值将其排除在外：
```js
window.$docsify = {
- notFoundPage: true,
+ routes: {
+ // if you look up /pets/cats, docsify will skip all routes and look for "pets/cats.md"
+ '/pets/cats'(route, matched) {
+ return false;
+ }
+
+ // but any other pet should generate dynamic content right here
+ '/pets/(.+)'(route, matched) {
+ const pet = matched[0];
+ return `your pet is ${pet} (but not a cat)`;
+ }
+ }
+}
+```
+
+## skipLink
+
+- 类型：`Boolean|String|Object`
+- 默认：`'Skip to main content'`
+
+决定是否/如何显示网站的 [skip navigation link](https://webaim.org/techniques/skipnav/)。
+
+```js
+// Render skip link for all routes (default)
+window.$docsify = {
+ skipLink: 'Skip to main content',
};
```
-加载自定义404页面:
+```js
+// Render localized skip links based on route paths
+window.$docsify = {
+ skipLink: {
+ '/es/': 'Saltar al contenido principal',
+ '/de-de/': 'Ga naar de hoofdinhoud',
+ '/ru-ru/': 'Перейти к основному содержанию',
+ '/zh-cn/': '跳到主要内容',
+ },
+};
+```
```js
+// Do not render skip link
window.$docsify = {
- notFoundPage: 'my404.md',
+ skipLink: false,
};
```
-加载正确的本地化过的404页面:
+## subMaxLevel
+
+- 类型：`Number`
+- 默认：`0`
+
+在自定义侧边栏中添加目录 (TOC)。
```js
window.$docsify = {
- notFoundPage: {
- '/': '_404.md',
- '/de': 'de/_404.md',
- },
+ subMaxLevel: 2,
+};
+```
+
+如果你在侧边栏中设置了主页链接，并希望它在访问根网址时显示为活动状态，请确保相应更新侧边栏：
+
+```markdown
+- Sidebar
+ - [Home](/)
+ - [Another page](another.md)
+```
+
+详见[#1131](https://github.com/docsifyjs/docsify/issues/1131)。
+
+## themeColor ⚠️
+
+!> 自 v5 起已弃用。 使用 `--theme-color` [主题属性](zh-cn/themes#theme-properties) [自定义](zh-cn/themes#customization) 主题颜色。
+
+- 类型：`String`
+
+自定义主题颜色。
+
+```js
+window.$docsify = {
+ themeColor: '#3F51B5',
};
```
-> 注意: 配置过`fallbackLanguages`这个选项的页面与这个选项`notFoundPage`冲突。
+## topMargin ⚠️
-## topMargin
+!> 自 v5 起已弃用。 在使用粘性导航栏时，使用 `--scroll-padding-top` [主题属性](zh-cn/themes#theme-properties) 指定滚动边距。
-- 类型: `Number`
-- 默认值: `0`
+- 类型：`Number|String`
+- 默认：`0`
-让你的内容页在滚动到指定的锚点时，距离页面顶部有一定空间。当你使用 `固定页头` 布局时这个选项很有用，可以让你的锚点对齐标题栏。
+在视口顶部添加滚动填充。 当你添加了一个粘性或"固定"元素，并希望自动滚动与元素底部对齐时，该功能非常有用。
```js
window.$docsify = {
- topMargin: 90, // default: 0
+ topMargin: 90, // 90, '90px', '2rem', etc.
};
```
## vueComponents
-- type: `Object`
+- 类型：`Object`
-创建并注册全局 [Vue组件](https://vuejs.org/v2/guide/components.html) 。组件是以组件名称为键，以包含 Vue 选项的对象为值来指定的。组件`data`对每个实例都是唯一的，并且在用户浏览网站时不会持久。
+创建并注册全局 [Vue](https://vuejs.org/guide/essentials/component-basics.html)。 指定组件时，以组件名称为键，以包含 Vue 选项的对象为值。 组件 `data` 在每个实例中都是唯一的，不会在用户导航站点时持续存在。
```js
window.$docsify = {
vueComponents: {
'button-counter': {
template: `
-
+
`,
data() {
return {
@@ -635,9 +977,9 @@ window.$docsify = {
## vueGlobalOptions
-- type: `Object`
+- 类型：`Object`
-指定 [Vue选项](https://vuejs.org/v2/api/#Options-Data) ，用于未明确使用[vueMounts](#mounting-dom-elements)、[vueComponents](#components)或[markdown脚本](#markdown-script)挂载的 Vue 内容。对全局`data`的更改将持续存在，并在任何使用全局引用的地方得到反映。
+指定全局 Vue 选项，以便与未通过 [vueMounts](#mounting-dom-elements)、[vueComponents](#components) 或 [markdown script](#markdown-script) 明确加载的 Vue 内容一起使用。 对全局 `data` 的更改将持续存在，并在使用全局引用的任何地方得到反映。
```js
window.$docsify = {
@@ -652,11 +994,11 @@ window.$docsify = {
```
```markdown
-
-
+<0>
+ <1>-
{{ count }}
-
-
+ <2>+
+
```
-[在GitHub上查看输出](https://github.com/docsifyjs/docsify/blob/develop/docs/vue.md#template-syntax)
+[在 GitHub 上查看输出](https://github.com/docsifyjs/docsify/blob/develop/docs/vue.md#template-syntax)
+
+## 代码块 :id=code-blocks
+
+默认情况下，Docsify 忽略代码块中的 Vue 模板语法：
+
+````markdown
+```
+{{ message }}
+```
+````
+
+要在代码块中处理 Vue 模板语法，请将代码块封装在带有 `v-template` 属性的元素中：
+
+````markdown
+
-当使用[data](#data)、[computed properties](#computed-properties)、[methods](#methods)和[lifecycle hooks](#lifecycle-hooks)时，Vue内容会变得更加有趣。这些选项可以作为[全局选项](#global-options)或在DOM中的[mounts](#mounts)和[component](#components)来指定。
+```
+{{ message }}
+```
+
+
+````
-### Data
+## 数据 :id=data
```js
{
@@ -70,29 +80,26 @@ Vue[模板语法](https://vuejs.org/v2/guide/syntax.html) 用于创建动态内
```
+
```markdown
-
+
{{ message }}
-
+
-
-
-Text for GitHub
```
+
-[在GitHub上查看输出](https://github.com/docsifyjs/docsify/blob/develop/docs/vue.md#data)
+[在 GitHub 上查看输出](https://github.com/docsifyjs/docsify/blob/develop/docs/vue.md#data)
-### Computed properties
+## 计算属性 :id=computed-properties
```js
{
@@ -125,7 +132,7 @@ Good {{ timeOfDay }}!
-### Methods
+## 方法 :id=methods
```js
{
@@ -150,7 +157,7 @@ Good {{ timeOfDay }}!
-### Lifecycle Hooks
+## 生命周期钩子 :id=lifecycle-hooks
```js
{
@@ -188,14 +195,15 @@ Good {{ timeOfDay }}!
![]()
+
{{ image.title }}
-## Global options
+## 全局选项 :id=global-options
-使用`vueGlobalOptions`来指定 [Vue options](https://vuejs.org/v2/api/#Options-Data) ，用于未明确挂载[vueMounts](#mounts)、[vueComponents](#components)或[markdown脚本](#markdown-script)的Vue内容。对全局`data`的更改将持续存在，并反映在任何使用全局引用的地方。
+使用 `vueGlobalOptions` 来指定用于使用 Vue 内容的全局 Vue 选项，这些内容没有被明确挂载 [vueMounts](#mounts)、[vueComponents](#components) 或 [markdown 脚本](#markdown-script)。 对全局 `data` 的更改将持续存在，并在使用全局引用的任何地方得到反映。
```js
window.$docsify = {
@@ -211,17 +219,17 @@ window.$docsify = {
```markdown
-
- {{ count }}
+ {{ count }}
+
```
@@ -229,17 +237,17 @@ window.$docsify = {
-对一个计数器的更改会影响两个计数器。这是因为两个实例都引用了相同的全局`count`值。现在，导航到一个新的页面，并返回本节，查看对全局数据的更改如何在页面加载之间持久化。
+对一个计数器的更改会影响到两个计数器。 这是因为两个实例都引用了相同的全局 `count` 值。 现在，导航到一个新页面，然后返回到本节，看看在页面加载之间对全局数据所做的更改是如何持续的。
-## Mounts
+## 挂载 :id=mounts
-使用`vueMounts`来指定要挂载为 [Vue实例](https://vuejs.org/v2/guide/instance.html) 的DOM元素及其相关选项。挂载元素使用 [CSS选择器](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors) 作为键，并使用一个包含Vue选项的对象作为其值。每次加载新页面时，Docsify将挂载主内容区域中第一个匹配的元素。挂载元素`data`对每个实例来说都是唯一的，并且在用户浏览网站时不会持久。
+使用 `vueMounts` 指定要挂载为 Vue 实例的 DOM 元素及其相关选项。 挂载元素是使用 [CSS 选择器](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors) 作为键，包含 Vue 选项的对象作为值来指定的。 每次加载新页面时，Docsify 都会在主内容区域挂载第一个匹配元素。 挂载元素 `data` 是每个实例的唯一特性，不会在用户导航站点时持续存在。
```js
window.$docsify = {
@@ -257,21 +265,21 @@ window.$docsify = {
```markdown
-
- {{ count }}
+ {{ count }}
+
```
-## Components
+## 组件 :id=components
-使用`vueComponents`创建和注册全局[Vue组件](https://vuejs.org/v2/guide/components.html) 。组件是以组件名称为键，以包含Vue选项的对象为值来指定的。组件`data`对每个实例来说都是唯一的，并且在用户浏览网站时不会持久存在。
+使用 `vueComponents` 创建和注册全局 [Vue components](https://vuejs.org/guide/essentials/component-basics.html)。 指定组件时，以组件名称为键，以包含 Vue 选项的对象为值。 组件 `data` 在每个实例中都是唯一的，不会在用户导航站点时持续存在。
```js
window.$docsify = {
@@ -302,24 +310,13 @@ window.$docsify = {
-## Markdown script
+## Markdown 脚本 :id=markdown-script
-Vue内容可以使用 Markdown 页面中的`
-```
-
-```html
-
```
-## Technical Notes
+## 技术说明 :id=technical-notes
-- Docsify processes Vue content in the following order on each page load:
- 1. Execute markdown `
```
-!> 如果需要用 docsify 的内部方法，可以通过 `window.Docsify` 获取，通过 `vm` 获取当前实例。
+## 模板
-## 例子
+下面是一个插件模板，其中包含所有可用生命周期钩子的占位符。
+
+1. 复制模板
+2. 酌情修改 `myPlugin` 名称
+3. 添加你的插件逻辑
+4. 删除未使用的生命周期钩子
+5. 将文件保存为 `docsify-plugin-[name].js`
+6. 使用标准 '