mirror of
https://github.com/zhigang1992/docsify.git
synced 2026-01-12 22:46:48 +08:00
update english docs
This commit is contained in:
@@ -10,13 +10,13 @@ See the [Quick start](/quickstart) for more details.
|
||||
|
||||
## Features
|
||||
|
||||
- No statically built html files
|
||||
- Simple and lightweight (~16kB gzipped)
|
||||
- Smart full-text search plugin
|
||||
- Multiple themes
|
||||
- Useful plugin API
|
||||
- Emoji support
|
||||
- Compatible with IE10+
|
||||
* No statically built html files
|
||||
* Simple and lightweight (~16kB gzipped)
|
||||
* Smart full-text search plugin
|
||||
* Multiple themes
|
||||
* Useful plugin API
|
||||
* Emoji support
|
||||
* Compatible with IE10+
|
||||
|
||||
## Examples
|
||||
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
- Getting started
|
||||
- [Quick start](/quickstart)
|
||||
- [Writing more pages](/more-pages)
|
||||
- [Custom navbar](/custom-navbar)
|
||||
- [Cover page](/cover)
|
||||
- [Quick start](/quickstart)
|
||||
- [Writing more pages](/more-pages)
|
||||
- [Custom navbar](/custom-navbar)
|
||||
- [Cover page](/cover)
|
||||
|
||||
- Customization
|
||||
- [Configuration](/configuration)
|
||||
@@ -13,10 +13,10 @@
|
||||
- [Language highlighting](/language-highlight)
|
||||
|
||||
- Guide
|
||||
- [Deploy](/deploy)
|
||||
- [Helpers](/helpers)
|
||||
- [Vue compatibility](/vue)
|
||||
- [CDN](/cdn)
|
||||
- [Offline Mode(PWA)](/pwa)
|
||||
- [Deploy](/deploy)
|
||||
- [Helpers](/helpers)
|
||||
- [Vue compatibility](/vue)
|
||||
- [CDN](/cdn)
|
||||
- [Offline Mode(PWA)](/pwa)
|
||||
|
||||
- [Changelog](/changelog)
|
||||
- [Changelog](/changelog)
|
||||
|
||||
15
docs/cdn.md
15
docs/cdn.md
@@ -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/).
|
||||
|
||||
|
||||
## Latest version
|
||||
|
||||
|
||||
```html
|
||||
<!-- load 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>
|
||||
```
|
||||
|
||||
## Specific version
|
||||
Alternatively, use [compressed files](#compressed-files).
|
||||
|
||||
## Specific version
|
||||
|
||||
```html
|
||||
<!-- load css -->
|
||||
@@ -27,7 +26,6 @@ Recommended: [unpkg](//unpkg.com), which will reflect the latest version as soon
|
||||
|
||||
## Compressed file
|
||||
|
||||
|
||||
```html
|
||||
<!-- load 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>
|
||||
```
|
||||
|
||||
```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
|
||||
|
||||
[jsDelivr](http://www.jsdelivr.com/projects/docsify) is available.
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
# 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
|
||||
<!-- by $docsify -->
|
||||
@@ -53,7 +53,6 @@ window.$docsify = {
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
## max-level
|
||||
|
||||
- Type: `Number`
|
||||
@@ -72,7 +71,7 @@ window.$docsify = {
|
||||
- Type: `Boolean|String`
|
||||
- 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
|
||||
window.$docsify = {
|
||||
@@ -89,8 +88,7 @@ window.$docsify = {
|
||||
- Type: `Boolean|String`
|
||||
- Default: `false`
|
||||
|
||||
|
||||
Load sidebar from Markdown file. If **true** it will be loaded from `_sidebar.md`.
|
||||
Loads sidebar from the Markdown file `_sidebar.md` if **true**, or else from the path specified.
|
||||
|
||||
```js
|
||||
window.$docsify = {
|
||||
@@ -107,7 +105,7 @@ window.$docsify = {
|
||||
- Type: `Number`
|
||||
- Default: `0`
|
||||
|
||||
Add TOC in custom sidebar.
|
||||
Add table of contents (TOC) in custom sidebar.
|
||||
|
||||
```js
|
||||
window.$docsify = {
|
||||
@@ -115,13 +113,11 @@ window.$docsify = {
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
## auto2top
|
||||
|
||||
- Type: `Boolean`
|
||||
- Default: `false`
|
||||
|
||||
|
||||
Scrolls to the top of the screen when the route is changed.
|
||||
|
||||
```js
|
||||
@@ -130,13 +126,11 @@ window.$docsify = {
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
## homepage
|
||||
|
||||
- Type: `String`
|
||||
- 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.
|
||||
|
||||
```js
|
||||
@@ -167,7 +161,6 @@ window.$docsify = {
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
## coverpage
|
||||
|
||||
- Type: `Boolean|String`
|
||||
@@ -188,8 +181,7 @@ window.$docsify = {
|
||||
|
||||
- Type: `String`
|
||||
|
||||
|
||||
Website name appears in the sidebar.
|
||||
Website name as it appears in the sidebar.
|
||||
|
||||
```js
|
||||
window.$docsify = {
|
||||
@@ -222,7 +214,6 @@ window.$docsify = {
|
||||
|
||||
See [Markdown configuration](/markdown).
|
||||
|
||||
|
||||
```js
|
||||
window.$docsify = {
|
||||
// object
|
||||
@@ -247,8 +238,7 @@ window.$docsify = {
|
||||
|
||||
- Type: `String`
|
||||
|
||||
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.
|
||||
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.
|
||||
|
||||
```js
|
||||
window.$docsify = {
|
||||
@@ -260,7 +250,6 @@ window.$docsify = {
|
||||
|
||||
- Type: `Object`
|
||||
|
||||
|
||||
Set the route alias. You can freely manage routing rules.
|
||||
|
||||
```js
|
||||
@@ -276,7 +265,7 @@ window.$docsify = {
|
||||
|
||||
- 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
|
||||
window.$docsify = {
|
||||
@@ -303,7 +292,6 @@ window.$docsify = {
|
||||
<script>
|
||||
console.log(2333)
|
||||
</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.
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
# 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
|
||||
|
||||
@@ -14,16 +14,15 @@ Set `coverpage` to **true**, and create a `_coverpage.md`:
|
||||
coverpage: true
|
||||
}
|
||||
</script>
|
||||
<script src="//unpkg.com/docsify"></script>
|
||||
<script src="//unpkg.com/docsify/lib/docsify.min.js"></script>
|
||||
```
|
||||
|
||||
|
||||
```markdown
|
||||
<!-- _coverpage.md -->
|
||||
|
||||

|
||||
|
||||
# docsify <small>3.0</small>
|
||||
# docsify <small>3.5</small>
|
||||
|
||||
> A magical documentation site generator.
|
||||
|
||||
@@ -31,27 +30,27 @@ Set `coverpage` to **true**, and create a `_coverpage.md`:
|
||||
- No statically built html files
|
||||
- Multiple themes
|
||||
|
||||
|
||||
[GitHub](https://github.com/QingWei-Li/docsify/)
|
||||
[Get Started](#docsify)
|
||||
```
|
||||
|
||||
!> A document site can have only one cover page.
|
||||
!> A document site can have only one coverpage!
|
||||
|
||||
## 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
|
||||
<!-- _coverpage.md -->
|
||||
|
||||
# docsify
|
||||
# docsify <small>3.5</small>
|
||||
|
||||
[GitHub](https://github.com/QingWei-Li/docsify/)
|
||||
[Get Started](#quick-start)
|
||||
|
||||
<!-- background image -->
|
||||

|
||||
|
||||
<!-- background color -->
|
||||

|
||||
```
|
||||
|
||||
@@ -2,7 +2,9 @@
|
||||
|
||||
## 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
|
||||
<!-- index.html -->
|
||||
@@ -18,7 +20,7 @@ If you need custom navigation, you can create a HTML-based navigation bar (but n
|
||||
|
||||
## 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
|
||||
<!-- index.html -->
|
||||
@@ -28,10 +30,9 @@ Alternatively, you can create a custom markdown-based navigation file by setting
|
||||
loadNavbar: true
|
||||
}
|
||||
</script>
|
||||
<script src="//unpkg.com/docsify"></script>
|
||||
<script src="//unpkg.com/docsify/lib/docsify.min.js"></script>
|
||||
```
|
||||
|
||||
|
||||
```markdown
|
||||
<!-- _navbar.md -->
|
||||
|
||||
@@ -51,10 +52,10 @@ You can create sub-lists by indenting items that are under a certain parent.
|
||||
<!-- _navbar.md -->
|
||||
|
||||
- Getting started
|
||||
- [Quick start](/quickstart)
|
||||
- [Writing more pages](/more-pages)
|
||||
- [Custom navbar](/custom-navbar)
|
||||
- [Cover page](/cover)
|
||||
- [Quick start](/quickstart)
|
||||
- [Writing more pages](/more-pages)
|
||||
- [Custom navbar](/custom-navbar)
|
||||
- [Cover page](/cover)
|
||||
|
||||
- Configuration
|
||||
- [Configuration](/configuration)
|
||||
@@ -68,4 +69,27 @@ renders as
|
||||
|
||||

|
||||
|
||||
## 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/)
|
||||
```
|
||||
|
||||
@@ -1,16 +1,16 @@
|
||||
# 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
|
||||
|
||||
There're three places to populate your docs
|
||||
There're three places to populate your docs for your Github repository:
|
||||
|
||||
- `docs/` folder
|
||||
- master branch
|
||||
- gh-pages branch
|
||||
* `docs/` folder
|
||||
* master 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.
|
||||
|
||||

|
||||
|
||||
|
||||
@@ -4,23 +4,24 @@ docsify extends Markdown syntax to make your documents more readable.
|
||||
|
||||
## important content
|
||||
|
||||
Suitable for displaying important information.
|
||||
Important content like:
|
||||
|
||||
```markdown
|
||||
!> **Time** is money, my friend!
|
||||
```
|
||||
|
||||
!> **Time** is money, my friend!
|
||||
is rendered as:
|
||||
|
||||
!> **Time** is money, my friend!
|
||||
|
||||
## General tips
|
||||
|
||||
General tips.
|
||||
|
||||
General tips like:
|
||||
|
||||
```markdown
|
||||
?> *TODO* unit test
|
||||
```
|
||||
|
||||
?> *TODO* unit test
|
||||
are rendered as:
|
||||
|
||||
?> *TODO* unit test
|
||||
|
||||
@@ -1,13 +1,11 @@
|
||||
# language highlight
|
||||
|
||||
|
||||
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.
|
||||
|
||||
**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:
|
||||
|
||||
```html
|
||||
<script src="//unpkg.com/docsify"></script>
|
||||
<script src="//unpkg.com/prismjs/components/prism-bash.js"></script>
|
||||
<script src="//unpkg.com/prismjs/components/prism-php.js"></script>
|
||||
<script src="//unpkg.com/docsify/lib/docsify.min.js"></script>
|
||||
<script src="//unpkg.com/prismjs/components/prism-bash.min.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.
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
# 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
|
||||
window.$docsify = {
|
||||
|
||||
@@ -16,7 +16,6 @@ For example, the directory structure is as follows:
|
||||
|
||||
Matching routes
|
||||
|
||||
|
||||
```text
|
||||
docs/README.md => http://domain.com
|
||||
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
|
||||
}
|
||||
</script>
|
||||
<script src="//unpkg.com/docsify"></script>
|
||||
<script src="//unpkg.com/docsify/lib/docsify.min.js"></script>
|
||||
```
|
||||
|
||||
Create the `_sidebar.md`:
|
||||
@@ -56,7 +55,7 @@ Create the `_sidebar.md`:
|
||||
|
||||
## 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
|
||||
<!-- index.html -->
|
||||
@@ -67,5 +66,5 @@ A custom sidebar can also automatically generate a table of contents by setting
|
||||
subMaxLevel: 2
|
||||
}
|
||||
</script>
|
||||
<script src="//unpkg.com/docsify"></script>
|
||||
<script src="//unpkg.com/docsify/lib/docsify.min.js"></script>
|
||||
```
|
||||
|
||||
@@ -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
|
||||
],
|
||||
|
||||
// 完整配置参数
|
||||
// complete configuration parameters
|
||||
search: {
|
||||
maxAge: 86400000, // Expiration time, the default one day
|
||||
paths: [], // or 'auto'
|
||||
@@ -39,11 +39,10 @@ By default, the hyperlink on the current page is recognized and the content is s
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<script src="//unpkg.com/docsify"></script>
|
||||
<script src="//unpkg.com/docsify/lib/plugins/search.js"></script>
|
||||
<script src="//unpkg.com/docsify/lib/docsify.min.js"></script>
|
||||
<script src="//unpkg.com/docsify/lib/plugins/search.min.js"></script>
|
||||
```
|
||||
|
||||
|
||||
## Google Analytics
|
||||
|
||||
Install the plugin and configure the track id.
|
||||
@@ -54,25 +53,29 @@ Install the plugin and configure the track id.
|
||||
ga: 'UA-XXXXX-Y'
|
||||
}
|
||||
</script>
|
||||
<script src="//unpkg.com/docsify"></script>
|
||||
<script src="//unpkg.com/docsify/lib/plugins/ga.js"></script>
|
||||
<script src="//unpkg.com/docsify/lib/docsify.min.js"></script>
|
||||
<script src="//unpkg.com/docsify/lib/plugins/ga.min.js"></script>
|
||||
```
|
||||
|
||||
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
|
||||
<script src="//unpkg.com/docsify" data-ga="UA-XXXXX-Y"></script>
|
||||
<script src="//unpkg.com/docsify/lib/plugins/ga.js"></script>
|
||||
<script src="//unpkg.com/docsify/lib/plugins/front-matter.min.js"></script>
|
||||
```
|
||||
|
||||
## 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.
|
||||
|
||||
|
||||
```html
|
||||
<script src="//unpkg.com/docsify/lib/plugins/emoji.js"></script>
|
||||
<script src="//unpkg.com/docsify/lib/plugins/emoji.min.js"></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.
|
||||
|
||||
```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
|
||||
@@ -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).
|
||||
|
||||
```html
|
||||
<script src="//unpkg.com/docsify/lib/plugins/zoom-image.js"></script>
|
||||
<script src="//unpkg.com/docsify/lib/plugins/zoom-image.min.js"></script>
|
||||
```
|
||||
|
||||
@@ -1,10 +1,12 @@
|
||||
# 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.
|
||||
|
||||
## 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*
|
||||
|
||||
@@ -96,7 +98,7 @@ self.addEventListener('fetch', event => {
|
||||
|
||||
## 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*
|
||||
|
||||
|
||||
@@ -8,7 +8,7 @@ npm i docsify-cli -g
|
||||
|
||||
## 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
|
||||
docsify init ./docs
|
||||
@@ -16,20 +16,18 @@ docsify init ./docs
|
||||
|
||||
## 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
|
||||
- `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).
|
||||
You can easily update the documentation in `./docs/README.md`, of course you can add [more pages](more-pages).
|
||||
|
||||
## Preview your site
|
||||
|
||||
Run the local server with `docsify serve`. You can preview your site in your browser on `http://localhost:3000`.
|
||||
|
||||
|
||||
```bash
|
||||
docsify serve docs
|
||||
```
|
||||
@@ -38,7 +36,7 @@ docsify serve docs
|
||||
|
||||
## 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
|
||||
<!-- index.html -->
|
||||
@@ -52,7 +50,7 @@ If you don't like npm or have trouble installing the tool, you can manually crea
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
</body>
|
||||
<script src="//unpkg.com/docsify"></script>
|
||||
<script src="//unpkg.com/docsify/lib/docsify.min.js"></script>
|
||||
</html>
|
||||
```
|
||||
|
||||
@@ -85,3 +83,5 @@ You should set the `data-app` attribute if you changed `el`:
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
Compare [el configuration](/configuration#el).
|
||||
|
||||
@@ -9,6 +9,7 @@
|
||||
const RUNTIME = 'docsify'
|
||||
const HOSTNAME_WHITELIST = [
|
||||
self.location.hostname,
|
||||
'raw.githubusercontent.com',
|
||||
'fonts.gstatic.com',
|
||||
'fonts.googleapis.com',
|
||||
'unpkg.com'
|
||||
|
||||
@@ -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.
|
||||
|
||||
|
||||
```html
|
||||
<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/dark.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/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
|
||||
|
||||
|
||||
<div class="demo-theme-preview">
|
||||
<a data-theme="vue">vue.css</a>
|
||||
<a data-theme="buble">buble.css</a>
|
||||
<a data-theme="dark">dark.css</a>
|
||||
</div>
|
||||
|
||||
|
||||
<style>
|
||||
.demo-theme-preview a {
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
.demo-theme-preview a:hover {
|
||||
text-decoration: underline;
|
||||
cursor: pointer;
|
||||
text-decoration: underline;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
20
docs/vue.md
20
docs/vue.md
@@ -1,19 +1,21 @@
|
||||
# Compatible with Vue
|
||||
|
||||
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 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.
|
||||
|
||||
## Basic usage
|
||||
|
||||
Load the Vue in `index.html`.
|
||||
Load the Vue in `./index.html`.
|
||||
|
||||
```html
|
||||
<script src="//unpkg.com/vue"></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.
|
||||
`new Vue({ el: '#main' })` script is executed by default to create instance.
|
||||
Then you can immediately write Vue code at Markdown file. `new Vue({ el: '#main' })` script is executed by default to create instance.
|
||||
|
||||
*README.md*
|
||||
|
||||
@@ -62,6 +64,11 @@ You can manually initialize a Vue instance.
|
||||
<script src="//unpkg.com/vue"></script>
|
||||
<script src="//unpkg.com/vuep"></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*
|
||||
@@ -85,5 +92,4 @@ You can manually initialize a Vue instance.
|
||||
</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/).
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
# Write a plugin
|
||||
|
||||
A plugin is simply a function that takes `hook` as arguments.
|
||||
The hook supports handling asynchronous tasks.
|
||||
A plugin is simply a function that takes `hook` as an argument. The hook supports handling of asynchronous tasks.
|
||||
|
||||
## Full configuration
|
||||
|
||||
@@ -68,4 +67,4 @@ window.$docsify = {
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
```
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
- 入门
|
||||
- [快速开始](zh-cn/quickstart)
|
||||
- [多页文档](zh-cn/more-pages)
|
||||
- [定制导航栏](zh-cn/custom-navbar)
|
||||
- [封面](zh-cn/cover)
|
||||
- [快速开始](zh-cn/quickstart)
|
||||
- [多页文档](zh-cn/more-pages)
|
||||
- [定制导航栏](zh-cn/custom-navbar)
|
||||
- [封面](zh-cn/cover)
|
||||
|
||||
- 定制化
|
||||
- [配置项](zh-cn/configuration)
|
||||
@@ -19,4 +19,4 @@
|
||||
- [CDN](zh-cn/cdn)
|
||||
- [离线模式(PWA)](zh-cn/pwa)
|
||||
|
||||
- [Changelog](zh-cn/changelog)
|
||||
- [Changelog](zh-cn/changelog)
|
||||
|
||||
Reference in New Issue
Block a user