GitBook 常用插件


必看说明

GitBook 简单配置使用请参考 链接

  • plugins 是配置新增或删除插件的位置,而 Gitbook 默认自带有 5 个插件:

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

  • pluginsConfig 是插件配置的地方

特别说明 系统自带插件可通过 在插件名前面加减号的方式去除掉,如-sharing

再添加了插件后要加载使用插件,需要使用gitbook install 来安装进项目。否则无法使用。

tips:网络环境不好的小伙伴可能需要等待很长时间,可能都还安装不下来。

不要灰心,可以使用 npm install gitbook-plugin-插件名的方式进行安装。若这种方式也很慢

则配置下 npm 源吧

npm config set registry=http://registry.npm.taobao.org -g

参考本人完整配置详情:

{
    "author": "Levy",
    "description": "This is record sharing by Levy.",
    "extension": null,
    "generator": "site",
    "isbn": "",
    "links": {
        "sharing": {
            "all": null,
            "facebook": null,
            "google": null,
            "twitter": null,
            "weibo": null
        },
        "sidebar": {
            "谷歌": "https://www.google.com"
        }
    },
    "output": null,
    "pdf": {
        "fontSize": 12,
        "footerTemplate": null,
        "headerTemplate": null,
        "margin": {
            "bottom": 36,
            "left": 62,
            "right": 62,
            "top": 36
        },
        "pageNumbers": true,
        "paperSize": "a4"
    },
    "plugins": ["page-treeview", "code", "pageview-count", "popup", "tbfed-pagefooter", "favicon",
    "search-plus", "expandable-chapters", "hide-element", "back-to-top-button", "splitter",
    "-lunr", "-search", "-sharing", "sharing-plus", "chapter-fold"],
    "pluginsConfig": {
        "hide-element": {
            "elements": [".gitbook-link"]
        },
        "tbfed-pagefooter": {
            "copyright": "Copyright © levywang123@gmail.com 2020",
            "modify_label": "该文章修订时间:",
            "modify_format": "YYYY-MM-DD HH:mm:ss"
        },
        "favicon": {
            "shortcut": "assets/favicon.ico",
            "bookmark": "assets/favicon.ico",
            "appleTouch": "assets/favicon.ico",
            "appleTouchMore": {
                "120x120": "assets/favicon.ico",
                "180x180": "assets/favicon.ico"
            }
        },
        "fontsettings": {
            "theme": "white",
            "family": "sans",
            "size": 2
        },
        "page-treeview": {
            "copyright": "Copyright © levywang123@gmail.com 2020",
            "minHeaderCount": "2",
            "minHeaderDeep": "2"
        },
        "sharing": {
            "all": ["facebook", "google", "linkedin", "twitter", "weibo", "qq"]
        }
    },
    "language": "zh-hans",
    "title": "Levy",
    "variables": {},
    "styles": {
        "website": "assets/styles/website.css"
    }
}

插件说明

page-treeview 目录

GitHub 地址

不需要在文档中插入标签,能够支持到 6 级目录,安装即可用。
这个插件生成目录以后,下面有一行关于版权的文字。
这行文字可以通过样式来进行控制,让它不显示出来。

.treeview__container {
    margin-bottom: 0px !important;
}
.treeview__container-title {
    display: none !important;
}

code 代码

GitHub 地址

为代码块添加行号和复制按钮,复制按钮可关闭
单行代码无行号。

"code": {
        "copyButtons": false
      }

pageview-count 阅读量计数

该插件用来统计当前页面被访问次数

GitHub 地址

插件用于点击图片时,打开新的网页用来查看高清大图。

GitHub 地址

在每个页面的最下方自动添加页脚信息,配置如下:

"tbfed-pagefooter": {
            "copyright": "Copyright © levywang123@gmail.com 2020",
            "modify_label": "该文章修订时间:",
            "modify_format": "YYYY-MM-DD HH:mm:ss"
        },

GitHub 地址

在每个页面的最下方自动添加页脚配置的各个信息,配置如下:

 "page-copyright": {
          "description": "footer",
          "copyright": "Copyright © levywang123@gmail.com 2020",
          "timeColor": "#ccc",
          "copyrightColor": "#ddd",
          "utcOffset": "8",
          "style": "normal",
          "noPowered": false,
          "signature": "levy",
          "wisdom": "footer",
          "format": "YYYY-MM-dd hh:mm:ss",
        },

favicon 修改图标

修改网页标题的图标,显示个性化 ico

        "favicon": {
            "shortcut": "assets/favicon.ico",
            "bookmark": "assets/favicon.ico",
            "appleTouch": "assets/favicon.ico",
            "appleTouchMore": {
                "120x120": "assets/favicon.ico",
                "180x180": "assets/favicon.ico"
            }
        },

search-plus 替换原搜索插件

原搜索插件不支持中文搜索,所以使用该插件进行替换。需要将原插件进行去除掉。

    "plugins": [ "search-plus", "-lunr", "-search"]

expandable-chapters 及 chapter-fold 导航目录

两个插件配合使用,使导航目录使用更正常,以免出现导航栏问题。

一个支持多层目录,一个是在目录前方加上箭头。使点击两个都有效。

hide-element 隐藏界面元素

GitHub 地址

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

"elements": [".gitbook-link"]

back-to-top-button 返回顶部

GitHub 地址

在页面篇幅过长时,在界面右下角自动添加上返回顶部的按钮。

splitter 侧边栏宽度调整

GitHub 地址

添加完插件后,在界面上 侧边栏可自行调整宽度。

sharing-plus 分享插件

插件地址

需要将自带的插件给隐藏掉 -sharing
分享当前页面,比默认的 sharing 插件多了一些分享方式。

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

配置打赏模块,在每篇文章底部都会加上一个按钮,点击显示图片

"donate": {
            "wechat": "/assets/img/donate/wechat.png",
            "alipay": "/assets/img/donate/alipay.png",
            "title": "",
            "button": "赏",
            "alipayText": "支付宝打赏",
            "wechatText": "微信打赏"
        }

个人博客地址

原文地址:https://www.cnblogs.com/levywang/p/13569661.html