feat(emoji): add emoji plugin

build/build.js

@@ -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' }
 ]
 

docs/README.md

@@ -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:
-

docs/_sidebar.md

@@ -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)
 

docs/plugins.md

@@ -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
-
-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
-      })
-    }
-  ]
-}
-```

docs/quickstart.md

@@ -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:

docs/write-a-plugin.md

@@ -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
+      })
+    }
+  ]
+}
+```

docs/zh-cn/README.md

@@ -16,6 +16,7 @@ docsify 是一个动态生成文档网站的工具。不同于 GitBook、Hexo 
 - 智能的全文搜索
 - 提供多套主题
 - 丰富的 API
+- 支持 Emoji
 - 兼容 IE10+
 
 ## 例子

docs/zh-cn/_sidebar.md

@@ -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)
 

docs/zh-cn/plugins.md

@@ -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>
 ```
 
-## 自定义插件
-
-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>
 ```

docs/zh-cn/pwa.md

@@ -4,7 +4,7 @@
 要使用它也非常容易。
 
 ## 创建 serviceWorker
-这里已经整理好了一份代码，你只需要在网站根目录下创建一个 `sw.js` 文件，并张贴下面的代码。
+这里已经整理好了一份代码，你只需要在网站根目录下创建一个 `sw.js` 文件，并粘贴下面的代码。
 
 *sw.js*
 

docs/zh-cn/quickstart.md

@@ -81,8 +81,3 @@ cd docs && python -m SimpleHTTPServer 3000
     }
   </script>
 ```
-
-## Emoji 支持
-
-自动转义 [github 支持的 emoji](https://github.com/scotch-io/All-Github-Emoji-Icons):smile:
-