自定义docsify插件:LiveRe评论+推特emoji+文章版权

Docsify插件

docsify就不多介绍了，demo请看这里 Pwn-notebook

超级轻量化的静态页面生成器，纯markdown

docsify的原理是通过js在线把md文件渲染成html，因此他的插件也是通过js实现的，官方预留出了插件接口，自定义插件十分方便。下面介绍如何给docsify文档添加来必力(LiveRe)评论平台、版权信息以及推特风格的twemoji

LiveRe

介绍

为啥选择来必力呢？因为他提供多种国内常见的登录方式：QQ、微信、github、百度、微博等等等等。方便用户管理，而且来必力有新评论邮件提醒服务，最短检测间隔十分钟一次。

注册livere

首先要注册一个来必力的帐号，官网：https://livere.com/

在代码管理中找到js代码，把data-uid复制下来备用

安装

修改docs/index.html，在window.$docsify配置中添加如下插件：

html

<script>
  window.$docsify = {
      plugins: [
        function (hook, vm) {
          // load livere
          hook.beforeEach(function(content) {
              var comment = "<div id='lv-container' data-id='city' data-uid='please_change_it'></div>\n\n----\n"
              return content + comment;
          });

          hook.doneEach(function() {
             (function(d, s) {
                 var j, e = d.getElementsByTagName(s)[0];
                 if (typeof LivereTower === 'function') { return; }
                 j = d.createElement(s);
                 j.src = 'https://cdn-city.livere.com/js/embed.dist.js';
                 j.async = true;
                 e.parentNode.insertBefore(j, e);
             })(document, 'script');
          });
        },
      ]
  }
</script>

修改第7行的 please_change_it 为你自己的 data-uid 后即可使用Livere评论插件

Copyright

介绍

添加文章版权信息

安装

修改docs/index.html，向window.$docsify配置的plugins中添加如下代码：

javascript

// add copyright
hook.beforeEach(function(content) {
    var copyRight = '文章作者: [TaQini](mailto:742954809@qq.com) \n\n'+'文章链接: '+url+'\n\n'
    +'版权声明: 本博客所有文章除特别声明外，均采用'+
        '[CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/)许可协议。\n\n'
    +'转载请注明来自[TaQini](http://taqini.space)！\n'
    return content + copyRight;
});

和LiveRe插件的添加方法相同，修改一下个人信息即可使用

twemoji

介绍

官方提供的emoji插件是根据通过:xxx:标签来识别emoji，麻烦不说，还不支持的全部的emoji，比如各国的国旗就显示不全。

twemoji是对emoji的unicode编码进行渲染，因此全的很，用起来也很方便。在emoji百科全书中找到emoji后直接复制即可。

推特版的emoji算是最可爱的了叭~

安装

修改docs/index.html，向window.$docsify配置的plugins中添加如下代码：

javascript

// parse twemoji
hook.doneEach(function() {
    twemoji.parse(document);
});

然后添加官方的js

html

<!-- twemoji -->
<script src="cdn.jsdelivr.net/gh/TaQini/docsify-twemoji@master/twemoji.min.js"></script>

插件接口

以下是官方提供的全部插件接口，主要的功能是在md文件渲染前或渲染后执行某些操作。

javascript

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.
      });
    }
  ]
};