Skip to content

Commit

Permalink
feat(emoji): add emoji plugin
Browse files Browse the repository at this point in the history
  • Loading branch information
QingWei-Li committed Feb 22, 2017
1 parent 2521c58 commit 855c450
Show file tree
Hide file tree
Showing 14 changed files with 322 additions and 165 deletions.
3 changes: 2 additions & 1 deletion build/build.js
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,8 @@ build({

var plugins = [
{ name: 'search', entry: 'search/index.js', moduleName: 'Search' },
{ name: 'ga', entry: 'ga.js', moduleName: 'GA' }
{ name: 'ga', entry: 'ga.js', moduleName: 'GA' },
{ name: 'emoji', entry: 'emoji.js', moduleName: 'Emoji' }
// { name: 'front-matter', entry: 'front-matter/index.js', moduleName: 'FrontMatter' }
]

Expand Down
2 changes: 1 addition & 1 deletion docs/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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:

3 changes: 2 additions & 1 deletion docs/_sidebar.md
Original file line number Diff line number Diff line change
Expand Up @@ -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)

Expand Down
79 changes: 7 additions & 72 deletions docs/plugins.md
Original file line number Diff line number Diff line change
@@ -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.

Expand Down Expand Up @@ -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.

Expand All @@ -60,75 +58,12 @@ Configure by `data-ga`.
<script src="//unpkg.com/docsify/lib/plugins/ga.js"></script>
```

## emoji

## 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,
})
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.

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> &copy;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
})
}
]
}
```
6 changes: 1 addition & 5 deletions docs/quickstart.md
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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 changes: 71 additions & 0 deletions docs/write-a-plugin.md
Original file line number Diff line number Diff line change
@@ -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> &copy;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 change: 1 addition & 0 deletions docs/zh-cn/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ docsify 是一个动态生成文档网站的工具。不同于 GitBook、Hexo
- 智能的全文搜索
- 提供多套主题
- 丰富的 API
- 支持 Emoji
- 兼容 IE10+

## 例子
Expand Down
3 changes: 2 additions & 1 deletion docs/zh-cn/_sidebar.md
Original file line number Diff line number Diff line change
Expand Up @@ -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)

Expand Down
78 changes: 7 additions & 71 deletions docs/zh-cn/plugins.md
Original file line number Diff line number Diff line change
@@ -1,8 +1,6 @@
# 使用插件
# 插件列表

## 内置插件

### 全文搜索 - Search
## 全文搜索 - Search

全文搜索插件会根据当前页面上的超链接获取文档内容,在 `localStorage` 内建立文档索引。默认过期时间为一天,当然我们可以自己指定需要缓存的文件列表或者配置过期时间。

Expand Down Expand Up @@ -37,7 +35,7 @@
<script src="//unpkg.com/docsify/lib/plugins/search.js"></script>
```

### 谷歌统计 - Google Analytics
## 谷歌统计 - Google Analytics

需要配置 track id 才能使用。

Expand All @@ -58,72 +56,10 @@
<script src="//unpkg.com/docsify/lib/plugins/ga.js"></script>
```

## 自定义插件

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` 获取当前实例。
## emoji

#### 例子
默认是提供 emoji 解析的,能将类似 `:100:` 解析成 :100:。但是它不是精准的,因为没有处理非 emoji 的字符串。如果你需要正确解析 emoji 字符串,你可以引入这个插件。

给每个页面的末尾加上 `footer`

```js
window.$docsify = {
plugins: [
function (hook) {
var footer = [
'<hr/>',
'<footer>',
'<span><a href="https://github.com/QingWei-Li">cinwell</a> &copy;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>
```
2 changes: 1 addition & 1 deletion docs/zh-cn/pwa.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
要使用它也非常容易。

## 创建 serviceWorker
这里已经整理好了一份代码,你只需要在网站根目录下创建一个 `sw.js` 文件,并张贴下面的代码
这里已经整理好了一份代码,你只需要在网站根目录下创建一个 `sw.js` 文件,并粘贴下面的代码

*sw.js*

Expand Down
5 changes: 0 additions & 5 deletions docs/zh-cn/quickstart.md
Original file line number Diff line number Diff line change
Expand Up @@ -81,8 +81,3 @@ cd docs && python -m SimpleHTTPServer 3000
}
</script>
```

## Emoji 支持

自动转义 [github 支持的 emoji](https://github.com/scotch-io/All-Github-Emoji-Icons):smile:

Loading

0 comments on commit 855c450

Please sign in to comment.