From e5452243b1f4ee61b1ad0cd1fe6e97c12156b33f Mon Sep 17 00:00:00 2001 From: "qingwei.li" Date: Wed, 4 Jan 2017 21:41:35 +0800 Subject: [PATCH] Update docs --- CHANGELOG.md | 7 +++ docs/README.md | 148 +++++++++++++++++++++++++++++++++++++++-------- docs/zh-cn.md | 153 +++++++++++++++++++++++++++++++++++++++++-------- 3 files changed, 261 insertions(+), 47 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index b4167bc..3c83b2a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,12 @@ +## 1.5.0 + ### Bug fixes - Fix slugify. +- Fix nav highlight. + +### Features +- Initialize the configuration by `window.$docsify`. +- Markdown parser is configurable. ## 1.4.3 ### Bug fixes diff --git a/docs/README.md b/docs/README.md index 8a2b674..405495b 100644 --- a/docs/README.md +++ b/docs/README.md @@ -60,7 +60,11 @@ docsify serve docs Read more [docsify-cli](https://github.com/QingWei-Li/docsify-cli) -## Themes + + +## More + +### Themes Currently available `vue.css` and `buble.css` ```html @@ -74,8 +78,6 @@ Minified files ``` -## More - ### Multiple pages If you need other pages, directly create the markdown file, such as `guide.md` is `/#/guide`. @@ -131,31 +133,75 @@ Currently the background of cover page is generated randomly. We can customize t ![color](#f0f0f0) ``` +### Markdown parser -### Options +Docsify uses [marked](https://github.com/chjj/marked) to parse markdown, we can configure it -#### repo +```js +window.$docsify = { + markdown: { + smartypants: true + } +} +``` + +And can even be completely customized + +```js +window.$docsify = { + markdown: function(marked) { + // ... + + return marked + } +} +``` + +## Options + +You can add configuration by script tag attributes or `window.$docsify`. + +### repo Display the [GitHub Corner](http://tholman.com/github-corners/) widget. ```html ``` -#### max-level + +```js +window.$docsify = { + repo: 'your/repo' +} +``` + +### max-level TOC level. ```html ``` -#### el +```js +window.$docsify = { + maxLevel: 6 +} +``` + +### el Root element. ```html ``` -#### sidebar-toggle +```js +window.$docsify = { + el: '#app' +} +``` + +### sidebar-toggle Sidebar with toggle @@ -163,7 +209,13 @@ Sidebar with toggle ``` -#### sidebar +```js +window.$docsify = { + sidebarToggle: true +} +``` + +### sidebar Custom sidebar. If it's set, the TOC will be disabled. Bind global variables on the `data-sidebar`. @@ -187,7 +239,13 @@ Custom sidebar. If it's set, the TOC will be disabled. Bind global variables on ``` -#### load-sidebar +```js +window.$docsify = { + sidebar: 'sidebar' +} +``` + +### load-sidebar Load sidebar markdown file. If it is configured, load the current directory `_sidebar.md` by default. If the file isn't exist, sidebar will appear as a TOC. ** you should add `.nojekyll` into docs folder to prevent GitHub Pages from ignoring the `_sidebar.md`** @@ -202,6 +260,12 @@ You can specify a file: ``` +```js +window.$docsify = { + loadSidebar: '_sidebar.md' +} +``` + The contents of the file can be: ```markdown @@ -211,14 +275,9 @@ The contents of the file can be: - [Getting Started](/getting-started) - [Dynamic Route Matching](/dynamic-matching) - [Nested Routes](/nested-routes) - - [Programmatic Navigation](/navigation) - - [Named Routes](/named-routes) - - [Named Views](/named-views) - - [Redirect and Alias](/redirect-and-alias) - - [HTML5 History Mode](/history-mode) ``` -#### sub-max-level +### sub-max-level Display TOC in the custom sidebar. The default value is 0. @@ -227,10 +286,14 @@ Display TOC in the custom sidebar. The default value is 0. ``` -![image](https://cloud.githubusercontent.com/assets/7565692/21563209/a8894512-ceba-11e6-80eb-fef00b80625c.png) +```js +window.$docsify = { + maxSubLevel: 4 +} +``` -#### load-navbar +### load-navbar Load navbar markdown file. If it is configured, load the current directory `_navbar.md` by default. @@ -244,6 +307,12 @@ You can specify a file: ``` +```js +window.$docsify = { + loadNavbar: '_navbar.md' +} +``` + The contents of the file can be: ```markdown @@ -260,7 +329,7 @@ If you write a sub level list, it will generate a dropdown list. - [chinese](/zh-cn) ``` -#### router +### router Hash router. @@ -268,7 +337,14 @@ Hash router. ``` -#### auto2top +```js +window.$docsify = { + router: true +} +``` + + +### auto2top Scroll to the top on changing hash. @@ -277,7 +353,13 @@ Scroll to the top on changing hash. ``` -#### homepage +```js +window.$docsify = { + auto2top: true +} +``` + +### homepage `README.md` will be rendered as a homepage for your website in the docs folder, but sometimes we want to specify another file as a homepage, or even use the `README.md` in your repo. We can use (need `data-router`): @@ -288,7 +370,14 @@ Scroll to the top on changing hash. ``` -#### basePath +```js +window.$docsify = { + homepage: true +} +``` + + +### basePath If your HTML entry file and the markdown files are in different directories, we can use: @@ -300,7 +389,14 @@ If your HTML entry file and the markdown files are in different directories, we ``` -#### coverpage +```js +window.$docsify = { + basePath: '/base/' +} +``` + + +### coverpage Generate cover page. @@ -308,4 +404,10 @@ Generate cover page. +``` + +```js +window.$docsify = { + coverpage: true +} ``` \ No newline at end of file diff --git a/docs/zh-cn.md b/docs/zh-cn.md index 9f8dd6b..081b4db 100644 --- a/docs/zh-cn.md +++ b/docs/zh-cn.md @@ -65,7 +65,10 @@ docsify serve docs 更多选项参考 [docsify-cli](https://github.com/QingWei-Li/docsify-cli) -## 主题 + +## 更多功能 + +### 主题 目前提供 vue.css 和 buble.css,直接修改 `index.html` 里的 cdn 地址即可 ```html @@ -79,8 +82,6 @@ docsify serve docs ``` -## 更多功能 - ### 多页面 `README.md` 作为主页面,如果需要其他页面,直接在文档目录下创建对应的 `*.md` 文件,例如创建一个 `guide.md` 那么对应的路由就是 `/#/guide`。 @@ -138,30 +139,77 @@ docsify serve docs ![color](#f0f0f0) ``` +### 自定义 Markdown parser -### 配置参数 +默认使用 [marked](https://github.com/chjj/marked) 处理 markdown 部分,你可以修改默认配置 -#### repo +```js +window.$docsify = { + markdown: { + smartypants: true + } +} +``` + +甚至可以完全定制化 + +```js +window.$docsify = { + markdown: function(marked) { + // ... + + return marked + } +} +``` + + +## 配置参数 + +你可以通过在标签上添加属性的方式,或者给 `window.$docsify` 传配置信息。 + +### repo 参考本文档的右上角的 GitHub 图标,如果要开启的话,将 `index.html` 里的 script 改成 ```html ``` -#### max-level + +```js +window.$docsify = { + repo: 'your/repo' +} +``` + +### max-level 目录最大展开层级,默认值为 6 ```html ``` -#### el + +```js +window.$docsify = { + maxLevel: 6 +} +``` + +### el 替换节点元素,默认为 `#app` ```html ``` -#### sidebar-toggle + +```js +window.$docsify = { + el: '#app' +} +``` + +### sidebar-toggle Sidebar 开关按钮 @@ -169,7 +217,14 @@ Sidebar 开关按钮 ``` -#### sidebar + +```js +window.$docsify = { + sidebarToggle: true +} +``` + +### sidebar 设置后 TOC 功能将不可用,适合导航较多的文档,`data-sidebar` 传入全局变量名。 @@ -192,7 +247,14 @@ Sidebar 开关按钮 ``` -#### load-sidebar + +```js +window.$docsify = { + sidebar: 'sidebar' +} +``` + +### load-sidebar 读取侧边栏配置文件,如果配置,默认加载当前目录下的 `_sidebar.md`。如果文件不存在,会显示 TOC 作为侧边栏内容。如果你有二级目录,也应该放置一份配置文件。 **如果用 `_` 开头作为文件名,你应该在文档目录下添加 `.nojekyll`,阻止 GitHub Pages 忽略下划线开头的文件。** @@ -201,12 +263,19 @@ Sidebar 开关按钮 ``` + 你可以指定侧边栏文件名 ```html ``` +```js +window.$docsify = { + loadSidebar: '_sidebar.md' +} +``` + `_sidebar.md` 的内容可以是这样的 ```markdown @@ -216,14 +285,9 @@ Sidebar 开关按钮 - [Getting Started](/getting-started) - [Dynamic Route Matching](/dynamic-matching) - [Nested Routes](/nested-routes) - - [Programmatic Navigation](/navigation) - - [Named Routes](/named-routes) - - [Named Views](/named-views) - - [Redirect and Alias](/redirect-and-alias) - - [HTML5 History Mode](/history-mode) ``` -#### sub-max-level +### sub-max-level 显示 TOC 在自定义的侧边栏里,默认最大显示 0 层。 @@ -232,10 +296,13 @@ Sidebar 开关按钮 ``` -![image](https://cloud.githubusercontent.com/assets/7565692/21563209/a8894512-ceba-11e6-80eb-fef00b80625c.png) +```js +window.$docsify = { + maxSubLevel: 4 +} +``` - -#### load-navbar +### load-navbar 读取导航配置文件,如果配置,默认加载当前目录下的 `_navbar.md`。如果文件不存在,会显示 html 里定义的导航栏。 @@ -249,6 +316,12 @@ Sidebar 开关按钮 ``` +```js +window.$docsify = { + loadNavbar: '_navbar.md' +} +``` + `_navbar.md` 的内容可以是这样 ```markdown @@ -265,7 +338,7 @@ Sidebar 开关按钮 ``` -#### router +### router 开启 hash router 功能,同时多页面切换不会重新加载资源。资源路径会被替换成 `/#/` 的形式。 @@ -273,7 +346,13 @@ Sidebar 开关按钮 ``` -#### auto2top +```js +window.$docsify = { + router: true +} +``` + +### auto2top 切换路由时自动跳转到页面顶部 @@ -282,7 +361,13 @@ Sidebar 开关按钮 ``` -#### homepage +```js +window.$docsify = { + auto2top: true +} +``` + +### homepage 默认情况下网站会将根目录下 `README.md` 作为首页渲染,但是有些时候我们想指定其他文件,甚至想直接将 repo 下的 README 作为首页。你可以这样做(需要设置 `data-router`): @@ -293,7 +378,13 @@ Sidebar 开关按钮 ``` -#### basePath +```js +window.$docsify = { + homepage: true +} +``` + +### basePath 指定加载文档的路径,如果你的 HTML 入口文件和文档是放在不同地方,你可以设置: @@ -304,7 +395,14 @@ Sidebar 开关按钮 ``` -#### coverpage + +```js +window.$docsify = { + basePath: '/base/' +} +``` + +### coverpage 生成封面,参考 [#封面](/zh-cn#封面). @@ -314,3 +412,10 @@ Sidebar 开关按钮 ``` + + +```js +window.$docsify = { + coverpage: true +} +```