diff --git a/configuration.md b/configuration.md
index 3aff8ae..8d0a4a7 100644
--- a/configuration.md
+++ b/configuration.md
@@ -464,6 +464,18 @@ window.$docsify = {
};
```
+## crossOriginLinks
+
+- type: `Array`
+
+当设置了`routerMode:'history'`时,你可能会面临跨域的问题,参见 [#1379](https://github.com/docsifyjs/docsify/issues/1379) 。在 Markdown 内容中,有一个简单的方法可以解决,参见[helpers](zh-cn/helpers.md) 中的跨域链接。
+
+```js
+window.$docsify = {
+ crossOriginLinks: ['https://example.com/cross-origin-link'],
+};
+```
+
## noCompileLinks
- 类型: `Array`
@@ -533,7 +545,7 @@ window.$docsify = {
Example:
- 尝试访问`/de/overview`,如果存在则显示
-- 如果不存在则尝试`/overview`(取决于默认语言),如果存在即显示
+- 如果不存在则尝试`/overview`(取决于默认语言),如果存在即显示
- 如果也不存在,显示404页面
```js
@@ -587,3 +599,104 @@ window.$docsify = {
topMargin: 90, // default: 0
};
```
+
+## vueComponents
+
+- type: `Object`
+
+创建并注册全局 [Vue组件](https://vuejs.org/v2/guide/components.html) 。组件是以组件名称为键,以包含 Vue 选项的对象为值来指定的。组件`data`对每个实例都是唯一的,并且在用户浏览网站时不会持久。
+
+```js
+window.$docsify = {
+ vueComponents: {
+ 'button-counter': {
+ template: `
+
+ `,
+ data() {
+ return {
+ count: 0,
+ };
+ },
+ },
+ },
+};
+```
+
+```markdown
+
+```
+
+
+
+## vueGlobalOptions
+
+- type: `Object`
+
+指定 [Vue选项](https://vuejs.org/v2/api/#Options-Data) ,用于未明确使用[vueMounts](#mounting-dom-elements)、[vueComponents](#components)或[markdown脚本](#markdown-script)挂载的 Vue 内容。对全局`data`的更改将持续存在,并在任何使用全局引用的地方得到反映。
+
+```js
+window.$docsify = {
+ vueGlobalOptions: {
+ data() {
+ return {
+ count: 0,
+ };
+ },
+ },
+};
+```
+
+```markdown
+
+
+ {{ count }}
+
+
+```
+
+
+
+## vueMounts
+
+- type: `Object`
+
+指定要挂载为 [Vue实例](https://vuejs.org/v2/guide/instance.html) 的 DOM 元素及其相关选项。挂载元素使用 [CSS选择器](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors) 作为键,并使用包含 Vue 选项的对象作为其值。每次加载新页面时,Docsify 将挂载主内容区域中第一个匹配的元素。挂载元素`data`对每个实例来说都是唯一的,并且不会在用户浏览网站时持久存在。
+
+```js
+window.$docsify = {
+ vueMounts: {
+ '#counter': {
+ data() {
+ return {
+ count: 0,
+ };
+ },
+ },
+ },
+};
+```
+
+```markdown
+
+
+ {{ count }}
+
+
+```
+
+
diff --git a/plugins.md b/plugins.md
index fa3aa3e..eff05b1 100644
--- a/plugins.md
+++ b/plugins.md
@@ -62,6 +62,12 @@
```
+当执行全文搜索时,该插件会忽略双音符(例如,"cafe" 也会匹配 "café")。像 IE11 这样的旧版浏览器需要使用以下 [String.normalize()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/normalize) polyfill 来忽略双音符:
+
+```html
+
+```
+
## 谷歌统计 - Google Analytics
需要配置 track id 才能使用。
@@ -91,6 +97,8 @@
```
+?> 如果你不想解析成表情符号,可以使用__colon__或`:`。如果你需要在标题中使用,我们建议使用`:`。例如,`:100:`。
+
## 外链脚本 - External Script
如果文档里的 script 是内联脚本,可以直接执行;而如果是外链脚本(即 js 文件内容由 `src` 属性引入),则需要使用此插件。
diff --git a/quickstart.md b/quickstart.md
index 3a27cb7..4bdc537 100644
--- a/quickstart.md
+++ b/quickstart.md
@@ -63,10 +63,14 @@ docsify serve docs
如果你的系统里安装了 Python 的话,也可以很容易地启动一个静态服务器去预览你的网站。
-```bash
+```python2
cd docs && python -m SimpleHTTPServer 3000
```
+```python3
+cd docs && python -m http.server 3000
+```
+
## Loading 提示
初始化时会显示 `Loading...` 内容,你可以自定义提示信息。
@@ -74,7 +78,7 @@ cd docs && python -m SimpleHTTPServer 3000
```html
-
+
加载中
```
diff --git a/vue.md b/vue.md
index 7dae9ac..a239b5a 100644
--- a/vue.md
+++ b/vue.md
@@ -2,100 +2,367 @@
你可以直接在 Markdown 文件里写 Vue 代码,它将被执行。我们可以用它写一些 Vue 的 Demo 或者示例代码。
+首先,将 Vue[2.x](https://vuejs.org) 或 [3.x](https://v3.vuejs.org) 添加到你的`index.html`文件中。
-## 基础用法
+为你的站点选择合适的生产版本或开发版本,以获得有用的控制台警告和 [Vue.js devtools](https://github.com/vuejs/vue-devtools) 支持。
-在 `index.html` 里引入 Vue。
+#### Vue 2.x
```html
-
-
+
+
-
-
-
+
+
```
-接着就可以愉快地在 Markdown 里写 Vue 了。默认会执行 `new Vue({ el: '#main' })` 创建示例。
-
-*README.md*
-
-````markdown
-# Vue 介绍
-
-`v-for` 的用法
+#### Vue 3.x
```html
-
+
+
+
+
+
```
-
-````
+## 模板语法
-当然你也可以手动初始化 Vue,这样你可以自定义一些配置。
-
-*README.md*
+Vue[模板语法](https://vuejs.org/v2/guide/syntax.html) 用于创建动态内容。无需额外的配置,这种语法提供了一些有用的功能,如支持 [JavaScript表达式](https://vuejs.org/v2/guide/syntax.html#Using-JavaScript-Expressions) 和 Vue[指令](https://vuejs.org/v2/guide/syntax.html#Directives) 的循环和条件渲染。
```markdown
-# Vue 的基本用法
+
+Text for GitHub
-hello {{ msg }}
+
+
-
+
+2 + 2 = {{ 2 + 2 }}
```
-!> 一个 Markdown 文件里只有第一个 `script` 标签内的内容会被执行。
+
-*index.html*
+[在GitHub上查看输出](https://github.com/docsifyjs/docsify/blob/develop/docs/vue.md#template-syntax)
-```html
-
-
+当使用[data](#data)、[computed properties](#computed-properties)、[methods](#methods)和[lifecycle hooks](#lifecycle-hooks)时,Vue内容会变得更加有趣。这些选项可以作为[全局选项](#global-options)或在DOM中的[mounts](#mounts)和[component](#components)来指定。
-
-
-
-
+### Data
-
-
-
-
+```js
+{
+ data() {
+ return {
+ message: 'Hello, World!'
+ };
+ }
+}
```
-*README.md*
+
```markdown
-# Vuep 使用
+
+{{ message }}
-
+
+
-
+ },
+}
+```
+
+```markdown
+Good {{ timeOfDay }}!
+```
+
+
+
+### Methods
+
+```js
+{
+ data() {
+ return {
+ message: 'Hello, World!'
+ };
+ },
+ methods: {
+ hello() {
+ alert(this.message);
+ }
+ },
+}
+```
+
+```markdown
+
+```
+
+
+
+### Lifecycle Hooks
+
+```js
+{
+ data() {
+ return {
+ images: null,
+ };
+ },
+ created() {
+ fetch('https://api.domain.com/')
+ .then(response => response.json())
+ .then(data => (this.images = data))
+ .catch(err => console.log(err));
+ }
+}
+
+// API response:
+// [
+// { title: 'Image 1', url: 'https://domain.com/1.jpg' },
+// { title: 'Image 2', url: 'https://domain.com/2.jpg' },
+// { title: 'Image 3', url: 'https://domain.com/3.jpg' },
+// ];
+```
+
+```markdown
+
+
+
+ {{ image.title }}
+
+
+```
+
+
+
+## Global options
+
+使用`vueGlobalOptions`来指定 [Vue options](https://vuejs.org/v2/api/#Options-Data) ,用于未明确挂载[vueMounts](#mounts)、[vueComponents](#components)或[markdown脚本](#markdown-script)的Vue内容。对全局`data`的更改将持续存在,并反映在任何使用全局引用的地方。
+
+```js
+window.$docsify = {
+ vueGlobalOptions: {
+ data() {
+ return {
+ count: 0,
+ };
+ },
+ },
+};
+```
+
+```markdown
+
+
+ {{ count }}
+
+
+```
+
+
+
+请注意当多个全局计数器呈现时的行为:
+
+
+
+对一个计数器的更改会影响两个计数器。这是因为两个实例都引用了相同的全局`count`值。现在,导航到一个新的页面,并返回本节,查看对全局数据的更改如何在页面加载之间持久化。
+
+## 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`对每个实例来说都是唯一的,并且在用户浏览网站时不会持久。
+
+```js
+window.$docsify = {
+ vueMounts: {
+ '#counter': {
+ data() {
+ return {
+ count: 0,
+ };
+ },
+ },
+ },
+};
+```
+
+```markdown
+
+
+ {{ count }}
+
+
+```
+
+
+
+## Components
+
+使用`vueComponents`创建和注册全局[Vue组件](https://vuejs.org/v2/guide/components.html) 。组件是以组件名称为键,以包含Vue选项的对象为值来指定的。组件`data`对每个实例来说都是唯一的,并且在用户浏览网站时不会持久存在。
+
+```js
+window.$docsify = {
+ vueComponents: {
+ 'button-counter': {
+ template: `
+
+ `,
+ data() {
+ return {
+ count: 0,
+ };
+ },
+ },
+ },
+};
+```
+
+```markdown
+
+
+```
+
+
+
+## Markdown script
+
+Vue内容可以使用 Markdown 页面中的`
```
+```html
+
+
+```
-?> 具体效果参考 [Vuep 文档](https://qingwei-li.github.io/vuep/)。
+## Technical Notes
+
+- Docsify processes Vue content in the following order on each page load:
+ 1. Execute markdown `