前言
本篇文章介绍如何开发简单的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('<h1 class="my-header">11111</h1>')
});
});
第三步 发布npm包
// 登录npm
npm login
// 发布
npm publish
第四步 在gitbbok项目中引用插件
{
"plugins":[
"test-header"
]
}
注意：这里插件名忽略前面'gitbook-plugin-'，在安装的时候会自动补充上。
然后运行安装命令即可：
gitbook install
以上就是开发一个基本gitbook插件的步骤。
