jyapayne/docsify
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

update english docs

Browse source
This commit is contained in:
Johannes Rappen 2017-03-09 22:19:07 +01:00
commit 6eada5a2f7
19 changed files with 159 additions and 129 deletions
Download patch file Download diff file Expand all files Collapse all files

14
docs/README.md
View file

@ -10,13 +10,13 @@ See the [Quick start](/quickstart) for more details.
## Features ## Features
- No statically built html files * No statically built html files
- Simple and lightweight (~16kB gzipped) * Simple and lightweight (~16kB gzipped)
- Smart full-text search plugin * Smart full-text search plugin
- Multiple themes * Multiple themes
- Useful plugin API * Useful plugin API
- Emoji support * Emoji support
- Compatible with IE10+ * Compatible with IE10+
## Examples ## Examples

18
docs/_sidebar.md
View file

@ -1,8 +1,8 @@
- Getting started - Getting started
- [Quick start](/quickstart) - [Quick start](/quickstart)
- [Writing more pages](/more-pages) - [Writing more pages](/more-pages)
- [Custom navbar](/custom-navbar) - [Custom navbar](/custom-navbar)
- [Cover page](/cover) - [Cover page](/cover)
- Customization - Customization
- [Configuration](/configuration) - [Configuration](/configuration)
@ -13,10 +13,10 @@
- [Language highlighting](/language-highlight) - [Language highlighting](/language-highlight)
- Guide - Guide
- [Deploy](/deploy) - [Deploy](/deploy)
- [Helpers](/helpers) - [Helpers](/helpers)
- [Vue compatibility](/vue) - [Vue compatibility](/vue)
- [CDN](/cdn) - [CDN](/cdn)
- [Offline Mode(PWA)](/pwa) - [Offline Mode(PWA)](/pwa)
- [Changelog](/changelog) - [Changelog](/changelog)

15
docs/cdn.md
View file

@ -2,10 +2,8 @@
Recommended: [unpkg](//unpkg.com), which will reflect the latest version as soon as it is published to npm. You can also browse the source of the npm package at [unpkg.com/docsify/](//unpkg.com/docsify/). Recommended: [unpkg](//unpkg.com), which will reflect the latest version as soon as it is published to npm. You can also browse the source of the npm package at [unpkg.com/docsify/](//unpkg.com/docsify/).
## Latest version ## Latest version
```html ```html
<!-- load css --> <!-- load css -->
<link rel="stylesheet" href="//unpkg.com/docsify/themes/vue.css"> <link rel="stylesheet" href="//unpkg.com/docsify/themes/vue.css">
@ -14,8 +12,9 @@ Recommended: [unpkg](//unpkg.com), which will reflect the latest version as soon
<script src="//unpkg.com/docsify/lib/docsify.js"></script> <script src="//unpkg.com/docsify/lib/docsify.js"></script>
``` ```
## Specific version Alternatively, use [compressed files](#compressed-files).
## Specific version
```html ```html
<!-- load css --> <!-- load css -->
@ -27,7 +26,6 @@ Recommended: [unpkg](//unpkg.com), which will reflect the latest version as soon
## Compressed file ## Compressed file
```html ```html
<!-- load css --> <!-- load css -->
<link rel="stylesheet" href="//unpkg.com/docsify/lib/themes/vue.css"> <link rel="stylesheet" href="//unpkg.com/docsify/lib/themes/vue.css">
@ -36,7 +34,14 @@ Recommended: [unpkg](//unpkg.com), which will reflect the latest version as soon
<script src="//unpkg.com/docsify/lib/docsify.min.js"></script> <script src="//unpkg.com/docsify/lib/docsify.min.js"></script>
``` ```
```html
<!-- load css -->
<link rel="stylesheet" href="//unpkg.com/docsify@2.0.0/lib/themes/vue.css">
<!-- load script -->
<script src="//unpkg.com/docsify@2.0.0/lib/docsify.min.js"></script>
```
## Other CDN ## Other CDN
[jsDelivr](http://www.jsdelivr.com/projects/docsify) is available. [jsDelivr](http://www.jsdelivr.com/projects/docsify) is available.

26
docs/configuration.md
View file

@ -1,6 +1,6 @@
# Configuration # Configuration
docsify supports two ways to configure. You can configure the `window.$docsify` or write configuration on the script tag via `data-*` attributes. **docsify** supports two different ways of configuration. You can configure the `window.$docsify` or write configuration on the script tag via `data-*` attributes.
```html ```html
<!-- by $docsify --> <!-- by $docsify -->
@ -53,7 +53,6 @@ window.$docsify = {
} }
``` ```
## max-level ## max-level
- Type: `Number` - Type: `Number`
@ -72,7 +71,7 @@ window.$docsify = {
- Type: `Boolean|String` - Type: `Boolean|String`
- Default: `false` - Default: `false`
Load navbar from Markdown file. If **true** it will be loaded from `_navbar.md`. Loads navbar from the Markdown file `_navbar.md` if **true**, or else from the path specified.
```js ```js
window.$docsify = { window.$docsify = {
@ -89,8 +88,7 @@ window.$docsify = {
- Type: `Boolean|String` - Type: `Boolean|String`
- Default: `false` - Default: `false`
Loads sidebar from the Markdown file `_sidebar.md` if **true**, or else from the path specified.
Load sidebar from Markdown file. If **true** it will be loaded from `_sidebar.md`.
```js ```js
window.$docsify = { window.$docsify = {
@ -107,7 +105,7 @@ window.$docsify = {
- Type: `Number` - Type: `Number`
- Default: `0` - Default: `0`
Add TOC in custom sidebar. Add table of contents (TOC) in custom sidebar.
```js ```js
window.$docsify = { window.$docsify = {
@ -115,13 +113,11 @@ window.$docsify = {
} }
``` ```
## auto2top ## auto2top
- Type: `Boolean` - Type: `Boolean`
- Default: `false` - Default: `false`
Scrolls to the top of the screen when the route is changed. Scrolls to the top of the screen when the route is changed.
```js ```js
@ -130,13 +126,11 @@ window.$docsify = {
} }
``` ```
## homepage ## homepage
- Type: `String` - Type: `String`
- Default: `README.md` - Default: `README.md`
`README.md` in your docs folder will be treated as homepage for your website, but sometimes you may need to serve another file as your homepage. `README.md` in your docs folder will be treated as homepage for your website, but sometimes you may need to serve another file as your homepage.
```js ```js
@ -167,7 +161,6 @@ window.$docsify = {
} }
``` ```
## coverpage ## coverpage
- Type: `Boolean|String` - Type: `Boolean|String`
@ -188,8 +181,7 @@ window.$docsify = {
- Type: `String` - Type: `String`
Website name as it appears in the sidebar.
Website name appears in the sidebar.
```js ```js
window.$docsify = { window.$docsify = {
@ -222,7 +214,6 @@ window.$docsify = {
See [Markdown configuration](/markdown). See [Markdown configuration](/markdown).
```js ```js
window.$docsify = { window.$docsify = {
// object // object
@ -247,8 +238,7 @@ window.$docsify = {
- Type: `String` - Type: `String`
Customize the theme color. Customize the theme color. Use [CSS3 variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables) feature and polyfill in old browser.
Use [CSS3 variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables) feature and polyfill in old browser.
```js ```js
window.$docsify = { window.$docsify = {
@ -260,7 +250,6 @@ window.$docsify = {
- Type: `Object` - Type: `Object`
Set the route alias. You can freely manage routing rules. Set the route alias. You can freely manage routing rules.
```js ```js
@ -276,7 +265,7 @@ window.$docsify = {
- type: `Boolean` - type: `Boolean`
If `loadSidebar` and `autoHeader` are both enabled, for each link in _sidebar.md, prepend a header to the page before converting it to html. [#78](https://github.com/QingWei-Li/docsify/issues/78) If `loadSidebar` and `autoHeader` are both enabled, for each link in `_sidebar.md`, prepend a header to the page before converting it to html. Compare [#78](https://github.com/QingWei-Li/docsify/issues/78).
```js ```js
window.$docsify = { window.$docsify = {
@ -303,7 +292,6 @@ window.$docsify = {
<script> <script>
console.log(2333) console.log(2333)
</script> </script>
``` ```
Note that if you are running an external script, e.g. an embedded jsfiddle demo, make sure to include the [external-script](plugins?id=external-script) plugin. Note that if you are running an external script, e.g. an embedded jsfiddle demo, make sure to include the [external-script](plugins?id=external-script) plugin.

15
docs/cover.md
View file

@ -1,6 +1,6 @@
# Cover # Cover
Activate the cover feature by setting `coverpage` to **true**. Details are available in the [coverpage configuration paragraph](configuration#coverpage). Activate the cover feature by setting `coverpage` to **true**, compare [coverpage configuration](configuration#coverpage).
## Basic usage ## Basic usage
@ -14,16 +14,15 @@ Set `coverpage` to **true**, and create a `_coverpage.md`:
coverpage: true coverpage: true
} }
</script> </script>
<script src="//unpkg.com/docsify"></script> <script src="//unpkg.com/docsify/lib/docsify.min.js"></script>
``` ```
```markdown ```markdown
<!-- _coverpage.md --> <!-- _coverpage.md -->
![logo](_media/icon.svg) ![logo](_media/icon.svg)
# docsify <small>3.0</small> # docsify <small>3.5</small>
> A magical documentation site generator. > A magical documentation site generator.
@ -31,27 +30,27 @@ Set `coverpage` to **true**, and create a `_coverpage.md`:
- No statically built html files - No statically built html files
- Multiple themes - Multiple themes
[GitHub](https://github.com/QingWei-Li/docsify/) [GitHub](https://github.com/QingWei-Li/docsify/)
[Get Started](#docsify) [Get Started](#docsify)
``` ```
!> A document site can have only one cover page. !> A document site can have only one coverpage!
## Custom background ## Custom background
The background color is generated randomly by default. You can customize the background color or image: The background color is generated randomly by default. You can customize the background color or a background image:
```markdown ```markdown
<!-- _coverpage.md --> <!-- _coverpage.md -->
# docsify # docsify <small>3.5</small>
[GitHub](https://github.com/QingWei-Li/docsify/) [GitHub](https://github.com/QingWei-Li/docsify/)
[Get Started](#quick-start) [Get Started](#quick-start)
<!-- background image --> <!-- background image -->
![](_media/bg.png) ![](_media/bg.png)
<!-- background color --> <!-- background color -->
![color](#f0f0f0) ![color](#f0f0f0)
``` ```

40
docs/custom-navbar.md
View file

@ -2,7 +2,9 @@
## HTML ## HTML
If you need custom navigation, you can create a HTML-based navigation bar (but note that documentation links begin with `#/`). If you need custom navigation, you can create a HTML-based navigation bar.
!> Note that documentation links begin with `#/`.
```html ```html
<!-- index.html --> <!-- index.html -->
@ -18,7 +20,7 @@ If you need custom navigation, you can create a HTML-based navigation bar (but n
## Markdown ## Markdown
Alternatively, you can create a custom markdown-based navigation file by setting `loadNavbar` to **true** and creating `_navbar.md`. Details are available in the [load-navbar configuration paragraph](configuration#load-navbar). Alternatively, you can create a custom markdown-based navigation file by setting `loadNavbar` to **true** and creating `_navbar.md`, compare [load-navbar configuration](configuration#load-navbar).
```html ```html
<!-- index.html --> <!-- index.html -->
@ -28,10 +30,9 @@ Alternatively, you can create a custom markdown-based navigation file by setting
loadNavbar: true loadNavbar: true
} }
</script> </script>
<script src="//unpkg.com/docsify"></script> <script src="//unpkg.com/docsify/lib/docsify.min.js"></script>
``` ```
```markdown ```markdown
<!-- _navbar.md --> <!-- _navbar.md -->
@ -51,10 +52,10 @@ You can create sub-lists by indenting items that are under a certain parent.
<!-- _navbar.md --> <!-- _navbar.md -->
- Getting started - Getting started
- [Quick start](/quickstart) - [Quick start](/quickstart)
- [Writing more pages](/more-pages) - [Writing more pages](/more-pages)
- [Custom navbar](/custom-navbar) - [Custom navbar](/custom-navbar)
- [Cover page](/cover) - [Cover page](/cover)
- Configuration - Configuration
- [Configuration](/configuration) - [Configuration](/configuration)
@ -68,4 +69,27 @@ renders as
![Nesting navbar](_images/nested-navbar.png "Nesting navbar") ![Nesting navbar](_images/nested-navbar.png "Nesting navbar")
## Combining custom navbars with the emoji plugin
If you use the [emoji plugin](plugins#emoji):
```html
<!-- index.html -->
<script>
window.$docsify = {
// ...
}
</script>
<script src="//unpkg.com/docsify/lib/docsify.min.js"></script>
<script src="//unpkg.com/docsify/lib/plugins/emoji.min.js"></script>
```
you could, for example, use flag emojis in your custom navbar Markdown file:
```markdown
<!-- _navbar.md -->
- [:us:, :uk:](/)
- [:cn:](/zh-cn/)
```

12
docs/deploy.md
View file

@ -1,16 +1,16 @@
# Deploy # Deploy
As as GitBook, you can deploy files to GitHub Pages or VPS. Similar to [GitBook](https://www.gitbook.com), you can deploy files to GitHub Pages or VPS.
## GitHub Pages ## GitHub Pages
There're three places to populate your docs There're three places to populate your docs for your Github repository:
- `docs/` folder * `docs/` folder
- master branch * master branch
- gh-pages branch * gh-pages branch
You can save your files in `./docs` and setting `master branch /docs folder`. It is recommended that you save your files to the `./docs` subfolder of the `master` branch of your repository. Then select `master branch /docs folder` as your Github Pages source in your repositories' settings page.
![github pages](_images/deploy-github-pages.png) ![github pages](_images/deploy-github-pages.png)

11
docs/helpers.md
View file

@ -4,23 +4,24 @@ docsify extends Markdown syntax to make your documents more readable.
## important content ## important content
Suitable for displaying important information. Important content like:
```markdown ```markdown
!> **Time** is money, my friend! !> **Time** is money, my friend!
``` ```
!> **Time** is money, my friend! is rendered as:
!> **Time** is money, my friend!
## General tips ## General tips
General tips. General tips like:
```markdown ```markdown
?> *TODO* unit test ?> *TODO* unit test
``` ```
?> *TODO* unit test are rendered as:
?> *TODO* unit test

12
docs/language-highlight.md
View file

@ -1,13 +1,11 @@
# language highlight # language highlight
**docsify** uses [Prism](https://github.com/PrismJS/prism) to highlight code blocks in your pages. By default it only supports CSS, JavaScipt and HTML. You can make **Prism** load additional languages:
The code language highlight tool is [Prism](https://github.com/PrismJS/prism). Only supports CSS, JavaScipt and HTML by default. You can load its component to highlight the language you need.
```html ```html
<script src="//unpkg.com/docsify"></script> <script src="//unpkg.com/docsify/lib/docsify.min.js"></script>
<script src="//unpkg.com/prismjs/components/prism-bash.js"></script> <script src="//unpkg.com/prismjs/components/prism-bash.min.js"></script>
<script src="//unpkg.com/prismjs/components/prism-php.js"></script> <script src="//unpkg.com/prismjs/components/prism-php.min.js"></script>
``` ```
?> See fully supported highlight component [files list](https://github.com/PrismJS/prism/tree/gh-pages/components). ?> Check the [component files](https://github.com/PrismJS/prism/tree/gh-pages/components) list for more options.

2
docs/markdown.md
View file

@ -1,6 +1,6 @@
# Markdown configuration # Markdown configuration
The Markdown parser is [marked](https://github.com/chjj/marked). You can customize how docsify renders your Markdown content to HTML. Support customize `renderer`. **docsify** uses [marked](https://github.com/chjj/marked) as its Markdown parser. You can customize how it renders your Markdown content to HTML by customizing `renderer`:
```js ```js
window.$docsify = { window.$docsify = {

7
docs/more-pages.md
View file

@ -16,7 +16,6 @@ For example, the directory structure is as follows:
Matching routes Matching routes
```text ```text
docs/README.md => http://domain.com docs/README.md => http://domain.com
docs/guide.md => http://domain.com/guide docs/guide.md => http://domain.com/guide
@ -38,7 +37,7 @@ First, you need to set `loadSidebar` to **true**. Details are available in the [
loadSidebar: true loadSidebar: true
} }
</script> </script>
<script src="//unpkg.com/docsify"></script> <script src="//unpkg.com/docsify/lib/docsify.min.js"></script>
``` ```
Create the `_sidebar.md`: Create the `_sidebar.md`:
@ -56,7 +55,7 @@ Create the `_sidebar.md`:
## Table of Contents ## Table of Contents
A custom sidebar can also automatically generate a table of contents by setting a `subMaxLevel`. Details are available in the [max-level configuration paragraph](configuration#sub-max-level). A custom sidebar can also automatically generate a table of contents by setting a `subMaxLevel`, compare [sub-max-level configuration](configuration#sub-max-level).
```html ```html
<!-- index.html --> <!-- index.html -->
@ -67,5 +66,5 @@ A custom sidebar can also automatically generate a table of contents by setting
subMaxLevel: 2 subMaxLevel: 2
} }
</script> </script>
<script src="//unpkg.com/docsify"></script> <script src="//unpkg.com/docsify/lib/docsify.min.js"></script>
``` ```

27
docs/plugins.md
View file

@ -17,7 +17,7 @@ By default, the hyperlink on the current page is recognized and the content is s
'/zh-cn/', // => /zh-cn/README.md '/zh-cn/', // => /zh-cn/README.md
], ],
// 完整配置参数 // complete configuration parameters
search: { search: {
maxAge: 86400000, // Expiration time, the default one day maxAge: 86400000, // Expiration time, the default one day
paths: [], // or 'auto' paths: [], // or 'auto'
@ -39,11 +39,10 @@ By default, the hyperlink on the current page is recognized and the content is s
} }
} }
</script> </script>
<script src="//unpkg.com/docsify"></script> <script src="//unpkg.com/docsify/lib/docsify.min.js"></script>
<script src="//unpkg.com/docsify/lib/plugins/search.js"></script> <script src="//unpkg.com/docsify/lib/plugins/search.min.js"></script>
``` ```
## Google Analytics ## Google Analytics
Install the plugin and configure the track id. Install the plugin and configure the track id.
@ -54,25 +53,29 @@ Install the plugin and configure the track id.
ga: 'UA-XXXXX-Y' ga: 'UA-XXXXX-Y'
} }
</script> </script>
<script src="//unpkg.com/docsify"></script> <script src="//unpkg.com/docsify/lib/docsify.min.js"></script>
<script src="//unpkg.com/docsify/lib/plugins/ga.js"></script> <script src="//unpkg.com/docsify/lib/plugins/ga.min.js"></script>
``` ```
Configure by `data-ga`. Configure by `data-ga`.
```html
<script src="//unpkg.com/docsify/lib/docsify.min.js" data-ga="UA-XXXXX-Y"></script>
<script src="//unpkg.com/docsify/lib/plugins/ga.min.js"></script>
```
## front matter
```html ```html
<script src="//unpkg.com/docsify" data-ga="UA-XXXXX-Y"></script> <script src="//unpkg.com/docsify/lib/plugins/front-matter.min.js"></script>
<script src="//unpkg.com/docsify/lib/plugins/ga.js"></script>
``` ```
## emoji ## emoji
The default is to support parsing emoji. For example `:100:` will be parsed to :100:. But it is not precise because there is no matching non-emoji string. If you need to correctly parse the emoji string, you need install this plugin. The default is to support parsing emoji. For example `:100:` will be parsed to :100:. But it is not precise because there is no matching non-emoji string. If you need to correctly parse the emoji string, you need install this plugin.
```html ```html
<script src="//unpkg.com/docsify/lib/plugins/emoji.js"></script> <script src="//unpkg.com/docsify/lib/plugins/emoji.min.js"></script>
``` ```
## External Script ## External Script
@ -80,7 +83,7 @@ The default is to support parsing emoji. For example `:100:` will be parsed to :
If the script on the page is an external one (imports a js file via `src` attribute), you'll need this plugin to make it work. If the script on the page is an external one (imports a js file via `src` attribute), you'll need this plugin to make it work.
```html ```html
<script src="//unpkg.com/docsify/lib/plugins/external-script.js"></script> <script src="//unpkg.com/docsify/lib/plugins/external-script.min.js"></script>
``` ```
## Zoom image ## Zoom image
@ -88,5 +91,5 @@ If the script on the page is an external one (imports a js file via `src` attrib
Medium's Image Zoom. Based on [zoom-image](https://github.com/egoist/zoom-image). Medium's Image Zoom. Based on [zoom-image](https://github.com/egoist/zoom-image).
```html ```html
<script src="//unpkg.com/docsify/lib/plugins/zoom-image.js"></script> <script src="//unpkg.com/docsify/lib/plugins/zoom-image.min.js"></script>
``` ```

8
docs/pwa.md
View file

@ -1,10 +1,12 @@
# Offline Mode # Offline Mode
[Progressive Web Apps](https://developers.google.com/web/progressive-web-apps/)(PWA) are experiences that combine the best of the web and the best of apps. we can enhance our website with service workers to work **offline** or on low-quality networks. [Progressive Web Apps](https://developers.google.com/web/progressive-web-apps/) (PWA) are experiences that combine the best of the web with the best of apps. We can enhance our website with service workers to work **offline** or on low-quality networks.
It is also very easy to use it. It is also very easy to use it.
## Create serviceWorker ## Create serviceWorker
Create a sw.js file in your documents root directory and copy this code.
Create a `sw.js` file in your documents root directory and copy the following code:
*sw.js* *sw.js*
@ -96,7 +98,7 @@ self.addEventListener('fetch', event => {
## Register ## Register
Now, register it in your `index.html`. It only works on some modern browsers, so we need to judge. Now, register it in your `index.html`. It only works on some modern browsers, so we need to judge:
*index.html* *index.html*

20
docs/quickstart.md
View file

@ -8,7 +8,7 @@ npm i docsify-cli -g
## Initialize ## Initialize
If you want to write the documentation in the `./docs` directory, you can use the `init` command. If you want to write the documentation in the `./docs` subdirectory, you can use the `init` command.
```bash ```bash
docsify init ./docs docsify init ./docs
@ -16,20 +16,18 @@ docsify init ./docs
## Writing content ## Writing content
After the init is complete, you can see the file list in the docs directory. After the `init` is complete, you can see the file list in the `./docs` subdirectory.
* `index.html` as the entry file
* `README.md` as the home page
* `.nojekyll` prevents GitHub Pages from ignoring files that begin with an underscore
- `index.html` as the entry file You can easily update the documentation in `./docs/README.md`, of course you can add [more pages](more-pages).
- `README.md` as the home page
- `.nojekyll` prevents GitHub Pages from ignoring files that begin with an underscore
You can easily update the documentation in `docs/README.md`, of course you can add [more pages](more-pages).
## Preview your site ## Preview your site
Run the local server with `docsify serve`. You can preview your site in your browser on `http://localhost:3000`. Run the local server with `docsify serve`. You can preview your site in your browser on `http://localhost:3000`.
```bash ```bash
docsify serve docs docsify serve docs
``` ```
@ -38,7 +36,7 @@ docsify serve docs
## Manual initialization ## Manual initialization
If you don't like npm or have trouble installing the tool, you can manually create `index.html`: If you don't like `npm` or have trouble installing the tool, you can manually create `index.html`:
```html ```html
<!-- index.html --> <!-- index.html -->
@ -52,7 +50,7 @@ If you don't like npm or have trouble installing the tool, you can manually crea
<body> <body>
<div id="app"></div> <div id="app"></div>
</body> </body>
<script src="//unpkg.com/docsify"></script> <script src="//unpkg.com/docsify/lib/docsify.min.js"></script>
</html> </html>
``` ```
@ -85,3 +83,5 @@ You should set the `data-app` attribute if you changed `el`:
} }
</script> </script>
``` ```
Compare [el configuration](/configuration#el).

1
docs/sw.js
View file

@ -9,6 +9,7 @@
const RUNTIME = 'docsify' const RUNTIME = 'docsify'
const HOSTNAME_WHITELIST = [ const HOSTNAME_WHITELIST = [
self.location.hostname, self.location.hostname,
'raw.githubusercontent.com',
'fonts.gstatic.com', 'fonts.gstatic.com',
'fonts.googleapis.com', 'fonts.googleapis.com',
'unpkg.com' 'unpkg.com'

23
docs/themes.md
View file

@ -2,35 +2,40 @@
There are currently three themes available. Copy [Vue](//vuejs.org) and [buble](//buble.surge.sh) website custom theme and [@liril-net](https://github.com/liril-net) contribution to the theme of the black style. There are currently three themes available. Copy [Vue](//vuejs.org) and [buble](//buble.surge.sh) website custom theme and [@liril-net](https://github.com/liril-net) contribution to the theme of the black style.
```html ```html
<link rel="stylesheet" href="//unpkg.com/docsify/themes/vue.css"> <link rel="stylesheet" href="//unpkg.com/docsify/themes/vue.css">
<link rel="stylesheet" href="//unpkg.com/docsify/themes/buble.css"> <link rel="stylesheet" href="//unpkg.com/docsify/themes/buble.css">
<link rel="stylesheet" href="//unpkg.com/docsify/themes/dark.css"> <link rel="stylesheet" href="//unpkg.com/docsify/themes/dark.css">
``` ```
!> This compressed files in `/lib/themes/`. !> Compressed files are available in `/lib/themes/`.
If you have any ideas or would like to develop new theme, welcome submit [PR](https://github.com/QingWei-Li/docsify/pulls). ```html
<!-- compressed -->
<link rel="stylesheet" href="//unpkg.com/docsify/lib/themes/vue.css">
<link rel="stylesheet" href="//unpkg.com/docsify/lib/themes/buble.css">
<link rel="stylesheet" href="//unpkg.com/docsify/lib/themes/dark.css">
```
If you have any ideas or would like to develop a new theme, you are welcome to submit a [pull request](https://github.com/QingWei-Li/docsify/pulls).
#### Click to preview #### Click to preview
<div class="demo-theme-preview"> <div class="demo-theme-preview">
<a data-theme="vue">vue.css</a> <a data-theme="vue">vue.css</a>
<a data-theme="buble">buble.css</a> <a data-theme="buble">buble.css</a>
<a data-theme="dark">dark.css</a> <a data-theme="dark">dark.css</a>
</div> </div>
<style> <style>
.demo-theme-preview a { .demo-theme-preview a {
padding-right: 10px; padding-right: 10px;
} }
.demo-theme-preview a:hover { .demo-theme-preview a:hover {
text-decoration: underline;
cursor: pointer; cursor: pointer;
text-decoration: underline;
} }
</style> </style>

20
docs/vue.md
View file

@ -1,19 +1,21 @@
# Compatible with Vue # Compatible with Vue
You can write Vue components directly in the Markdown file, and it will be parsed. You can write Vue components directly in the Markdown file, and it will be parsed. You can use this feature to write vue demo and documentation together.
You can use this feature to write vue demo and documentation together.
## Basic usage ## Basic usage
Load the Vue in `index.html`. Load the Vue in `./index.html`.
```html ```html
<script src="//unpkg.com/vue"></script> <script src="//unpkg.com/vue"></script>
<script src="//unpkg.com/docsify"></script> <script src="//unpkg.com/docsify"></script>
<!-- or use the compressed files -->
<script src="//unpkg.com/vue/dist/vue.min.js"></script>
<script src="//unpkg.com/docsify/lib/docsify.min.js"></script>
``` ```
Then you can immediately write Vue code at Markdown file. Then you can immediately write Vue code at Markdown file. `new Vue({ el: '#main' })` script is executed by default to create instance.
`new Vue({ el: '#main' })` script is executed by default to create instance.
*README.md* *README.md*
@ -62,6 +64,11 @@ You can manually initialize a Vue instance.
<script src="//unpkg.com/vue"></script> <script src="//unpkg.com/vue"></script>
<script src="//unpkg.com/vuep"></script> <script src="//unpkg.com/vuep"></script>
<script src="//unpkg.com/docsify"></script> <script src="//unpkg.com/docsify"></script>
<!-- or use the compressed files -->
<script src="//unpkg.com/vue/dist/vue.min.js"></script>
<script src="//unpkg.com/vuep/dist/vuep.min.js"></script>
<script src="//unpkg.com/docsify/lib/docsify.min.js"></script>
``` ```
*README.md* *README.md*
@ -85,5 +92,4 @@ You can manually initialize a Vue instance.
</script> </script>
``` ```
?> Example Refer to the vuep [documentation](https://qingwei-li.github.io/vuep/). ?> Example Refer to the [vuep documentation](https://qingwei-li.github.io/vuep/).

3
docs/write-a-plugin.md
View file

@ -1,7 +1,6 @@
# Write a plugin # Write a plugin
A plugin is simply a function that takes `hook` as arguments. A plugin is simply a function that takes `hook` as an argument. The hook supports handling of asynchronous tasks.
The hook supports handling asynchronous tasks.
## Full configuration ## Full configuration

8
docs/zh-cn/_sidebar.md
View file

@ -1,8 +1,8 @@
- 入门 - 入门
- [快速开始](zh-cn/quickstart) - [快速开始](zh-cn/quickstart)
- [多页文档](zh-cn/more-pages) - [多页文档](zh-cn/more-pages)
- [定制导航栏](zh-cn/custom-navbar) - [定制导航栏](zh-cn/custom-navbar)
- [封面](zh-cn/cover) - [封面](zh-cn/cover)
- 定制化 - 定制化
- [配置项](zh-cn/configuration) - [配置项](zh-cn/configuration)