-
1.1. 前言
-
1.2. 过程
-
1.2.1. 创建 npm 项目
-
1.2.2. 修改 package.json
-
1.2.3. 创建 index.js 相关
-
1.2.4. 引入插件
-
1.3. 测试效果
1.1. 前言
有新的需求，但是又没有对应的插件，所以临时简单学了一下，怎么快速上手编写一个 gitbook 插件。
1.2. 过程
1.2.1. 创建 npm 项目
在node_modules目录下创建该目录
# 必须要 gitbook-plugin 开头
mkdir gitbook-plugin-d4test
cd gitbook-plugin-d4test
npm init -y
运行后，会在当前目录生成package.json文件
1.2.2. 修改 package.json
修改内容如下：
{
"name": "gitbook-plugin-d4test",
"version": "1.0.0",
"description": "",
"main": "index.js",
"engines": {
"gitbook": ">1.x.x"
},
"keywords": [],
"author": "",
"license": "ISC"
}
1.2.3. 创建 index.js 相关
创建index.js，并写入内容
module.exports = {
// 给gitbook注入自定义的css和js文件
website: {
assets: './assets',
js: [
'plugins.js'
],
css: [
''
]
},
// Map of hooks 一些钩子函数
hooks: {},
// Map of new blocks
blocks: {},
// Map of new filters
filters: {}
};
根据上述的内容，创建assets目录，目录中创建plugins.js，目录结构如下
.
├── assets
│ └── plugins.js
├── index.js
└── package.json
编写plugins.js内容如下，目的是为了在<head>标签中添加一个 Google 广告的 JS，其中的广告 Token 通过配置文件传入。
★
这里的
plugins.js就是核心内容，指定了如何操作”
require(["gitbook"], function(gitbook) {
// start事件
gitbook.events.bind("start", function(e, pluginConfig) {
// 拿到配置文件
var config = pluginConfig.d4test || {};
console.log(pluginConfig);
// token不为空
if (!config.token) {
throw "Need to option 'token' for Google ads plugin";
}
// 获取<head>标签
const head = document.getElementsByTagName('head')[0];
// 创建<script>元素
let script = document.createElement('script');
script.async = true;
script.src = "https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=" + config.token;
script.crossOrigin = "anonymous";
// 将<script>元素添加到<head>标签中
head.appendChild(script);
});
// page.change事件
gitbook.events.bind("page.change", function() {
console.log("test");
});
});
至此插件就完成了。
1.2.4. 引入插件
在book.js中引入插件，并配置即可
{
"title" : "d4m1ts 知识库",
"author" : "d4m1ts",
"description" : "个人的部分知识技能，倾向于使用知识库的方式进行总结回顾自己",
"theme-default": {
"showLevel": true
},
"plugins": [
"d4test"
],
"pluginsConfig": {
"d4test": {
"token": "ca-pub-9261110029983076"
}
}
}
引入后gitbook serve 即可
1.3. 测试效果
每个网站的 head 标签中都加入了对应的 JS 脚本。
原文始发于微信公众号（初始安全）：gitbook插件简易编写
- 左青龙
- 微信扫一扫
-
- 右白虎
- 微信扫一扫
-
评论