跳到主要内容

gitbook插件简易编写

前言​

有新的需求，但是又没有对应的插件，所以临时简单学了一下，怎么快速上手编写一个gitbook插件。

过程​

创建npm项目​

在node_modules目录下创建该目录

# 必须要 gitbook-plugin 开头
mkdir gitbook-plugin-d4test
cd gitbook-plugin-d4test
npm init -y

运行后，会在当前目录生成package.json文件

修改package.json​

修改内容如下：

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

创建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");
    });

});

至此插件就完成了。

引入插件​

在book.js中引入插件，并配置即可

    {
        "title" : "d4m1ts 知识库",
        "author" : "d4m1ts",
        "description" : "个人的部分知识技能，倾向于使用知识库的方式进行总结回顾自己",
        "theme-default": {
            "showLevel": true
        },
        "plugins": [
            "d4test"
        ],

        "pluginsConfig": {
            "d4test": {
                "token": "ca-pub-9261110029983076"
            }
        }
    }

引入后gitbook serve 即可

测试效果​

每个网站的head标签中都加入了对应的JS脚本。

effect

最后由 d4m1ts 于 更新