gitbook插件如何安裝，以及定制化插

本節對插件如何安裝，以及定制化插件做一講解

插件安裝

book.json，該文件用于存放配置信息。如果沒有，請創建

【title】書本的標題

【description】本書的簡單描述

【language】gitbook使用的語言 我的是"zh-hans",

【root】指定存放 GitBook 文件（除了 book.json）的根目錄

【structure】指定自述文件，摘要，詞匯表等的路徑

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

參考本人完整配置詳情：

{ "title": "Gitbook教程", "description": "Gitbook電子書教程", "author": "Breeze", "language": "zh-hans", "root": ".", "plugins": [ "donate", "github-buttons@2.1.0", "edit-link", "splitter", "tbfed-pagefooter", "expandable-chapters", "back-to-top-button", "code", "pageview-count", "popup", "search-plus", "-lunr", "-search", "splitter", "-sharing", "sharing-plus" ], "styles": { "website": "styles/website.css" }, "pluginsConfig": { "donate": { "wechat": "https://luckly007.oss-cn-beijing.aliyuncs.com/img/image-20210922202901895.png", "alipay": "https://luckly007.oss-cn-beijing.aliyuncs.com/img/image-20210922202843746.png", "title": "", "button": "打賞", "alipayText": "支付寶", "wechatText": "微信" }, "github-buttons": { "repo": "ITmxs/gitbook-Information-System-Engineer", "types": [ "star" ], "size": "small" }, "edit-link": { "base": "https://github.com/ITmxs/gitbook-Information-System-Engineer/edit/master", "label": "Edit This Page" }, "tbfed-pagefooter": { "copyright": "© luckly FED Team", "modify_label": "該文件修訂時間：", "modify_format": "YYYY-MM-DD HH:mm:ss" }, "pluginsConfig": { "expandable-chapters": {} }, "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" ] } } }

記得運行

gitbook install

插件說明

目錄章節可折疊：expandable-chapters

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

暢言評論：changyan

{ "plugins": [ "changyan" ], "pluginsConfig": { "changyan": { "appid": "your changyan's appid", "conf": "the conf in the code generate by changyan" } } }

編輯“book.json”文件，添加如下代碼：

{ "styles": { "website": "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 導航目錄

兩個插件配合使用，使導航目錄使用更正常，以免出現導航欄問題。

一個支持多層目錄，一個是在目錄前方加上箭頭。使點擊兩個都有效。

"plugins": [ "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" ] }

gitbook-思維導圖

一個用Markdown生成思維導圖的GitBook插件

"plugins": ["mind-maps"]

使用

# 1 ## 1.1 ### 1.1.1 ## 1.2 # 2 # 3

- 1 - 1.1 - 1.1.1 - 1.2 - 2 - 3

GitBook 插件：編輯鏈接

"plugins": ["edit-link"]

這個 GitBook 插件在每個頁面上添加了“編輯此頁面”鏈接。

鏈接目標將是 Github 或 Gitlab 或任何 repo 上該頁面的源文件。

"edit-link": { "base": "https://github.com/ITmxs/gitbook/edit/master/", "label": "編輯此頁" },

Github Buttons

添加項目在 github 上的 star,watch,fork 情況

{ "plugins": [ "github-buttons" ], "pluginsConfig": { "github-buttons": { "repo": "zhangjikai/gitbook-use", "types": [ "star", "watch", "fork" ], "size": "small" } } }

Emphasize

為文字添加底色

插件地址

"plugins": [ "emphasize"]

Anchors

添加 Github 風格的錨點樣式

插件地址

"plugins" : [ "anchors" ]

livereload

為GitBook實時重新加載

advanced-emoji

支持emoji表情

GitHub

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。