铭哥和佩佩的博客

铭哥和佩佩的博客分享Python、PHP、JavaScript、HTML5、CSS3等各种知识

GitBook配置详解以及常用插件

1 基本配置

每个书本的目录下有个文件叫book.json, 这就是当前书本的配置文件

{
    "title": "Python基础",                // 设置书本的标题
    "author": "付铭",                     // 设置作者
    "description": "Python基础",          // 设置书本的描述信息
    "language" : "zh-hans"               // 设置语言 入选语言有 en, ar, bn, cs, de, en, es, fa, fi, fr, he, it, ja, ko, no, pl, pt, ro, ru, sv, uk, vi, zh-hans, zh-tw
    "links":                             // 在左侧导航栏添加链接信息
      "sidebar": {
           "铭哥教程": "http://learn.fuming.site"
        }
   },
   "styles": {                           // 自定义页面样式, 默认情况下各generator对应的css文件
        "website": "styles/website.css",
        "ebook": "styles/ebook.css",
        "pdf": "styles/pdf.css",
        "mobi": "styles/mobi.css",
        "epub": "styles/epub.css"
    }

    "plugins": [                        // 插件列表
        "-sharing",
        "reward",
    ],
    "pluginsConfig": {                  // 插件配置
        "sidebar-style": {
            "title": "Python基础",
            "author": "付铭"
        }
    }
}

2 插件配置

2.1 配置使用的插件 plugin

"plugins": [
    "highlight",
    "-search",
    "back-to-top-button",
    "expandable-chapters-small",
    "insert-logo"
]

其中"-search"中的 - 符号代表去除默认自带的插件

注意: GitBook 默认自带5个插件

  • highlight: 代码高亮
  • search: 导航栏查询功能(不支持中文)
  • sharing:右上角分享功能
  • font-settings:字体设置(最上方的"A"符号)
  • livereload:为GitBook实时重新加载

2.2 插件属性配置pluginsConfig

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

2.3 插件安装

插件无需单独下载安装,只有在 book.json 中配置好对应的插件,执行 gitbook install, 缺少的插件就会自动下载安装

3 常用插件总结

3.1 back-to-top-button 回到顶部按钮

{
    "plugins": [
         "back-to-top-button"
    ]
}

效果图如下:
屏幕快照 2019-05-11 上午9.11.20.png

3.2 expandable-chapters 导航目录折叠扩展

支持多层目录,点击箭实现收放目录。

{
    "plugins": [
         "expandable-chapters-small"
    ]
}

效果图如下:
屏幕快照 2019-05-11 上午8.59.31.png

3.3 code 代码添加行号&复制按钮

{
    "plugins" : [ "code" ]
}

如果想去掉复制按钮,可配置

"pluginsConfig": {
      "code": {
        "copyButtons": false
      }
}

效果图如下:
屏幕快照 2019-05-11 上午9.16.48.png

3.4 copy-code-button 代码复制按钮

{
    "plugins": ["copy-code-button"]
}

效果图如下:
2.png

3.5 insert-logo 插入logo

{
    "plugins": [ "insert-logo" ]
    "pluginsConfig": {
      "insert-logo": {
        "url": "http://www.fuming.site/dist/avator.jpg",
        "style": "background: none; max-height: 30px; min-height: 30px"
      }
    }
}

效果图如下:
屏幕快照 2019-05-11 上午9.32.24.png

3.6 search-pro 高级搜索

在使用此插件之前,需要将默认的search和lunr 插件去掉;在搜索结果中,关键字会高亮;自带的 search 插件,关键字不会高亮

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

3.7 github 在右上角添加 github 图标

{
    "plugins": [ 
        "github" 
    ],
    "pluginsConfig": {
        "github": {
            "url": "https://github.com/unclealan"
        }
    }
}

3.8 emphasize 为文字加上底色

{
    "plugins": [
        "emphasize"
    ]
}

然后在markdown / asciidoc内容中,使用以下内容突出显示一些文本:

This text is {% em %}highlighted !{% endem %}
This text is {% em %}highlighted with **markdown**!{% endem %}
This text is {% em type="green" %}highlighted in green!{% endem %}
This text is {% em type="red" %}highlighted in red!{% endem %}
This text is {% em color="#ff0000" %}highlighted with a custom color!{% endem %}

效果图如下:
14946112-ec174325452f0d78.jpg

3.9 splitter 侧边栏宽度可调节

{
    "plugins": [
        "splitter"
    ]
}

3.10 sharing-plus

分享当前页面,比默认的 sharing 插件多了一些分享方式。

{
    "plugins": ["-sharing", "sharing-plus"],
    "pluginsConfig": {
        "sharing": {
             "douban": false,
             "facebook": false,
             "google": true,
             "pocket": false,
             "qq": false,
             "qzone": true,
             "twitter": false,
             "weibo": true,
          "all": [
               "douban", "facebook", "google", "instapaper", "linkedin","twitter", "weibo", 
               "messenger","qq", "qzone","viber","whatsapp"
           ]
       }
    }
}

其中:
为true的代表直接显示在页面顶端,为false的不显示,不写默认为false
"all"中代表点击分享符号显示出来的

支持的网站如下:

"douban", "facebook", "google", "hatenaBookmark", 
"instapaper", "linkedin","twitter", "weibo", 
"messenger","qq", "qzone","viber","vk","weibo",
"pocket", "stumbleupon","whatsapp"

3.11 tbfed-pagefooter 页面添加页脚

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

3.12 page-copyright 页面页脚版权(内容更多)

{
    "plugins" : ["page-copyright"],
    "pluginsConfig" : {
        "page-copyright": {
          "description": "modified at",
          "signature": "付铭",
          "wisdom": "前端开发者 & 全栈工程师",
          "format": "YYYY-MM-dd hh:mm:ss",
          "copyright": "Copyright © 铭哥教程",
          "timeColor": "#666",
          "copyrightColor": "#666",
          "utcOffset": "8",
          "style": "normal",
          "noPowered": false,
        }
    }
}

运行以后有很多信息是原创作者的,这些配置都在你的插件安装目录 **\node_modules\gitbook-plugin-page-copyright 下的 index.js 中,自己可以修改。大部分信息都在 defaultOption 中。
那个二维码可以在文件中找到 QRcode 改成自己的,或者直接把所有的 efaultOption.isShowQRCode 改成false

3.13 page-treeview 生成页内目录

不需要插入标签,能支持到6级目录,安装可用

{
    "plugins": ["page-treeview"]
}

非必要配置:

"pluginsConfig": {
    "page-treeview": {
        "copyright": "Copyright © aleen42",
        "minHeaderCount": "2",
        "minHeaderDeep": "2"
    }
}

这个插件生成目录以后,下面有一行关于版权的文字。如果想去掉的话,找到插件目录下的index.js文件:***/node_modules/gitbook-plugin-page-treeview/lib/index.js
找到大约111行,删除这一行关于var copyRight的定义
下面113行的var insertTreeview中,删除+ copyRight,目前就不显示了
142行中的'copyright': 'Copyright © aleen42',也可以删除
下面161行和163行和111行113行一样的,其实不删除也不显示了。

3.14 page-toc-button 悬浮目录

{
    "plugins" : [ "page-toc-button" ]
}

可选配置项:

"pluginsConfig": {
        "page-toc-button": {
            "maxTocDepth": 2,
            "minTocSize": 2
       }
}

maxTocDept 标题的最大深度(2 = h1 + h2 + h3)。不支持值> 2。 默认2
minTocSize 显示toc按钮的最小toc条目数。 默认 2

3.15 anchor-navigation-ex 悬浮目录和回到顶部

{
    plugins: ["anchor-navigation-ex"],
    pluginsConfig: [
        "anchor-navigation-ex": {
            "tocLevel1Icon": "fa fa-hand-o-right",
            "tocLevel2Icon": "fa fa-hand-o-right",
            "tocLevel3Icon": "fa fa-hand-o-right",
            "multipleH1": false,
            "multipleH2": false,
            "multipleH3": false,
            "multipleH4": false,
            "showLevelIcon": false,
            "showLevel": false
        },
}

3.16 打赏按钮 reward

这是铭哥开发的插件哦

{
    plugins: [
        ”reward“
    ],

    "pluginsConfig": ['
        "reward": {
            "wechat": "http://unclealan.cn/usr/themes/seventeen/dist/images/weixin.JPG",
            "alipay": "http://unclealan.cn/usr/themes/seventeen/dist/images/alipay.JPG",
            "button": "打赏铭哥",
            "alipayText": "支付宝",
            "wechatText": "微信"
        },
    ]
}

3.17 change_girls 可自动切换的背景

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

3.18 klipse 嵌入类似IDE的功能

Klipse

{
    "plugins": ["klipse"]
}

用法,在 markdown 中

    ```eval-python
        print [x + 1 for x in range(10)]
    ```

效果如下:
14946112-b19f1f8990aa7d2a.jpg

3.19 pageview-count 阅读量计数

{
  "plugins": [ "pageview-count"]
}

3.20 auto-scroll-table 表格滚动条

{
  "plugins": ["auto-scroll-table"]
}

不够宽也是没有滚动条的

3.21 popup 弹出大图

单击图片,在新页面查看大图。

{
  "plugins": [ "popup" ]
}

3.22 lightbox 单击查看图片

点击图片可显示,大小不变

{
  "plugins": ["lightbox"]
}

3.23 click-reveal 点击显示

默认隐藏,点击可显示。

{
    "plugins": [
        "click-reveal"
    ]
}

使用方式,markdown中

{% reveal %}
要被隐藏的内容
{% endreveal %}

默认显示的文字是 Click to show , 使用自定义显示文字

{% reveal text="点击显示" %}
要被隐藏的内容
{% endreveal %}

支持html语法

<div class="click_reveal">
    <span> 点击显示 </span>
    <div><pre><code>隐藏的文字</code></pre></div>
</div>

3.24 custom-favicon 修改网页标题图标 favicon

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

3.25 accordion 折叠模块

这个插件名叫手风琴,可以实现将内容隐藏起来,外部显示模块标题和显示箭头,点击箭头可显示里面的内容。

{
  "plugins": ["accordion"]
}

mardown 中用法:

%accordion%模块标题%accordion%
内容部分
%/accordion%

3.26 hide-element 隐藏元素

可以隐藏不想看到的元素,比如导航栏中 Published by GitBook

{
    "plugins": [
        "hide-element"
    ],
    "pluginsConfig": {
        "hide-element": {
            "elements": [".gitbook-link"]
        }
    }
}

3.27 sidebar-style 导航栏显示作者信息

会替换掉 Published by GitBook

{
    "plugins": ["sidebar-style"],
    "pluginsConfig": {
        "sidebar-style": {
            "title": "前端开发",
            "author": "付铭"
        }
    }
}
none

已有 6 条评论

  1. 沙雕寨大当家 说: ( )

    铭哥,佩佩是谁 ?_?

  2. 是我女朋友呀

  3. 我也想要个佩佩

  4. 铭哥web的基础资料博客呢?被删了?

  5. 铭哥为何如此优秀

添加新评论