feat: add navigation plugin, closed #180

This commit is contained in:
qingwei.li 2017-12-14 23:09:08 +08:00
parent 2ab0d7222c
commit f78be4c900
3 changed files with 148 additions and 5 deletions

View File

@ -105,4 +105,70 @@ Exclude the special image
## Edit on github
Add `Edit on github` button on every pages. provided by 3rd party, check [document](https://github.com/njleonzhang/docsify-edit-on-github)
Add `Edit on github` button on every pages. Provided by [@njleonzhang](https://github.com/njleonzhang), check [document](https://github.com/njleonzhang/docsify-edit-on-github)
## Copy to Clipboard
Add a simple `Click to copy` button to all preformatted code blocks to effortlessly allow users to copy example code from your docs. Provided by [@jperasmus](https://github.com/jperasmus)
```html
<link rel="stylesheet" href="//unpkg.com/docsify-copy-code/styles.css">
<script src="//unpkg.com/docsify-copy-code/index.js"></script>
```
```javascript
window.$docsify = {
plugins: [
window.DocsifyCopyCodePlugin.init()
]
}
```
See [here](https://github.com/jperasmus/docsify-copy-code/blob/master/README.md) for more details.
## Disqus
Disqus comments. https://disqus.com/
```html
<script>
window.$docsify = {
disqus: 'shortname'
}
</script>
<script src="//unpkg.com/docsify/lib/plugins/disqus.min.js"></script>
```
## Gitalk
[Gitalk](https://github.com/gitalk/gitalk) is a modern comment component based on Github Issue and Preact.
```html
<link rel="stylesheet" href="//unpkg.com/gitalk/dist/gitalk.css">
<script src="//unpkg.com/docsify/lib/plugins/gitalk.min.js"></script>
<script src="//unpkg.com/gitalk/dist/gitalk.min.js"></script>
<script>
const gitalk = new Gitalk({
clientID: 'Github Application Client ID',
clientSecret: 'Github Application Client Secret',
repo: 'Github repo',
owner: 'Github repo owner',
admin: ['Github repo collaborators, only these guys can initialize github issues'],
// facebook-like distraction free mode
distractionFreeMode: false
})
</script>
```
## Navigation
Pagination for docsify. By [@imyelo](https://github.com/imyelo)
```html
<script src="//unpkg.com/docsify/lib/docsify.min.js"></script>
<script src="//unpkg.com/docsify-pagination/dist/docsify-pagination.min.js"></script>
```

View File

@ -106,7 +106,7 @@ Exclude the special image
## Edit on github
Add `Edit on github` button on every pages. provided by 3rd party, check [document](https://github.com/njleonzhang/docsify-edit-on-github)
Add `Edit on github` button on every pages. Provided by [@njleonzhang](https://github.com/njleonzhang), check [document](https://github.com/njleonzhang/docsify-edit-on-github)
## Demo code with instant preview and jsfiddle integration
@ -119,7 +119,7 @@ When readers expand the demo box, the source code and description are shown ther
## Copy to Clipboard
Add a simple `Click to copy` button to all preformatted code blocks to effortlessly allow users to copy example code from your docs.
Add a simple `Click to copy` button to all preformatted code blocks to effortlessly allow users to copy example code from your docs. Provided by [@jperasmus](https://github.com/jperasmus)
```html
<link rel="stylesheet" href="//unpkg.com/docsify-copy-code/styles.css">
@ -152,7 +152,7 @@ Disqus comments. https://disqus.com/
## Gitalk
Gitalk is a modern comment component based on Github Issue and Preact. https://github.com/gitalk/gitalk
[Gitalk](https://github.com/gitalk/gitalk) is a modern comment component based on Github Issue and Preact.
```html
<link rel="stylesheet" href="//unpkg.com/gitalk/dist/gitalk.css">
@ -170,4 +170,14 @@ Gitalk is a modern comment component based on Github Issue and Preact. https://g
distractionFreeMode: false
})
</script>
```
```
## Navigation
Pagination for docsify. By [@imyelo](https://github.com/imyelo)
```html
<script src="//unpkg.com/docsify/lib/docsify.min.js"></script>
<script src="//unpkg.com/docsify-pagination/dist/docsify-pagination.min.js"></script>
```

View File

@ -103,3 +103,70 @@ Medium's 风格的图片缩放插件. 基于 [medium-zoom](https://github.com/fr
## 在 Github 上编辑
在每一页上添加 `Edit on github` 按钮. 由第三方库提供, 查看 [document](https://github.com/njleonzhang/docsify-edit-on-github)
## Copy to Clipboard
Add a simple `Click to copy` button to all preformatted code blocks to effortlessly allow users to copy example code from your docs. Provided by [@jperasmus](https://github.com/jperasmus)
```html
<link rel="stylesheet" href="//unpkg.com/docsify-copy-code/styles.css">
<script src="//unpkg.com/docsify-copy-code/index.js"></script>
```
```javascript
window.$docsify = {
plugins: [
window.DocsifyCopyCodePlugin.init()
]
}
```
See [here](https://github.com/jperasmus/docsify-copy-code/blob/master/README.md) for more details.
## Disqus
Disqus comments. https://disqus.com/
```html
<script>
window.$docsify = {
disqus: 'shortname'
}
</script>
<script src="//unpkg.com/docsify/lib/plugins/disqus.min.js"></script>
```
## Gitalk
[Gitalk](https://github.com/gitalk/gitalk) is a modern comment component based on Github Issue and Preact.
```html
<link rel="stylesheet" href="//unpkg.com/gitalk/dist/gitalk.css">
<script src="//unpkg.com/docsify/lib/plugins/gitalk.min.js"></script>
<script src="//unpkg.com/gitalk/dist/gitalk.min.js"></script>
<script>
const gitalk = new Gitalk({
clientID: 'Github Application Client ID',
clientSecret: 'Github Application Client Secret',
repo: 'Github repo',
owner: 'Github repo owner',
admin: ['Github repo collaborators, only these guys can initialize github issues'],
// facebook-like distraction free mode
distractionFreeMode: false
})
</script>
```
## Navigation
Pagination for docsify. By [@imyelo](https://github.com/imyelo)
```html
<script src="//unpkg.com/docsify/lib/docsify.min.js"></script>
<script src="//unpkg.com/docsify-pagination/dist/docsify-pagination.min.js"></script>
```