From dcdf33b7134c5dd994c552e796c8e6911f212b9f Mon Sep 17 00:00:00 2001 From: sy-records <52o@qq52o.cn> Date: Fri, 5 Feb 2021 15:50:46 +0800 Subject: [PATCH] Update docs for 4.12.0 --- configuration.md | 115 +++++++++++++- plugins.md | 8 + quickstart.md | 8 +- vue.md | 381 ++++++++++++++++++++++++++++++++++++++++------- 4 files changed, 452 insertions(+), 60 deletions(-) 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 }} + +

+``` + + +

+ + {{ 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 }} + +
+``` + + + + {{ 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' })` 创建示例。 +#### Vue 3.x -*README.md* +```html + + -````markdown -# Vue 介绍 + + +``` -`v-for` 的用法 +## 模板语法 -```html +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 + +

Text for GitHub

+ + + + +

2 + 2 = {{ 2 + 2 }}

``` - -```` + +

Text for GitHub

+ + -当然你也可以手动初始化 Vue，这样你可以自定义一些配置。 +

2 + 2 = {{ 2 + 2 }}

+ -*README.md* +[在GitHub上查看输出](https://github.com/docsifyjs/docsify/blob/develop/docs/vue.md#template-syntax) +当使用[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!' + }; + } +} +``` + + ```markdown -# Vue 的基本用法 + +{{ message }} -
hello {{ msg }}
+ +

- + +

Text for GitHub

``` + -!> 一个 Markdown 文件里只有第一个 `script` 标签内的内容会被执行。 + -## 搭配 Vuep 写 Playground +{{ message }} -[Vuep](https://github.com/QingWei-Li/vuep) 是一个提供在线编辑和预览效果的 Vue 组件，搭配 docsify 可以直接在文档里写 Vue 的示例代码，支持 Vue component spec 和 JSX。 +

+

Text for GitHub

+ -*index.html* +[在GitHub上查看输出](https://github.com/docsifyjs/docsify/blob/develop/docs/vue.md#data) -```html - - +### Computed properties - - - - +```js +{ + computed: { + timeOfDay() { + const date = new Date(); + const hours = date.getHours(); - - - - + if (hours < 12) { + return 'morning'; + } + else if (hours < 18) { + return 'afternoon'; + } + else { + return 'evening' + } + } + }, +} ``` -*README.md* ```markdown -# Vuep 使用 +Good {{ timeOfDay }}! +``` - + - + }, +} +``` + +```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 }}
+
+
+``` + + +
+
+ +
{{ 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 }} + +

+ + +请注意当多个全局计数器呈现时的行为： + + +

+ + {{ 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 }} + +
+``` + + + + {{ 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 + + ``` +## Technical Notes + +- Docsify processes Vue content in the following order on each page load: + 1. Execute markdown `