mirror of https://github.com/IoTcat/docsify.git
qingwei.li
7 years ago
parent
68c70509d1
commit
7c6ab54ba7
34 changed files with 945 additions and 554 deletions
|
After Width: | Height: | Size: 81 KiB |
|
Before Width: | Height: | Size: 38 KiB After Width: | Height: | Size: 69 KiB |
@ -0,0 +1,42 @@ |
||||
# CDN |
||||
|
||||
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"> |
||||
|
||||
<!-- load script --> |
||||
<script src="//unpkg.com/docsify/lib/docsify.js"></script> |
||||
``` |
||||
|
||||
## Specific version |
||||
|
||||
|
||||
```html |
||||
<!-- load css --> |
||||
<link rel="stylesheet" href="//unpkg.com/docsify@2.0.0/themes/vue.css"> |
||||
|
||||
<!-- load script --> |
||||
<script src="//unpkg.com/docsify@2.0.0/lib/docsify.js"></script> |
||||
``` |
||||
|
||||
## Compressed file |
||||
|
||||
|
||||
```html |
||||
<!-- load css --> |
||||
<link rel="stylesheet" href="//unpkg.com/docsify/lib/themes/vue.css"> |
||||
|
||||
<!-- load script --> |
||||
<script src="//unpkg.com/docsify/lib/docsify.min.js"></script> |
||||
``` |
||||
|
||||
## Other CDN |
||||
|
||||
[jsDelivr](http://www.jsdelivr.com/projects/docsify) is available. |
||||
|
||||
@ -0,0 +1,256 @@ |
||||
# Configuration |
||||
|
||||
docsify supports two ways to configure. You can configure the `window.$docsify` or write configuration on the script tag via `data-*` attributes. |
||||
|
||||
```html |
||||
<!-- by $docsify --> |
||||
<script> |
||||
window.$docsify = { |
||||
repo: 'QingWei-Li/docsify', |
||||
maxLevel: 3, |
||||
coverpage: true |
||||
} |
||||
</script> |
||||
|
||||
<!-- or data-* --> |
||||
<script |
||||
src="//unpkg.com/docsify" |
||||
data-repo="QingWei-Li/docsify" |
||||
data-max-level="3" |
||||
data-coverpage> |
||||
</script> |
||||
``` |
||||
|
||||
Both ways are compatible. However, the first way is recommended. It is clear and can be configured in a separate file. |
||||
|
||||
!> In `window.$docsfiy`, the options should be written by camelCase. |
||||
|
||||
## el |
||||
|
||||
- Type: `String` |
||||
- Default: `#app` |
||||
|
||||
The DOM element to be mounted on initialization. It can be a CSS selector string or an actual HTMLElement. |
||||
|
||||
```js |
||||
window.$docsify = { |
||||
el: '#app' |
||||
} |
||||
``` |
||||
|
||||
## repo |
||||
|
||||
- Type: `String` |
||||
- Default: `null` |
||||
|
||||
Configure the repository url or a string of `username/repo` can add the [GitHub Corner](http://tholman.com/github-corners/) widget in the top right corner of the site. |
||||
|
||||
```js |
||||
window.$docsify = { |
||||
repo: 'QingWei-Li/docsify', |
||||
// or |
||||
repo: 'https://github.com/QingWei-Li/docsify/' |
||||
} |
||||
``` |
||||
|
||||
|
||||
## max-level |
||||
|
||||
- Type: `Number` |
||||
- Default: `6` |
||||
|
||||
Maximum Table of content level. |
||||
|
||||
```js |
||||
window.$docsify = { |
||||
maxLevel: 4 |
||||
} |
||||
``` |
||||
|
||||
## load-navbar |
||||
|
||||
- Type: `Boolean|String` |
||||
- Default: `false` |
||||
|
||||
Load navbar from Markdown file. If **true** it will be loaded from `_navbar.md`. |
||||
|
||||
```js |
||||
window.$docsify = { |
||||
// load from _navbar.md |
||||
loadNavbar: true, |
||||
|
||||
// load from nav.md |
||||
loadNavbar: 'nav.md' |
||||
} |
||||
``` |
||||
|
||||
## load-sidebar |
||||
|
||||
- Type: `Boolean|String` |
||||
- Default: `false` |
||||
|
||||
|
||||
Load sidebar from Markdown file. If **true** it will be loaded from `_sidebar.md`. |
||||
|
||||
```js |
||||
window.$docsify = { |
||||
// load from _sidebar.md |
||||
loadSidebar: true, |
||||
|
||||
// load from summary.md |
||||
loadSidebar: 'summary.md' |
||||
} |
||||
``` |
||||
|
||||
## sub-max-level |
||||
|
||||
- Type: `Number` |
||||
- Default: `0` |
||||
|
||||
Add TOC in custom sidebar. |
||||
|
||||
```js |
||||
window.$docsify = { |
||||
subMaxLevel: 3 |
||||
} |
||||
``` |
||||
|
||||
|
||||
## auto2top |
||||
|
||||
- Type: `Boolean` |
||||
- Default: `false` |
||||
|
||||
|
||||
Scrolls to the top of the screen when the route is changed. |
||||
|
||||
```js |
||||
window.$docsify = { |
||||
auto2top: true |
||||
} |
||||
``` |
||||
|
||||
|
||||
## 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 |
||||
window.$docsify = { |
||||
// Change to /home.md |
||||
homepage: 'home.md', |
||||
|
||||
// Or use the readme in your repo |
||||
homepage: 'https://raw.githubusercontent.com/QingWei-Li/docsify/master/README.md' |
||||
} |
||||
``` |
||||
|
||||
## base-path |
||||
|
||||
- Type: `String` |
||||
|
||||
Base path of the website. You can set it to another directory or another domain name. |
||||
|
||||
```js |
||||
window.$docsify = { |
||||
basePath: '/path/', |
||||
|
||||
// Load the files from another site |
||||
basePath: 'https://docsify.js.org/', |
||||
|
||||
// Even can load files from other repo |
||||
basePath: 'https://raw.githubusercontent.com/ryanmcdermott/clean-code-javascript/master/' |
||||
} |
||||
``` |
||||
|
||||
|
||||
## coverpage |
||||
|
||||
- Type: `Boolean|String` |
||||
- Default: `false` |
||||
|
||||
Activate the [cover feature](/cover). If ture, it will load from `_coverpage.md`. |
||||
|
||||
```js |
||||
window.$docsify = { |
||||
coverpage: true, |
||||
|
||||
// Custom file name |
||||
coverpage: 'cover.md' |
||||
} |
||||
``` |
||||
|
||||
## name |
||||
|
||||
- Type: `String` |
||||
|
||||
|
||||
Website name appears in the sidebar. |
||||
|
||||
```js |
||||
window.$docsify = { |
||||
name: 'docsify' |
||||
} |
||||
``` |
||||
|
||||
## name-link |
||||
|
||||
- Type: `String` |
||||
- Default: `window.location.pathname` |
||||
|
||||
The name of the link. |
||||
|
||||
```js |
||||
window.$docsify = { |
||||
nameLink: '/' |
||||
} |
||||
``` |
||||
|
||||
## markdown |
||||
|
||||
- Type: `Function` |
||||
|
||||
See [Markdown configuration](/markdown). |
||||
|
||||
|
||||
```js |
||||
window.$docsify = { |
||||
markdown: function (marked, renderer) { |
||||
// ... |
||||
return marked |
||||
} |
||||
} |
||||
``` |
||||
|
||||
## theme-color |
||||
|
||||
- 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. |
||||
|
||||
```js |
||||
window.$docsify = { |
||||
themeColor: '#3F51B5' |
||||
} |
||||
``` |
||||
|
||||
## alias |
||||
|
||||
- Type: `Object` |
||||
|
||||
|
||||
Set the route alias. You can freely manage routing rules. |
||||
|
||||
```js |
||||
window.$docsify = { |
||||
alias: { |
||||
'/zh-cn/changelog': '/changelog', |
||||
'/changelog': 'https://raw.githubusercontent.com/QingWei-Li/docsify/master/CHANGELOG' |
||||
} |
||||
} |
||||
``` |
||||
@ -0,0 +1,57 @@ |
||||
# Cover |
||||
|
||||
Activate the cover feature by setting `coverpage`. The detail in [Configuration#coverpage](zh-cn/configuration#coverpage). |
||||
|
||||
## Basic usage |
||||
|
||||
Set `coverpage` to **true**, and create a `_coverpage.md`. You can see the effect in current website. |
||||
|
||||
|
||||
*index.html* |
||||
|
||||
```html |
||||
<script> |
||||
window.$docsify = { |
||||
coverpage: true |
||||
} |
||||
</script> |
||||
<script src="//unpkg.com/docsify"></script> |
||||
``` |
||||
|
||||
*_coverpage.md* |
||||
|
||||
```markdown |
||||
 |
||||
|
||||
# docsify |
||||
|
||||
> A magical documentation site generator. |
||||
|
||||
- Simple and lightweight (~12kb gzipped) |
||||
- Multiple themes |
||||
- Not build static html files |
||||
|
||||
|
||||
[GitHub](https://github.com/QingWei-Li/docsify/) |
||||
[Get Started](#quick-start) |
||||
``` |
||||
|
||||
!> A document site can have only one cover page. |
||||
|
||||
## Custom background |
||||
|
||||
The background color is generated randomly by default. You can customize the background color or image. |
||||
|
||||
*_coverpage.md* |
||||
|
||||
```markdown |
||||
# docsify |
||||
|
||||
[GitHub](https://github.com/QingWei-Li/docsify/) |
||||
[Get Started](#quick-start) |
||||
|
||||
<!-- background image --> |
||||
 |
||||
<!-- background color --> |
||||
 |
||||
``` |
||||
@ -0,0 +1,66 @@ |
||||
# Custom navbar |
||||
|
||||
You can create navbar in HTML file. But note that the link begins with `#/`. |
||||
|
||||
*index.html* |
||||
|
||||
```html |
||||
<body> |
||||
<nav> |
||||
<a href="#/">EN</a> |
||||
<a href="#/zh-cn/">中文</a> |
||||
</nav> |
||||
<div id="app"></div> |
||||
</body> |
||||
``` |
||||
|
||||
## Writing by Markdown |
||||
|
||||
You can custom navbar by Markdown file. Set the `loadNavbar` to **true** and create a `_navbar.md`. The detail in [Configuration#load-navbar](configuration#load-navbar). |
||||
|
||||
*index.html* |
||||
|
||||
|
||||
```html |
||||
<script> |
||||
window.$docsify = { |
||||
loadNavbar: true |
||||
} |
||||
</script> |
||||
<script src="//unpkg.com/docsify"></script> |
||||
``` |
||||
|
||||
*_navbar.md* |
||||
|
||||
|
||||
```markdown |
||||
- [En](/) |
||||
- [chinese](/zh-cn/) |
||||
``` |
||||
|
||||
`_navbar.md` is loaded from each level directory. If this directory doesn't have `_navbar.md`, it will fallback to parent directory. For example, the current path is `/guide/quick-start`, the `_navbar.md` will be loaded from `/guide/_navbar.md`. |
||||
|
||||
## Nesting |
||||
|
||||
You can create sub-lists by indenting items that are under a certain parent. |
||||
|
||||
```markdown |
||||
- Getting started |
||||
- [Quick start](/quickstart) |
||||
- [Writing more pages](/more-pages) |
||||
- [Custom navbar](/custom-navbar) |
||||
- [Cover page](/cover) |
||||
|
||||
- Configuration |
||||
- [Configuration](/configuration) |
||||
- [Themes](/themes) |
||||
- [Using plugins](/plugins) |
||||
- [Markdown configuration](/markdown) |
||||
- [Lanuage highlight](/language-highlight) |
||||
``` |
||||
|
||||
Example. |
||||
|
||||
 |
||||
|
||||
|
||||
@ -0,0 +1,33 @@ |
||||
# Deploy |
||||
|
||||
As as GitBook, you can deploy files to GitHub Pages or VPS. |
||||
|
||||
## GitHub Pages |
||||
|
||||
There're three places to populate your docs |
||||
|
||||
- `docs/` folder |
||||
- master branch |
||||
- gh-pages branch |
||||
|
||||
You can save your files in `./docs` and setting `master branch /docs folder`. |
||||
|
||||
 |
||||
|
||||
!> You can also save files in the root directory and select `master branch`. |
||||
|
||||
## VPS |
||||
|
||||
Try following nginx config. |
||||
|
||||
```nginx |
||||
server { |
||||
listen 80; |
||||
server_name your.domain.com; |
||||
|
||||
location / { |
||||
alias /path/to/dir/of/docs; |
||||
index index.html; |
||||
} |
||||
} |
||||
``` |
||||
@ -0,0 +1,26 @@ |
||||
# Doc helper |
||||
|
||||
docsify extends Markdown syntax to make your documents more readable. |
||||
|
||||
## important content |
||||
|
||||
Suitable for displaying important information. |
||||
|
||||
```markdown |
||||
!> **Time** is money, my friend! |
||||
``` |
||||
|
||||
!> **Time** is money, my friend! |
||||
|
||||
|
||||
## General tips |
||||
|
||||
General tips. |
||||
|
||||
|
||||
```markdown |
||||
?> *TODO* unit test |
||||
``` |
||||
|
||||
?> *TODO* unit test |
||||
|
||||
@ -0,0 +1,13 @@ |
||||
# 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. |
||||
|
||||
|
||||
```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> |
||||
``` |
||||
|
||||
?> See fully supported highlight component [files list](https://github.com/PrismJS/prism/tree/gh-pages/components). |
||||
@ -0,0 +1,26 @@ |
||||
# Markdown configuration |
||||
|
||||
The Markdown parser is [marked](https://github.com/chjj/marked). You can customize how docsify renders your Markdown content to HTML. |
||||
|
||||
```js |
||||
window.$docsify = { |
||||
markdown: { |
||||
smartypants: true |
||||
// ... |
||||
} |
||||
} |
||||
``` |
||||
|
||||
?> Configuration Options Reference [marked documentation](https://github.com/chjj/marked#options-1) |
||||
|
||||
Even you can completely customize the parsing rules. |
||||
|
||||
```js |
||||
window.$docsify = { |
||||
markdown: function(marked, renderer) { |
||||
// ... |
||||
|
||||
return marked |
||||
} |
||||
} |
||||
``` |
||||
@ -0,0 +1,66 @@ |
||||
# More pages |
||||
|
||||
If you need more pages multi-level routing site. It is easy to achieve in docsify. A simple example: If you create a `guide.md`, then get the route is `/#/guide`. |
||||
|
||||
For example, the directory structure is as follows: |
||||
|
||||
|
||||
```text |
||||
-| docs/ |
||||
-| README.md |
||||
-| guide.md |
||||
-| zh-cn/ |
||||
-| README.md |
||||
-| guide.md |
||||
``` |
||||
|
||||
Matching routes |
||||
|
||||
|
||||
```text |
||||
docs/README.md => http://domain.com |
||||
docs/guide.md => http://domain.com/guide |
||||
docs/zh-cn/README.md => http://domain.com/zh-cn/ |
||||
docs/zh-cn/guide.md => http://domain.com/zh-cn/guide |
||||
``` |
||||
|
||||
## Custom sidebar |
||||
|
||||
By default, the TOC in sidebar is automatically generated based on Markdown file. You can create a Table of Contents page to list down pages in your site. |
||||
|
||||
First, you need to set `loadSidebar` to **true**. The detail in [Configuration#load-sidebar](configuration#load-sidebar). |
||||
|
||||
```html |
||||
<script> |
||||
window.$docsify = { |
||||
loadSidebar: true |
||||
} |
||||
</script> |
||||
<script src="//unpkg.com/docsify"></script> |
||||
``` |
||||
|
||||
Create the `_sidebar.md` |
||||
|
||||
```markdown |
||||
- [Home](/) |
||||
- [Guide](/guide) |
||||
``` |
||||
|
||||
!> Need create a `.nojekyll` in `./docs` to prevent GitHub Pages from ignoring files that begin with an underscore. |
||||
|
||||
`_sidebar.md` is loaded from each level directory. If this directory doesn't have `_sidebar.md`, it will fallback to parent directory. For example, the current path is `/guide/quick-start`, the `_sidebar.md` will be loaded from `/guide/_sidebar.md`. |
||||
|
||||
## Table of Contents |
||||
|
||||
Custom sidebar can also be automatically generate TOC by setting `subMaxLevel`. The detail in [Configuration#sub-max-level](configuration#sub-max-level). |
||||
|
||||
```html |
||||
<script> |
||||
window.$docsify = { |
||||
loadSidebar: true, |
||||
subMaxLevel: 2 |
||||
} |
||||
</script> |
||||
<script src="//unpkg.com/docsify"></script> |
||||
``` |
||||
|
||||
@ -0,0 +1,119 @@ |
||||
# Using plugins |
||||
|
||||
## List of Plugins |
||||
|
||||
### Full text search |
||||
|
||||
By default, the hyperlink on the current page is recognized and the content is saved in `localStorage`. You can also specify the path to the files. |
||||
|
||||
|
||||
```html |
||||
<script> |
||||
window.$docsify = { |
||||
search: 'auto', // default |
||||
|
||||
search : [ |
||||
'/', // => /README.md |
||||
'/guide', // => /guide.md |
||||
'/get-started', // => /get-started.md |
||||
'/zh-cn/', // => /zh-cn/README.md |
||||
], |
||||
|
||||
// 完整配置参数 |
||||
search: { |
||||
maxAge: 86400000, // Expiration time, the default one day |
||||
paths: [], // or 'auto' |
||||
placeholder: 'Type to search' |
||||
} |
||||
} |
||||
</script> |
||||
<script src="//unpkg.com/docsify"></script> |
||||
<script src="//unpkg.com/docsify/lib/plugins/search.js"></script> |
||||
``` |
||||
|
||||
|
||||
### Google Analytics |
||||
|
||||
Install the plugin and configure the track id. |
||||
|
||||
```html |
||||
<script> |
||||
window.$docsify = { |
||||
ga: 'UA-XXXXX-Y' |
||||
} |
||||
</script> |
||||
<script src="//unpkg.com/docsify"></script> |
||||
<script src="//unpkg.com/docsify/lib/plugins/ga.js"></script> |
||||
``` |
||||
|
||||
Configure by `data-ga`. |
||||
|
||||
|
||||
```html |
||||
<script src="//unpkg.com/docsify" data-ga="UA-XXXXX-Y"></script> |
||||
<script src="//unpkg.com/docsify/lib/plugins/ga.js"></script> |
||||
``` |
||||
|
||||
|
||||
## Write a plugin |
||||
|
||||
A plugin is simply a function that takes `hook` as arguments. |
||||
The hook supports handling asynchronous tasks. |
||||
|
||||
#### Full configuration |
||||
|
||||
```js |
||||
window.$docsify = { |
||||
plugins: [ |
||||
function (hook) { |
||||
hook.init(function() { |
||||
// Called when the script starts running, only trigger once. |
||||
}) |
||||
|
||||
hook.beforeEach(function(content) { |
||||
// Invoked each time before parsing the Markdown file. |
||||
// ... |
||||
return content |
||||
}) |
||||
|
||||
hook.afterEach(function(html, next) { |
||||
// Invoked each time after the Markdown file is parsed. |
||||
// beforeEach and afterEach support asynchronous。 |
||||
// ... |
||||
// call `next(html)` when task is done. |
||||
next(html) |
||||
}) |
||||
|
||||
hook.ready(function() { |
||||
// Called after initialization is complete. Only trigger once. |
||||
}) |
||||
} |
||||
] |
||||
} |
||||
``` |
||||
|
||||
!> You can get internal methods through `window.Docsify.utils`. |
||||
|
||||
#### Example |
||||
|
||||
Add footer component in each pages. |
||||
|
||||
```js |
||||
window.$docsify = { |
||||
plugins: [ |
||||
function (hook) { |
||||
var footer = [ |
||||
'<hr/>', |
||||
'<footer>', |
||||
'<span><a href="https://github.com/QingWei-Li">cinwell</a> ©2017.</span>', |
||||
'<span>Proudly published with <a href="https://github.com/QingWei-Li/docsify" target="_blank">docsify</a>.</span>', |
||||
'</footer>' |
||||
].join('') |
||||
|
||||
hook.afterEach(function (html) { |
||||
return html + footer |
||||
}) |
||||
} |
||||
] |
||||
} |
||||
``` |
||||
@ -1,3 +1,63 @@ |
||||
# Quick start |
||||
|
||||
Remme |
||||
Recommended install `docsify-cli` globally, which can help us to initialize and preview the website locally. |
||||
|
||||
```bash |
||||
npm i docsify-cli -g |
||||
``` |
||||
|
||||
## initialize |
||||
|
||||
If you want to write the documentation in `./docs` directory, you can use the `init` command. |
||||
|
||||
```bash |
||||
docsify init ./docs |
||||
``` |
||||
|
||||
## Writing content |
||||
|
||||
After the init is complete, you can see the file list in the docs directory. |
||||
|
||||
|
||||
- `index.html` as the entry file |
||||
- `README.md` as the home page |
||||
- `.nojekyll` can prevent 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 |
||||
|
||||
Run the local server via `docsify serve`. You can preview your site in browser via http://localhost:3000. |
||||
|
||||
|
||||
```bash |
||||
docsify serve docs |
||||
``` |
||||
|
||||
?> More usages of reference [docsify-cli documentation](https://github.com/QingWei-Li/docsify-cli). |
||||
|
||||
## Manually |
||||
|
||||
If you don't like npm or feel the trouble to install the tool. What we need is an `index.html`. |
||||
|
||||
*index.html* |
||||
|
||||
```html |
||||
<!DOCTYPE html> |
||||
<html> |
||||
<head> |
||||
<meta charset="UTF-8"> |
||||
<link rel="stylesheet" href="//unpkg.com/docsify/themes/vue.css"> |
||||
</head> |
||||
<body> |
||||
<div id="app"></div> |
||||
</body> |
||||
<script src="//unpkg.com/docsify"></script> |
||||
</html> |
||||
``` |
||||
|
||||
If your system has Python, you can easily to run a static server to preview your site. |
||||
|
||||
```bash |
||||
cd docs && python -m SimpleHTTPServer 3000 |
||||
``` |
||||
|
||||
@ -0,0 +1,14 @@ |
||||
# Themes |
||||
|
||||
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"> |
||||
``` |
||||
|
||||
!> This compressed files 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). |
||||
@ -0,0 +1,89 @@ |
||||
# 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. |
||||
|
||||
## Basic usage |
||||
|
||||
Load the Vue in `index.html`. |
||||
|
||||
```html |
||||
<script src="//unpkg.com/vue"></script> |
||||
<script src="//unpkg.com/docsify"></script> |
||||
``` |
||||
|
||||
Then you can immediately write Vue code at Markdown file. |
||||
`new Vue({ el: 'main' })` script is executed by default to create instance. |
||||
|
||||
*README.md* |
||||
|
||||
```markdown |
||||
# Vue guide |
||||
|
||||
`v-for` usage. |
||||
|
||||
```html |
||||
<ul> |
||||
<li v-for="i in 10">{{ i }}</li> |
||||
</ul> |
||||
`` |
||||
|
||||
<ul> |
||||
<li v-for="i in 10">{{ i }}</li> |
||||
</ul> |
||||
``` |
||||
|
||||
You can manually initialize a Vue instance. |
||||
|
||||
*README.md* |
||||
|
||||
```markdown |
||||
# Vue demo |
||||
|
||||
<div>hello {{ msg }}</div> |
||||
|
||||
<script> |
||||
new Vue({ |
||||
el: 'main', |
||||
data: { msg: 'Vue' } |
||||
}) |
||||
</script> |
||||
``` |
||||
|
||||
!> In a Markdown file, only the script within the first script tag is executed. |
||||
|
||||
## Combine Vuep to write playground |
||||
|
||||
[Vuep](https://github.com/QingWei-Li/vuep) is a component for rendering Vue components with live editor and preview. Supports Vue component spec and JSX. |
||||
|
||||
*index.html* |
||||
|
||||
```html |
||||
<script src="//unpkg.com/vue"></script> |
||||
<script src="//unpkg.com/vuep"></script> |
||||
<script src="//unpkg.com/docsify"></script> |
||||
``` |
||||
|
||||
*README.md* |
||||
```markdown |
||||
# Vuep |
||||
|
||||
<vuep template="#example"></vuep> |
||||
|
||||
<script type="text/x-template" id="example"> |
||||
<template> |
||||
<div>Hello, {{ name }}!</div> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
data: function () { |
||||
return { name: 'Vue' } |
||||
} |
||||
} |
||||
</script> |
||||
</script> |
||||
``` |
||||
|
||||
?> Example Refer to the vuep [documentation](https://qingwei-li.github.io/vuep/). |
||||
|
||||
Loading…
Reference in new issue