gitbook常用插件

在项目文件夹下新建book.json


新建book.json

title:本书标题
author:作者
description:描述
language:语言,中文使用zh-hans
gitbook:指定使用gitbook版本
plugins:配置使用的插件
pluginsConfig:配置插件的属性

{

    "title": "演示用",
    "description": "演示",
    "author": "twilight",
    "language": "zh-hans",
    "gitbook": "3.2.3",

    "plugins": [
      "back-to-top-button",
      "splitter",
      "lightbox",
      "custom-favicon",
      "chapter-fold",
      "page-toc-button",
      "-sharing",
      "-lunr",
      "-search",
      "search-pro"

    ],

    "pluginsConfig": {

        "page-toc-button": {
            "maxTocDepth": 2,
            "minTocSize": 2
        },
        "favicon": "./assets/favicon.ico"
      }
        

}

常用插件1:back-to-top-button 回到顶部

安装
方法一:在book.json中添加以下内容,然后执行gitbook install
方法二:使用NPM安装npm install gitbook-plugin-back-to-top-button,
方法三:从源码GitHub地址中下载,放到node_modules文件夹里github链接
使用

{
    "plugins": [
         "back-to-top-button"
    ]
}
回顶部按钮

可在node_modules\gitbook-plugin-back-to-top-button\assets\plugin.css中修改图标位置,颜色等样式

常用插件2:splitter 侧边栏宽度可调节

安装
方法一:在book.json中添加以下内容,然后执行gitbook install
方法二:使用NPM安装npm install gitbook-plugin-splitter,
方法三:从源码GitHub地址中下载,放到node_modules文件夹里github链接
使用

{
    "plugins": [
         "splitter"
    ]
}

常用插件3:lightbox 单击查看图片

安装
方法一:在book.json中添加以下内容,然后执行gitbook install
方法二:使用NPM安装npm install gitbook-plugin-lightbox,
方法三:从源码GitHub地址中下载,放到node_modules文件夹里github链接
使用

{
    "plugins": [
         "lightbox"
    ]
}

常用插件4:custom-favicon 修改标题栏图标

安装
方法一:在book.json中添加以下内容,然后执行gitbook install
方法二:使用NPM安装npm install gitbook-plugin-custom-favicon,
方法三:从源码GitHub地址中下载,放到node_modules文件夹里github链接
使用

{
    "plugins" : ["custom-favicon"],
    "pluginsConfig" : {
        "favicon": "path/to/favicon.ico"
    }
}

常用插件5: chapter-fold 导航目录折叠

安装
方法一:在book.json中添加以下内容,然后执行gitbook install
方法二:使用NPM安装npm install gitbook-plugin-chapter-fold,
方法三:从源码GitHub地址中下载,放到node_modules文件夹里github链接
使用

{
    "plugins" : ["chapter-fold"]
}

常用插件6: page-toc-button 悬浮目录

安装
方法一:在book.json中添加以下内容,然后执行gitbook install
方法二:使用NPM安装npm install gitbook-plugin-page-toc-button,
方法三:从源码GitHub地址中下载,放到node_modules文件夹里github链接
使用

{
    "plugins" : ["page-toc-button"]
}
悬浮目录

常用插件7: tbfed-pagefooter 页面添加页脚

安装
方法一:在book.json中添加以下内容,然后执行gitbook install
方法二:使用NPM安装npm install gitbook-plugin-tbfed-pagefooter,
方法三:从源码GitHub地址中下载,放到node_modules文件夹里github链接
使用

{
    "plugins": [
       "tbfed-pagefooter"
    ],
    "pluginsConfig": {
        "tbfed-pagefooter": {
            "copyright":"Copyright &copy xxxx.com 2017",
            "modify_label": "该文件修订时间:",
            "modify_format": "YYYY-MM-DD HH:mm:ss"
        }
    }
}

如果想加入一个URL,自己可以去index.js里,把powered by gitbook,改成
powered by <a href="你的URL" target="_blank">你的名字</a>


页脚

常用插件8: insert-logo 插入logo

安装
方法一:在book.json中添加以下内容,然后执行gitbook install
方法二:使用NPM安装npm install gitbook-plugin-insert-logo,
方法三:从源码GitHub地址中下载,放到node_modules文件夹里github链接
使用

{
    "plugins": [ "insert-logo" ]
    "pluginsConfig": {
      "insert-logo": {
        "url": "images/logo.png",
        "style": "background: none; max-height: 30px; min-height: 30px"
      }
    }
}

常用插件9: search-pro 高级搜索(支持中文)

安装
方法一:在book.json中添加以下内容,然后执行gitbook install
方法二:使用NPM安装npm install gitbook-plugin-search-pro,
方法三:从源码GitHub地址中下载,放到node_modules文件夹里github链接
使用

{
    "plugins": [
          "-lunr", 
          "-search", 
          "search-pro"
    ]
}

常用插件10: page-treeview 生成页内目录

安装
方法一:在book.json中添加以下内容,然后执行gitbook install
方法二:使用NPM安装npm install gitbook-plugin-page-treeview,
方法三:从源码GitHub地址中下载,放到node_modules文件夹里github链接
使用

{
    "plugins": [
        "page-treeview"
    ],
    "pluginsConfig": {
        "page-treeview": {
            "copyright": "Copyright &#169; aleen42",
            "minHeaderCount": "2",
            "minHeaderDeep": "2"
        }
    }
}

目录线面一行版权的信息,如果想要删除,需要在插件目录中打开:/node_modules/gitbook-plugin-page-treeview/lib/index.js。
大约43行,在generateContent方法定义中,该方法的返回值

return renderContent ? `<div class="treeview__container">${copyRight + renderContent}</div>` : '';
// 改成:
return renderContent;

常用插件11:gittalk 评论

安装
方法一:在book.json中添加以下内容,然后执行gitbook install
方法二:使用NPM安装npm install gitbook-plugin-gittalk,
方法三:从源码GitHub地址中下载,放到node_modules文件夹里github链接
申请 GitHub Application 授权
登录github账号(没有则需要自己注册),申请授权应用https://github.com/settings/applications/new

申请应用.png

应用登记成功后会生成 token 令牌,clientId 和 clientSecret 需要重点保存下来,待会需要用到.
申请成功之后.png

安装并集成到网站(单页面集成)
在需要添加评论的页面,添加下述内容引入 gitalk 插件,其中参数来自我们上一步获取的 clientId 和 clientSecret .

默认应该添加到 .html 页面,当然也可以添加到 .md 页面,毕竟 markdown 语法也支持 html 标签.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.css">
<script src="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js"></script>
<div id="gitalk-container"></div>
var gitalk = new Gitalk({
  "clientID": "clientId",
  "clientSecret": "clientSecret",
  "repo": "GitHub repo",
  "owner": "GitHub repo owner",
  "admin": ["GitHub repo admin"],
  "id": location.pathname,      
  "distractionFreeMode": false  
});
gitalk.render("gitalk-container");

稍微解释下参数的含义:
● "clientID" : [必选] GitHub Application Client ID
● "clientSecret" : [必选] GitHub Application Client Secret
● "repo" : [必选] GitHub repository(github上需建立仓库)
● "owner" : [必选] GitHub repository 所有者,可以是个人或者组织
● "admin" : [必选] GitHub repository 的所有者和合作者 (对这个 repository有写权限的用户)
● "id" : [可选] 页面的唯一标识,默认值: location.href, 长度必须小于50,否则会报错!
● "distractionFreeMode": [可选] 类似 Facebook 评论框的全屏遮罩效果,默认值: false
测试集成效果
按照上述安装步骤,将代码复制到首页(README.md)文件中,然后推送到 github ,体验下集成效果.
注意: 这里必须推送到服务器,因为申请应用时填写的域名是线上地址,因而本地测试是不会成功的,会报错,这一点和微信支付的回调地址类似.

示例:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.css">
<script src="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js"></script>
<div id="gitalk-container"></div>
<script>
var gitalk = new Gitalk({
  "clientID": "d854ad7ff740d7662cba",
  "clientSecret": "bc1cc6e917ac0d977e020b6b960bbf3c8a43365f",
  "repo": "bigdata",
  "owner": "zhuhm1993",
  "admin": ["zhuhm1993"],
  "id":window.location.pathname,      
  "distractionFreeMode": false  
});
gitalk.render("gitalk-container");
</script>
初始化创建.png

心心相念的 gitalk 评论区呢?是不是哪里配置错了,为啥没有出来?

别急,要淡定,看一下提示说"未找到的 Issue 进行评论,请联系 @snowdreams1006 初始化创建",既然如此,那我们就操作一下吧!

点击下方的按钮 使用 Github登录 ,会跳转到相应的仓库,然后按照提示确定.

再次返回首页,刷新一下看看发生什么神奇的事情了?

第一条评论.png

多页面自动集成

以上那种方式只能手动去给需要评论的页面添加,如果只有几个页面还好,如果有几十上百个页面呢?所以我们这里要偷点懒,让每个页面自动生成评论模块。

这里我打算在tbfed-pagefooter这个插件上动点手脚,期望这个插件在渲染每个页面的时候顺便执行下这个插件的代码。

步骤:
1.新建gitalk-config.js和md5.min.js文件在gitbook根目录下,用此gitalk-config.js文件维护gitalk的配置信息,md5.min.js用来解决因issue的名字超过50而报Error: Validation Failed,md5.min.js加密后issue的名字长度只有32位。


文件

gitalk-config.js内容如下:

var gitalk = new Gitalk({
  "clientID": "100cc43a26a6aefa3006",
  "clientSecret": "3f8bbe3e213470d3d1620dfdd728a8a432cfee90",
  "repo": "weibiaodan",
  "owner": "a3664938",
  "admin": ["a3664938"],
  "id": md5(window.location.pathname),
  "distractionFreeMode": false
});
gitalk.render("gitalk-container");

md5.min.js内容如下:

!function(n){"use strict";function d(n,t){var r=(65535&n)+(65535&t);return(n>>16)+(t>>16)+(r>>16)<<16|65535&r}function f(n,t,r,e,o,u){return d(function(n,t){return n<<t|n>>>32-t}(d(d(t,n),d(e,u)),o),r)}function l(n,t,r,e,o,u,c){return f(t&r|~t&e,n,t,o,u,c)}function g(n,t,r,e,o,u,c){return f(t&e|r&~e,n,t,o,u,c)}function v(n,t,r,e,o,u,c){return f(t^r^e,n,t,o,u,c)}function m(n,t,r,e,o,u,c){return f(r^(t|~e),n,t,o,u,c)}function i(n,t){var r,e,o,u,c;n[t>>5]|=128<<t%32,n[14+(t+64>>>9<<4)]=t;var f=1732584193,i=-271733879,a=-1732584194,h=271733878;for(r=0;r<n.length;r+=16)i=m(i=m(i=m(i=m(i=v(i=v(i=v(i=v(i=g(i=g(i=g(i=g(i=l(i=l(i=l(i=l(o=i,a=l(u=a,h=l(c=h,f=l(e=f,i,a,h,n[r],7,-680876936),i,a,n[r+1],12,-389564586),f,i,n[r+2],17,606105819),h,f,n[r+3],22,-1044525330),a=l(a,h=l(h,f=l(f,i,a,h,n[r+4],7,-176418897),i,a,n[r+5],12,1200080426),f,i,n[r+6],17,-1473231341),h,f,n[r+7],22,-45705983),a=l(a,h=l(h,f=l(f,i,a,h,n[r+8],7,1770035416),i,a,n[r+9],12,-1958414417),f,i,n[r+10],17,-42063),h,f,n[r+11],22,-1990404162),a=l(a,h=l(h,f=l(f,i,a,h,n[r+12],7,1804603682),i,a,n[r+13],12,-40341101),f,i,n[r+14],17,-1502002290),h,f,n[r+15],22,1236535329),a=g(a,h=g(h,f=g(f,i,a,h,n[r+1],5,-165796510),i,a,n[r+6],9,-1069501632),f,i,n[r+11],14,643717713),h,f,n[r],20,-373897302),a=g(a,h=g(h,f=g(f,i,a,h,n[r+5],5,-701558691),i,a,n[r+10],9,38016083),f,i,n[r+15],14,-660478335),h,f,n[r+4],20,-405537848),a=g(a,h=g(h,f=g(f,i,a,h,n[r+9],5,568446438),i,a,n[r+14],9,-1019803690),f,i,n[r+3],14,-187363961),h,f,n[r+8],20,1163531501),a=g(a,h=g(h,f=g(f,i,a,h,n[r+13],5,-1444681467),i,a,n[r+2],9,-51403784),f,i,n[r+7],14,1735328473),h,f,n[r+12],20,-1926607734),a=v(a,h=v(h,f=v(f,i,a,h,n[r+5],4,-378558),i,a,n[r+8],11,-2022574463),f,i,n[r+11],16,1839030562),h,f,n[r+14],23,-35309556),a=v(a,h=v(h,f=v(f,i,a,h,n[r+1],4,-1530992060),i,a,n[r+4],11,1272893353),f,i,n[r+7],16,-155497632),h,f,n[r+10],23,-1094730640),a=v(a,h=v(h,f=v(f,i,a,h,n[r+13],4,681279174),i,a,n[r],11,-358537222),f,i,n[r+3],16,-722521979),h,f,n[r+6],23,76029189),a=v(a,h=v(h,f=v(f,i,a,h,n[r+9],4,-640364487),i,a,n[r+12],11,-421815835),f,i,n[r+15],16,530742520),h,f,n[r+2],23,-995338651),a=m(a,h=m(h,f=m(f,i,a,h,n[r],6,-198630844),i,a,n[r+7],10,1126891415),f,i,n[r+14],15,-1416354905),h,f,n[r+5],21,-57434055),a=m(a,h=m(h,f=m(f,i,a,h,n[r+12],6,1700485571),i,a,n[r+3],10,-1894986606),f,i,n[r+10],15,-1051523),h,f,n[r+1],21,-2054922799),a=m(a,h=m(h,f=m(f,i,a,h,n[r+8],6,1873313359),i,a,n[r+15],10,-30611744),f,i,n[r+6],15,-1560198380),h,f,n[r+13],21,1309151649),a=m(a,h=m(h,f=m(f,i,a,h,n[r+4],6,-145523070),i,a,n[r+11],10,-1120210379),f,i,n[r+2],15,718787259),h,f,n[r+9],21,-343485551),f=d(f,e),i=d(i,o),a=d(a,u),h=d(h,c);return[f,i,a,h]}function a(n){var t,r="",e=32*n.length;for(t=0;t<e;t+=8)r+=String.fromCharCode(n[t>>5]>>>t%32&255);return r}function h(n){var t,r=[];for(r[(n.length>>2)-1]=void 0,t=0;t<r.length;t+=1)r[t]=0;var e=8*n.length;for(t=0;t<e;t+=8)r[t>>5]|=(255&n.charCodeAt(t/8))<<t%32;return r}function e(n){var t,r,e="0123456789abcdef",o="";for(r=0;r<n.length;r+=1)t=n.charCodeAt(r),o+=e.charAt(t>>>4&15)+e.charAt(15&t);return o}function r(n){return unescape(encodeURIComponent(n))}function o(n){return function(n){return a(i(h(n),8*n.length))}(r(n))}function u(n,t){return function(n,t){var r,e,o=h(n),u=[],c=[];for(u[15]=c[15]=void 0,16<o.length&&(o=i(o,8*n.length)),r=0;r<16;r+=1)u[r]=909522486^o[r],c[r]=1549556828^o[r];return e=i(u.concat(h(t)),512+8*t.length),a(i(c.concat(e),640))}(r(n),r(t))}function t(n,t,r){return t?r?u(t,n):function(n,t){return e(u(n,t))}(t,n):r?o(n):function(n){return e(o(n))}(n)}"function"==typeof define&&define.amd?define(function(){return t}):"object"==typeof module&&module.exports?module.exports=t:n.md5=t}(this);
//# sourceMappingURL=md5.min.js.map

2.修改tbfed-pagefooter插件中index.js文件,如下:

var moment = require('moment');
module.exports = {
  book: {
    assets: './assets',
    css: [
      'footer.css'
    ],
  },
  hooks: {
    'page:before': function(page) {
      var _label = '更新时间: ',
          _format = 'YYYY-MM-DD',
          _copy = 'powered by sysdsoft'
      if(this.options.pluginsConfig['tbfed-pagefooter']) {
        _label = this.options.pluginsConfig['tbfed-pagefooter']['modify_label'] || _label;
        _format = this.options.pluginsConfig['tbfed-pagefooter']['modify_format'] || _format;

        var _c = this.options.pluginsConfig['tbfed-pagefooter']['copyright'];
        _copy = _c ? _c + ' all right reserved,' + _copy : _copy;
      }
      var _copy = '<span class="copyright">'+_copy+'</span>'
      
      var str = '\n\n<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.css">'+
      '\n<script src="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js"></script>'+
      '\n<div id="gitalk-container"></div>'+
      '\n<script src="http://cd.sysdsoft.cn:4000/md5.min.js"></script>'+
      '\n<script src="http://cd.sysdsoft.cn:4000/gitalk-config.js"></script>'+
      ' \n\n<footer class="page-footer">' + _copy +
        '<span class="footer-modification">' +
        _label +
        '\n{{file.mtime | date("' + _format +
        '")}}\n</span></footer>';
        
        
      page.content = page.content + str;
      
      return page;

    }
  },
  filters: {
    date: function(d, format) {
      return moment(d).format(format)
    }
  }
};

gittalk.png

注:绿色部分为gitalk插件代码;
这里需要注意的是gitalk-config.js和md5.min.js的链接地址,ip地址为gitbook在线文档服务器外网地址,最好不要用相对路径,因为如果md文件与gitalk-config.js和md5.min.js不在同一路径下时,无法正确引用这两个js文件;也不要用localhost:4000/gitalk-config.js这种地址,因为服务器可能不允许访问这类地址。

测试验证
按照以上方式修改过后,本地运行,看是否成功调用gitalk插件。
如果成功调用会提示需要初始化,如果点击登陆初始化的话会报错,因为gitalk配置的地址是服务器地址,会自动跳转到服务器地址页面,而服务器那边的gitbook还没有更新,所以就会报错。
本地只要看到能正常显示gitalk模块出来,就说明配置成功。接下来就更新到服务器上就ok了。

常用插件12:change_girls 可自动切换的背景

安装
方法一:在book.json中添加以下内容,然后执行gitbook install
方法二:使用NPM安装npm install gitbook-plugin-change_girls,
方法三:从源码GitHub地址中下载,放到node_modules文件夹里github链接

{
    "plugins":["change_girls"],
    "pluginsConfig": {
        "change_girls" : {
            "time" : 10,
            "urls" : [
                "girlUrl1", "girlUrl2",...""
            ]
        }
    }
}

字段说明:
● time:图片的切换时间,单位是秒
● urls: 一个数组,可以定义多个图片,只能使用互联网上的绝对地址

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,193评论 6 498
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,306评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 162,130评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,110评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,118评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,085评论 1 295
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,007评论 3 417
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,844评论 0 273
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,283评论 1 310
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,508评论 2 332
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,667评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,395评论 5 343
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,985评论 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,630评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,797评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,653评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,553评论 2 352

推荐阅读更多精彩内容

  • 仅做记录用。添加book.json文件后,需要执行gitbook install安装插件。 使用gitbook写作...
    光行天下阅读 536评论 0 0
  • 简介 GitBook 是一个基于 Node.js 的命令行工具,可使用 Github/Git 和 Markdown...
    艾醒智阅读 1,261评论 0 5
  • 本文详细讲解了 Gitbook 生成电子书的完整过程,内容包括:安装、命令、配置、文档结构、生成电子书、部署。限于...
    静默虚空阅读 11,250评论 9 138
  • 最近宝儿是西游迷。宝妈依旧本着发展兴趣的原则,让他全方位充分体验。 悟空识字:西游初体验。悟空识字是宝儿在职业体验...
    小C的自由空间阅读 548评论 0 4
  • 如果能够回到过去, 我或许会和你成为兄弟, 勾肩搭背地饮着啤酒, 说一些少年人没营养的话语; 如果能够回到过去, ...
    余山先生阅读 238评论 0 0