自定义开发gitbbok插件教程

前言

本篇文章介绍如何开发简单的gitbook插件，对gitbook进行定制化开发。

正文

第一步 创建npm项目
在本地新建个文件夹，例如：gitbook-plugin-myplugin，然后进入文件夹，运行命令：

npm init -y

然后在文件夹下新建如下文件和文件夹：

小Q截图-20200827170217.png

修改package.json：

{
  "name": "gitbook-plugin-myplugin",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "engines": {
    "gitbook": ">1.x.x"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

// 注意：npm报名必须以'gitbook-plugin-'开头

第二步 添加相关插件逻辑

module.exports = {
  // 给gitbook注入自定义的css和js文件
  website: {
    assets: './assets',
    js: [
      'header.js'
    ],
    css: [
      'style.css'
    ]
  },
  // Map of hooks 一些钩子函数
  hooks: {},

    // Map of new blocks
  blocks: {},

  // Map of new filters
  filters: {}
};

这里主要介绍如何注入自己的js和css。如上所示，在website属性中配置相关资源路径、js和css文件名。
然后就可以根据自己需要完成相关逻辑，例如：
header.js

// 获取某个dom节点
document.querySelector('.header-inner').innerHTML = '123'

// 或，通过gitbook内置的事件机制执行相关逻辑
var gitbook = window.gitbook;
// start事件
gitbook.events.bind('start', function(e, config) {
  document.querySelector('.header-inner').innerHTML = '456'
});
// page.change事件
gitbook.events.on('page.change', function(e, config) {
  document.querySelector('.header-inner').innerHTML = '456'
});

// 或，如果习惯jquery操作，可以引入jquery
require(['gitbook', 'jquery'], function(gitbook, $) {
  gitbook.events.on('page.change', function(e, config) {
    $('.header-inner').html('
11111
')
  });
});

第三步 发布npm包

// 登录npm
npm login

// 发布
npm publish

第四步 在gitbbok项目中引用插件

{
  "plugins":[
    "test-header"
  ]
}

注意：这里插件名忽略前面'gitbook-plugin-'，在安装的时候会自动补充上。
然后运行安装命令即可：

gitbook install

以上就是开发一个基本gitbook插件的步骤。