GitBook 常用插件

目录

• 必看说明
• 插件说明
  • page-treeview 目录
  • code 代码
  • pageview-count 阅读量计数
  • popup 图片点击查看
  • tbfed-pagefooter 页面添加页脚（简单版）
  • page-copyright 页面添加页脚（复杂版）
  • favicon 修改图标
  • search-plus 替换原搜索插件
  • expandable-chapters 及 chapter-fold 导航目录
  • hide-element 隐藏界面元素
  • back-to-top-button 返回顶部
  • splitter 侧边栏宽度调整
  • sharing-plus 分享插件
  • donate 打赏插件

---

必看说明

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 阅读量计数

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

popup 图片点击查看

GitHub 地址

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

tbfed-pagefooter 页面添加页脚（简单版）

GitHub 地址

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

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

page-copyright 页面添加页脚（复杂版）

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 打赏插件

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

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