自定义插件

docsify 提供了一套插件机制，其中提供的钩子（hook）支持处理异步逻辑，可以很方便的扩展功能。

完整功能

  1. window.$docsify = {
  2.  plugins: [
  3.   function (hook, vm) {
  4.     hook.init(function() {
  5.       // 初始化时调用，只调用一次，没有参数。
  6.     })
  8.     hook.beforeEach(function(content) {
  9.       // 每次开始解析 Markdown 内容时调用
  10.       // ...
  11.       return content
  12.     })
  14.     hook.afterEach(function(html, next) {
  15.       // 解析成 html 后调用。beforeEach 和 afterEach 支持处理异步逻辑
  16.       // ...
  17.       // 异步处理完成后调用 next(html) 返回结果
  18.       next(html)
  19.     })
  21.     hook.doneEach(function() {
  22.       // 每次路由切换时数据全部加载完成后调用，没有参数。
  23.       // ...
  24.     })
  26.     hook.mounted(function() {
  27.       // 初始化完成后调用 ，只调用一次，没有参数。
  28.     })
  30.     hook.ready(function() {
  31.       // 初始化并第一次加完成数据后调用，没有参数。
  32.     })
  33.   }
  34.  ]
  35. }

!> 如果需要用 docsify 的内部方法，可以通过 window.Docsify 获取，通过 vm 获取当前实例。

例子

footer

给每个页面的末尾加上 footer

  1. window.$docsify = {
  2.   plugins: [
  3.     function (hook) {
  4.       var footer = [
  5.         '<hr/>',
  6.         '<footer>',
  7.         '<span><a href="https://github.com/QingWei-Li">cinwell</a> &copy;2017.</span>',
  8.         '<span>Proudly published with <a href="https://github.com/QingWei-Li/docsify" target="_blank">docsify</a>.</span>',
  9.         '</footer>'
  10.       ].join('')
  12.       hook.afterEach(function (html) {
  13.         return html + footer
  14.       })
  15.     }
  16.   ]
  17. }

Edit Button

  1. window.$docsify = {
  2.   plugins: [
  3.     function(hook, vm) {
  4.       hook.beforeEach(function (html) {
  5.         var url = 'https://github.com/QingWei-Li/docsify/blob/master/docs' + vm.route.file
  6.         var editHtml = '[📝 EDIT DOCUMENT](' + url + ')\n'
  8.         return editHtml
  9.           + html
  10.           + '\n----\n'
  11.           + 'Last modified {docsify-updated} '
  12.           + editHtml
  13.       })
  14.     }
  15.   ]
  16. }