feat(emoji): add emoji plugin
This commit is contained in:
qingwei.li
cinwell.li
parent
2521c58c73
commit
855c450a97
14 changed files with 322 additions and 165 deletions
|
|
@ -15,6 +15,7 @@ See the [Quick start](/quickstart) for more details.
|
|||
- Smart full-text search plugin
|
||||
- Multiple themes
|
||||
- Useful plugin API
|
||||
- Emoji support
|
||||
- Compatible with IE10+
|
||||
|
||||
## Examples
|
||||
|
|
@ -24,4 +25,3 @@ Check out the [Showcase](https://github.com/QingWei-Li/docsify/#showcase) to doc
|
|||
## Donate
|
||||
|
||||
Please consider donating if you think docsify is helpful to you or that my work is valuable. I am happy if you can help me [buy a cup of coffee](https://github.com/QingWei-Li/donate). :heart:
|
||||
|
||||
|
|
|
|||
|
|
@ -7,7 +7,8 @@
|
|||
- Customization
|
||||
- [Configuration](/configuration)
|
||||
- [Themes](/themes)
|
||||
- [Using plugins](/plugins)
|
||||
- [List of Plugins](/plugins)
|
||||
- [Write a Plugin](/write-a-plugin)
|
||||
- [Markdown configuration](/markdown)
|
||||
- [Lanuage highlighting](/language-highlight)
|
||||
|
||||
|
|
|
|||
|
|
@ -1,8 +1,6 @@
|
|||
# Using plugins
|
||||
# List of Plugins
|
||||
|
||||
## List of Plugins
|
||||
|
||||
### Full text search
|
||||
## 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.
|
||||
|
||||
|
|
@ -38,7 +36,7 @@ By default, the hyperlink on the current page is recognized and the content is s
|
|||
```
|
||||
|
||||
|
||||
### Google Analytics
|
||||
## Google Analytics
|
||||
|
||||
Install the plugin and configure the track id.
|
||||
|
||||
|
|
@ -60,75 +58,12 @@ Configure by `data-ga`.
|
|||
<script src="//unpkg.com/docsify/lib/plugins/ga.js"></script>
|
||||
```
|
||||
|
||||
## emoji
|
||||
|
||||
## Write a 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.
|
||||
|
||||
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, vm) {
|
||||
hook.init(function() {
|
||||
// Called when the script starts running, only trigger once, no arguments,
|
||||
})
|
||||
|
||||
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.doneEach(function() {
|
||||
// Invoked each time after the data is fully loaded, no arguments,
|
||||
// ...
|
||||
})
|
||||
|
||||
hook.mounted(function() {
|
||||
// Called after initial completion. Only trigger once, no arguments.
|
||||
})
|
||||
|
||||
hook.ready(function() {
|
||||
// Called after initial completion, no arguments.
|
||||
})
|
||||
}
|
||||
]
|
||||
}
|
||||
```html
|
||||
<script src="//unpkg.com/docsify/lib/plugins/emoji.js"></script>
|
||||
```
|
||||
|
||||
!> You can get internal methods through `window.Docsify`. Get the current instance through the second argument.
|
||||
|
||||
#### 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
|
||||
})
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
|
|
|||
|
|
@ -76,7 +76,7 @@ You should set the `data-app` attribute if you changed `el`:
|
|||
|
||||
```html
|
||||
<!-- index.html -->
|
||||
|
||||
|
||||
<div data-app id="main">Please wait...</div>
|
||||
|
||||
<script>
|
||||
|
|
@ -85,7 +85,3 @@ You should set the `data-app` attribute if you changed `el`:
|
|||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
## Emoji support
|
||||
|
||||
Support [github emoji](https://github.com/scotch-io/All-Github-Emoji-Icons) :smile:
|
||||
|
|
|
|||
71
docs/write-a-plugin.md
Normal file
71
docs/write-a-plugin.md
Normal file
|
|
@ -0,0 +1,71 @@
|
|||
# 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, vm) {
|
||||
hook.init(function() {
|
||||
// Called when the script starts running, only trigger once, no arguments,
|
||||
})
|
||||
|
||||
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.doneEach(function() {
|
||||
// Invoked each time after the data is fully loaded, no arguments,
|
||||
// ...
|
||||
})
|
||||
|
||||
hook.mounted(function() {
|
||||
// Called after initial completion. Only trigger once, no arguments.
|
||||
})
|
||||
|
||||
hook.ready(function() {
|
||||
// Called after initial completion, no arguments.
|
||||
})
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
!> You can get internal methods through `window.Docsify`. Get the current instance through the second argument.
|
||||
|
||||
## 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
|
||||
})
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
|
@ -16,6 +16,7 @@ docsify 是一个动态生成文档网站的工具。不同于 GitBook、Hexo
|
|||
- 智能的全文搜索
|
||||
- 提供多套主题
|
||||
- 丰富的 API
|
||||
- 支持 Emoji
|
||||
- 兼容 IE10+
|
||||
|
||||
## 例子
|
||||
|
|
|
|||
|
|
@ -7,7 +7,8 @@
|
|||
- 定制化
|
||||
- [配置项](zh-cn/configuration)
|
||||
- [主题](zh-cn/themes)
|
||||
- [使用插件](zh-cn/plugins)
|
||||
- [插件列表](zh-cn/plugins)
|
||||
- [开发插件](zh-cn/write-a-plugin)
|
||||
- [Markdown 配置](zh-cn/markdown)
|
||||
- [代码高亮](zh-cn/language-highlight)
|
||||
|
||||
|
|
|
|||
|
|
@ -1,8 +1,6 @@
|
|||
# 使用插件
|
||||
# 插件列表
|
||||
|
||||
## 内置插件
|
||||
|
||||
### 全文搜索 - Search
|
||||
## 全文搜索 - Search
|
||||
|
||||
全文搜索插件会根据当前页面上的超链接获取文档内容，在 `localStorage` 内建立文档索引。默认过期时间为一天，当然我们可以自己指定需要缓存的文件列表或者配置过期时间。
|
||||
|
||||
|
|
@ -37,7 +35,7 @@
|
|||
<script src="//unpkg.com/docsify/lib/plugins/search.js"></script>
|
||||
```
|
||||
|
||||
### 谷歌统计 - Google Analytics
|
||||
## 谷歌统计 - Google Analytics
|
||||
|
||||
需要配置 track id 才能使用。
|
||||
|
||||
|
|
@ -58,72 +56,10 @@
|
|||
<script src="//unpkg.com/docsify/lib/plugins/ga.js"></script>
|
||||
```
|
||||
|
||||
## 自定义插件
|
||||
## emoji
|
||||
|
||||
docsify 提供了一套插件机制，其中提供的钩子（hook）支持处理异步逻辑，可以很方便的扩展功能。
|
||||
默认是提供 emoji 解析的，能将类似 `:100:` 解析成 :100:。但是它不是精准的，因为没有处理非 emoji 的字符串。如果你需要正确解析 emoji 字符串，你可以引入这个插件。
|
||||
|
||||
#### 完整功能
|
||||
|
||||
```js
|
||||
window.$docsify = {
|
||||
plugins: [
|
||||
function (hook, vm) {
|
||||
hook.init(function() {
|
||||
// 初始化时调用，只调用一次，没有参数。
|
||||
})
|
||||
|
||||
hook.beforeEach(function(content) {
|
||||
// 每次开始解析 Markdown 内容时调用
|
||||
// ...
|
||||
return content
|
||||
})
|
||||
|
||||
hook.afterEach(function(html, next) {
|
||||
// 解析成 html 后调用。beforeEach 和 afterEach 支持处理异步逻辑
|
||||
// ...
|
||||
// 异步处理完成后调用 next(html) 返回结果
|
||||
next(html)
|
||||
})
|
||||
|
||||
hook.doneEach(function() {
|
||||
// 每次路由切换时数据全部加载完成后调用，没有参数。
|
||||
// ...
|
||||
})
|
||||
|
||||
hook.mounted(function() {
|
||||
// 初始化完成后调用 ，只调用一次，没有参数。
|
||||
})
|
||||
|
||||
hook.ready(function() {
|
||||
// 初始化并第一次加完成数据后调用，没有参数。
|
||||
})
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
!> 如果需要用 docsify 的内部方法，可以通过 `window.Docsify` 获取，通过 `vm` 获取当前实例。
|
||||
|
||||
#### 例子
|
||||
|
||||
给每个页面的末尾加上 `footer`
|
||||
|
||||
```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
|
||||
})
|
||||
}
|
||||
]
|
||||
}
|
||||
```html
|
||||
<script src="//unpkg.com/docsify/lib/plugins/emoji.js"></script>
|
||||
```
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
要使用它也非常容易。
|
||||
|
||||
## 创建 serviceWorker
|
||||
这里已经整理好了一份代码，你只需要在网站根目录下创建一个 `sw.js` 文件，并张贴下面的代码。
|
||||
这里已经整理好了一份代码，你只需要在网站根目录下创建一个 `sw.js` 文件，并粘贴下面的代码。
|
||||
|
||||
*sw.js*
|
||||
|
||||
|
|
|
|||
|
|
@ -81,8 +81,3 @@ cd docs && python -m SimpleHTTPServer 3000
|
|||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
## Emoji 支持
|
||||
|
||||
自动转义 [github 支持的 emoji](https://github.com/scotch-io/All-Github-Emoji-Icons):smile:
|
||||
|
||||
|
|
|
|||
69
docs/zh-cn/write-a-plugin.md
Normal file
69
docs/zh-cn/write-a-plugin.md
Normal file
|
|
@ -0,0 +1,69 @@
|
|||
# 自定义插件
|
||||
|
||||
docsify 提供了一套插件机制，其中提供的钩子（hook）支持处理异步逻辑，可以很方便的扩展功能。
|
||||
|
||||
## 完整功能
|
||||
|
||||
```js
|
||||
window.$docsify = {
|
||||
plugins: [
|
||||
function (hook, vm) {
|
||||
hook.init(function() {
|
||||
// 初始化时调用，只调用一次，没有参数。
|
||||
})
|
||||
|
||||
hook.beforeEach(function(content) {
|
||||
// 每次开始解析 Markdown 内容时调用
|
||||
// ...
|
||||
return content
|
||||
})
|
||||
|
||||
hook.afterEach(function(html, next) {
|
||||
// 解析成 html 后调用。beforeEach 和 afterEach 支持处理异步逻辑
|
||||
// ...
|
||||
// 异步处理完成后调用 next(html) 返回结果
|
||||
next(html)
|
||||
})
|
||||
|
||||
hook.doneEach(function() {
|
||||
// 每次路由切换时数据全部加载完成后调用，没有参数。
|
||||
// ...
|
||||
})
|
||||
|
||||
hook.mounted(function() {
|
||||
// 初始化完成后调用 ，只调用一次，没有参数。
|
||||
})
|
||||
|
||||
hook.ready(function() {
|
||||
// 初始化并第一次加完成数据后调用，没有参数。
|
||||
})
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
!> 如果需要用 docsify 的内部方法，可以通过 `window.Docsify` 获取，通过 `vm` 获取当前实例。
|
||||
|
||||
## 例子
|
||||
|
||||
给每个页面的末尾加上 `footer`
|
||||
|
||||
```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
|
||||
})
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
Loading…
Add table
Add a link
Reference in a new issue