必看說明
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 目錄
不需要在文檔中插入標簽，能夠支持到 6 級目錄，安裝即可用。
這個插件生成目錄以后，下面有一行關於版權的文字。
這行文字可以通過樣式來進行控制，讓它不顯示出來。
.treeview__container {
margin-bottom: 0px !important;
}
.treeview__container-title {
display: none !important;
}
code 代碼
為代碼塊添加行號和復制按鈕，復制按鈕可關閉
單行代碼無行號。
"code": {
"copyButtons": false
}
pageview-count 閱讀量計數
該插件用來統計當前頁面被訪問次數
popup 圖片點擊查看
插件用於點擊圖片時，打開新的網頁用來查看高清大圖。
tbfed-pagefooter 頁面添加頁腳（簡單版）
在每個頁面的最下方自動添加頁腳信息，配置如下：
"tbfed-pagefooter": {
"copyright": "Copyright © levywang123@gmail.com 2020",
"modify_label": "該文章修訂時間：",
"modify_format": "YYYY-MM-DD HH:mm:ss"
},
page-copyright 頁面添加頁腳（復雜版）
在每個頁面的最下方自動添加頁腳配置的各個信息，配置如下：
"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 隱藏界面元素
可以隱藏不想看到的元素，比如導航欄中 下方的 Published by GitBook
"elements": [".gitbook-link"]
back-to-top-button 返回頂部
在頁面篇幅過長時，在界面右下角自動添加上返回頂部的按鈕。
splitter 側邊欄寬度調整
添加完插件后，在界面上 側邊欄可自行調整寬度。
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": "微信打賞"
}