GitBook插件整理 - book.json配置

本文轉載自查看原文 2019-01-23 08:42 6870 GitBook/ gitbook

1. 配置概況
2. 一些實用插件

介紹一下gitbook中book.json的一些實用配置和插件

1. 配置概況

1.1. 全局配置

title
設置書本的標題
"title" : "Gitbook Use"
author
作者的相關信息
"author" : "mingyue"
description
本書的簡單描述
"description" : "記錄Gitbook的配置和一些插件的使用"
language
Gitbook使用的語言, 版本2.6.4中可選的語言如下：
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
例如，配置使用簡體中文
"language" : "zh-hans"

links
在左側導航欄添加鏈接信息

"links" : {
    "sidebar" : {
        "Home" : "https://www.baidu.com"
    }
}

styles
自定義頁面樣式，默認情況下各generator對應的css文件

"styles": {
"website": "styles/website.css",
"ebook": "styles/ebook.css",
"pdf": "styles/pdf.css",
"mobi": "styles/mobi.css",
"epub": "styles/epub.css"
}
```
例如使<h1> <h2>標簽有下邊框，可以在website.css中設置

```

h1 , h2{
border-bottom: 1px solid #EFEAEA;
}
```

1.2. 插件列表 plugins

配置使用的插件

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

其中 "-search"中的 - 符號代表去除默認自帶的插件
Gitbook默認自帶有5個插件：

highlight：代碼高亮
search：導航欄查詢功能（不支持中文）
sharing：右上角分享功能
font-settings：字體設置（最上方的"A"符號）
livereload：為GitBook實時重新加載

1.3. 插件屬性配置pluginsConfig

配置插件的屬性
例如配置insert-logo的屬性：

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

2. 一些實用插件

記錄一些實用的插件
用法：在book.json中添加以下內容。然后執行gitbook install，或者使用NPM安裝（單獨安裝推薦NPM）npm install gitbook-plugin-插件名，也可以從源碼GitHub地址中下載，放到node_modules文件夾里（GitHub地址在進入插件地址右側的GitHub鏈接）

2.1. back-to-top-button 回到頂部

插件地址
 GitHub地址
在book.json中添加以下內容。然后執行gitbook install，或者使用NPM安裝（單獨安裝推薦NPM）npm install gitbook-plugin-back-to-top-button，也可以從源碼GitHub地址中下載，放到node_modules文件夾里（GitHub地址在進入插件地址右側的GitHub鏈接）

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

2.2. 導航目錄折疊

2.2.1. chapter-fold 左側目錄折疊

支持多層目錄，點擊導航欄的標題名就可以實現折疊擴展。
插件地址
 GitHub地址
在book.json中添加以下內容。然后執行gitbook install，或者使用NPM安裝（單獨安裝推薦NPM）npm install gitbook-plugin-chapter-fold，也可以從源碼GitHub地址中下載，放到node_modules文件夾里（GitHub地址在進入插件地址右側的GitHub鏈接）

{
    "plugins": ["chapter-fold"]
}

2.2.2. expandable-chapters-small 左側章節目錄可折疊

支持多層目錄，比Toggle Chapters好用
只有點擊箭頭才能實現折疊擴展。不如【2.2.1. chapter-fold 左側目錄折疊】好用
插件地址
 GitHub地址
在book.json中添加以下內容。然后執行gitbook install，或者使用NPM安裝（單獨安裝推薦NPM）npm install gitbook-plugin-expandable-chapters-small，也可以從源碼GitHub地址中下載，放到node_modules文件夾里（GitHub地址在進入插件地址右側的GitHub鏈接）

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

2.2.3. expandable-chapters 可擴展導航章節

和expandable-chapters-small效果相同，唯一不同的是這個插件的箭頭粗
插件地址
 GitHub地址
在book.json中添加以下內容。然后執行gitbook install，或者使用NPM安裝（單獨安裝推薦NPM）npm install gitbook-plugin-expandable-chapters，也可以從源碼GitHub地址中下載，放到node_modules文件夾里（GitHub地址在進入插件地址右側的GitHub鏈接）

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

2.3. 代碼復制，行號

2.3.1. code 代碼添加行號&復制按鈕（可選）

為代碼塊添加行號和復制按鈕，復制按鈕可關閉
單行代碼無行號。
插件地址
 GitHub地址
在book.json中添加以下內容，然后執行gitbook install，或者使用NPM安裝（單獨安裝推薦NPM）npm install gitbook-plugin-code，也可以從源碼GitHub地址中下載，放到node_modules文件夾里（GitHub地址在進入插件地址右側的GitHub鏈接）

{
    "plugins" : [ "code" ]
}

如果想去掉復制按鈕，在book.json的插件配置塊更新：

{
    "plugins" : [ "code" ],
    "pluginsConfig": {
          "code": {
          "copyButtons": false
      }
    }
}

2.3.2. copy-code-button 代碼塊復制按鈕

為代碼塊添加復制的按鈕。
插件地址
 GitHub地址
在book.json中添加以下內容。然后執行gitbook install，或者使用NPM安裝（單獨安裝推薦NPM）npm install gitbook-plugin-copy-code-button，也可以從源碼GitHub地址中下載，放到node_modules文件夾里（GitHub地址在進入插件地址右側的GitHub鏈接）

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

效果如下圖所示：

2.4. todo 待做項☑

添加 Todo 功能。默認的 checkbox 會向右偏移 2em，如果不希望偏移，可以在 website.css 里加上下面的代碼:

input[type=checkbox]{
    margin-left: -2em;
}

插件地址
 GitHub地址
在book.json中添加以下內容。然后執行gitbook install，或者使用NPM安裝（單獨安裝推薦NPM）npm install gitbook-plugin-todo，也可以從源碼GitHub地址中下載，放到node_modules文件夾里（GitHub地址在進入插件地址右側的GitHub鏈接）

{
"plugins": ["todo"]
}

使用示例：

*   [ ]  write some articles
*   [x]  drink a cup of tea

2.5. insert-logo 插入logo

將logo插入到導航欄上方中
插件地址
 GitHub地址
在book.json中添加以下內容。然后執行gitbook install，或者使用NPM安裝（單獨安裝推薦NPM）npm install gitbook-plugin-insert-logo，也可以從源碼GitHub地址中下載，放到node_modules文件夾里（GitHub地址在進入插件地址右側的GitHub鏈接）

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

2.6. search-pro 高級搜索（支持中文）

支持中文搜索, 在使用此插件之前，需要將默認的search和lunr 插件去掉。
插件地址
 GitHub地址
在book.json中添加以下內容。然后執行gitbook install，或者使用NPM安裝（單獨安裝推薦NPM）npm install gitbook-plugin-search-pro

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

2.7. advanced-emoji 支持emoji表情

emoij表情列表
 插件地址
 GitHub地址
在book.json中添加以下內容。然后執行gitbook install，或者使用NPM安裝（單獨安裝推薦NPM）npm install gitbook-plugin-advanced-emoji，也可以從源碼GitHub地址中下載，放到node_modules文件夾里（GitHub地址在進入插件地址右側的GitHub鏈接）

{
    "plugins": [
        "advanced-emoji"
    ]
}

2.8. github 在右上角添加github圖標

插件地址
 GitHub地址
在book.json中添加以下內容。然后執行gitbook install，或者使用NPM安裝（單獨安裝推薦NPM）npm install gitbook-plugin-github，也可以從源碼GitHub地址中下載，放到node_modules文件夾里（GitHub地址在進入插件地址右側的GitHub鏈接）

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

效果圖：

2.9. emphasize 為文字加上底色

插件地址
 GitHub地址
在book.json中添加以下內容。然后執行gitbook install，或者使用NPM安裝（單獨安裝推薦NPM）npm install gitbook-plugin-emphasize，也可以從源碼GitHub地址中下載，放到node_modules文件夾里（GitHub地址在進入插件地址右側的GitHub鏈接）

{
    "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 %}

效果圖：

2.10. splitter 側邊欄寬度可調節

插件地址
 GitHub地址
在book.json中添加以下內容。然后執行gitbook install，或者使用NPM安裝（單獨安裝推薦NPM）npm install gitbook-plugin-splitter，也可以從源碼GitHub地址中下載，放到node_modules文件夾里（GitHub地址在進入插件地址右側的GitHub鏈接）

{
    "plugins": [
        "splitter"
    ]
}

效果圖：

分享當前頁面，比默認的 sharing 插件多了一些分享方式。
插件地址
在book.json中添加以下內容。然后執行gitbook install，或者使用NPM安裝（單獨安裝推薦NPM）npm install gitbook-plugin-sharing-plus

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

其中：
為true的代表直接顯示在頁面頂端，為false的不顯示，不寫默認為false
"all"中代表點擊分享符號顯示出來的
支持網站：

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

效果圖：
如果想增加其他分享網站，可以自己修改插件文件button.js和package.json。

首先你要知道那個網站的分享鏈接的結構（可以隨便找其他的網站點擊分享看看URL），比如我增加分享到人人網,鏈接是這樣的結構（紅框里的是通用結構，后面內容是不同的。第一部分表示被分享的URL，第二部分是標題title）：
然后在button.js中的var SITES = {····}中添加一條信息，和上面其他分享的信息類似。比如我增加的人人網是這樣的
在package.json中仿照前面內容添加新網站的信息。比如我添加的人人網：

      "renren": {
        "default": false,
        "description": "人人網",
        "type": "boolean"
      }

2.12. 頁腳、版權信息

2.12.1. tbfed-pagefooter 頁面添加頁腳（內容少）

插件地址
 GitHub地址
在book.json中添加以下內容。然后執行gitbook install，或者使用NPM安裝（單獨安裝推薦NPM）npm install gitbook-plugin-tbfed-pagefooter，也可以從源碼GitHub地址中下載，放到node_modules文件夾里（GitHub地址在進入插件地址右側的GitHub鏈接）

{
    "plugins": [
       "tbfed-pagefooter"
    ],
    "pluginsConfig": {
        "tbfed-pagefooter": {
            "copyright":"Copyright &copy zhangjikai.com 2017",
            "modify_label": "該文件修訂時間：",
            "modify_format": "YYYY-MM-DD HH:mm:ss"
        }
    }
}

如果想加入一個URL，自己可以去index.js里，把powered by gitbook，改成
powered by <a href="你的URL" target="_blank">你的名字</a>

2.12.2. page-copyright 頁面頁腳版權（內容多）

插件地址
 GitHub地址
在book.json中添加以下內容。然后執行gitbook install，或者使用NPM安裝（單獨安裝推薦NPM）npm install gitbook-plugin-page-copyright，也可以從源碼GitHub地址中下載，放到node_modules文件夾里（GitHub地址在進入插件地址右側的GitHub鏈接）

{
    "plugins" : ["page-copyright"],
    "pluginsConfig" : {
        "page-copyright": {
          "description": "modified at",
          "signature": "你的簽名",
          "wisdom": "Designer, Frontend Developer & overall web enthusiast",
          "format": "YYYY-MM-dd hh:mm:ss",
          "copyright": "Copyright &#169; 你的名字",
          "timeColor": "#666",
          "copyrightColor": "#666",
          "utcOffset": "8",
          "style": "normal",
          "noPowered": false,
        }
    }
}

運行以后有很多信息是原創作者的，這些配置都在你的插件安裝目錄**\node_modules\gitbook-plugin-page-copyright下的index.js中，自己可以修改。大部分信息都在defaultOption中。
那個二維碼可以在文件中找到QRcode改成自己的，或者直接把所有的efaultOption.isShowQRCode改成false

2.13. sectionx 將頁面分塊顯示

用於將頁面分成多個部分，並添加按鈕以允許讀者控制每個部分的可見性
插件地址
 GitHub地址
 示例地址
在book.json中添加以下內容。然后執行gitbook install，或者使用NPM安裝（單獨安裝推薦NPM）npm install gitbook-plugin-sectionx，也可以從源碼GitHub地址中下載，放到node_modules文件夾里（GitHub地址在進入插件地址右側的GitHub鏈接）

{
    "plugins": [
       "sectionx"
    ]
}

使用方法

內容分塊：
在.md文件中定義一個部分（就是插入下面的字段）。
markdown中示例代碼：

內容部分2；

```

效果圖1：

這里只采用三個參數，其他參數如下所示：

|參數|說明|

|-|-|
|data-title|該部分的標題，它將顯示為bootstrap面板的標題（大小為h2）。

請注意，您不能使用"標題中的字符，請"改用。|
|data-id|章節的id，對按鈕控制很有用（在下一節中討論）。

|
|data-show|默認表示面板內容是否可見的布爾值。

true：默認情況下，面板內容對用戶可見，面板標題可以單擊。
false：默認情況下，面板內容對用戶隱藏，面板標題不可點擊，只能通過添加自定義按鈕查看（在下一節中討論）。

|
|data-nopdf|一個布爾值，表示該部分是否將隱藏在pdf導出中。

true：面板不會顯示在.pdf或.epub中。

|
|data-collapse|一個布爾值，表示默認情況下是否打開（但仍然可見）該部分。

true：默認情況下，面板內容對用戶可見，但已關閉。
false：默認情況下，面板內容對用戶可見，但已打開（默認設置）。

<button class="section" target="section1" show="顯示下一部分" hide="隱藏下一部分"></button>

|標簽|說明|

```

內容部分2

```

效果圖2：

3. 混合使用
將第2節的button塊添加到第1節的內容部分
markdown中示例代碼：

```

內容部分1；

內容部分2

```

效果圖3：

2.14. 生成頁內目錄

2.14.1. page-treeview 生成頁內目錄

不需要插入標簽，能支持到6級目錄，安裝可用
插件地址
 GitHub地址
在book.json中添加以下內容。然后執行gitbook install，或者使用NPM安裝（單獨安裝推薦NPM）npm install gitbook-plugin-page-treeview，也可以從源碼GitHub地址中下載，放到node_modules文件夾里（GitHub地址在進入插件地址右側的GitHub鏈接）：

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

非必要的配置項：

{
    "plugins": [
        "page-treeview"
    ],
    "pluginsConfig": {
        "page-treeview": {
            "copyright": "Copyright &#169; 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行一樣的，其實不刪除也不顯示了。
但是以后執行gitbook install就恢復了。

2.14.2. simple-page-toc 生成本頁目錄

需要插入標簽，支持1-3級標簽
頁面頂端生成。另外 GitBook 在處理重復的標題時有些問題，所以盡量不適用重復的標題。
插件地址
 GitHub地址
將以下插件插入到您的book.json並運行gitbook install：
"pluginsConfig"不是必需的。

{
    "plugins" : [
        "simple-page-toc"
    ],
    "pluginsConfig": {
        "simple-page-toc": {
            "maxDepth": 3,
            "skipFirstH1": true
        }
    }
}

參數	說明
"maxDepth": 3	使用深度最多為maxdepth的標題。
"skipFirstH1": true	排除文件中的第一個h1級標題。

使用方法: 在需要生成目錄的地方用下面的標簽括起來，全文都生成的話就在首尾添加

<!-- toc -->內容部分<!-- endtoc -->

2.15. 懸浮目錄

2.15.1. page-toc-button 懸浮目錄

插件地址
在book.json中添加以下內容。然后執行gitbook install，或者使用NPM安裝（單獨安裝推薦NPM）npm install gitbook-plugin-ancre-navigation，也可以從源碼GitHub地址中下載，放到node_modules文件夾里

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

可選配置：

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

名稱	默認	描述
maxTocDepth	2	標題的最大深度（2 = h1 + h2 + h3）。不支持值> 2。
minTocSize	2	顯示toc按鈕的最小toc條目數。

添加Toc到側邊懸浮導航以及回到頂部按鈕。
自動在標題前生成列表項："1. " "1.1. " "2. " "2.2. "
需要注意以下兩點：

本插件只會提取 h[1-3] 標簽作為懸浮導航

只有按照以下順序嵌套才會被提取

# h1
## h2
### h3
必須要以 h1 開始，直接寫 h2 不會被提取
## h2

插件地址
 GitHub地址
在book.json中添加以下內容。然后執行gitbook install，或者使用NPM安裝（單獨安裝推薦NPM）npm install gitbook-plugin-ancre-navigation，也可以從源碼GitHub地址中下載，放到node_modules文件夾里（GitHub地址在進入插件地址右側的GitHub鏈接）：

```

{
"plugins": [
"ancre-navigation"
]
}
```

2.16. klipse 嵌入類似IDE的功能

嵌入一塊功能，可在代碼段中實時交互，即（輸入代碼 > 執行結果
插件地址
 GitHub地址
 Klipse
在book.json中添加以下內容。然后執行gitbook install，或者使用NPM安裝（單獨安裝推薦NPM）npm install gitbook-plugin-klipse，也可以從源碼GitHub地址中下載，放到node_modules文件夾里（GitHub地址在進入插件地址右側的GitHub鏈接）：

{
    "plugins": ["klipse"]
}

klipse 目前支持下面的語言：

javascript: evaluation is done with the javascript function eval and pretty printing of the result is done with pretty-format
clojure[script]: evaluation is done with Self-Hosted Clojurescript
ruby: evaluation is done with Opal
C++: evaluation is done with JSCPP
python: evaluation is done with Skulpt
scheme: evaluation is done with BiwasScheme
PHP: evaluation is done with Uniter
BrainFuck
JSX
EcmaScript2017
Google Charts: See Interactive Business Report with Google Charts.

下面是一個python的使用示例，其他語言類似，比如（eval-js）：

```eval-python
print [x +1 for x in range（10）]
```

效果如下所示：

2.17. donate 打賞插件

文章最下面的按鈕，點擊可彈出圖片
插件地址
 GitHub地址
在book.json中添加以下內容。然后執行gitbook install，或者使用NPM安裝（單獨安裝推薦NPM）npm install gitbook-plugin-donate ，也可以從源碼GitHub地址中下載，放到node_modules文件夾里（GitHub地址在進入插件地址右側的GitHub鏈接）：

{
    "plugins": [
        "donate"
    ],
    "pluginsConfig": {
        "donate": {
            "wechat": "微信收款的二維碼URL",
            "alipay": "支付寶收款的二維碼URL",
            "title": "",
            "button": "賞",
            "alipayText": "支付寶打賞",
            "wechatText": "微信打賞"
        }
    }
}

2.18. change_girls 可自動切換的背景

添加背景圖片，並且可以自動切換
插件地址
 GitHub地址
在book.json中添加以下內容。然后執行gitbook install，或者使用NPM安裝（單獨安裝推薦NPM）npm install gitbook-plugin-change_girls ，也可以從源碼GitHub地址中下載，放到node_modules文件夾里（GitHub地址在進入插件地址右側的GitHub鏈接）：

{
    "plugins":["change_girls"],

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

字段說明：

time：圖片的切換時間，單位是秒
urls：一個數組，可以定義多個圖片，只能使用互聯網上的絕對地址

2.19. 警報

這兩個警報插件類似，其中的圖標文件有些可以共用

2.19.1. alerts 警報

這個GitBook插件將塊引用轉換為漂亮的警報。
插件地址
在book.json中添加以下內容。然后執行gitbook install，或者使用NPM安裝（單獨安裝推薦NPM）npm install gitbook-plugin-flexible-alerts

{
    "plugins": ["alerts"]
}

用法樣式：
信息樣式

> **[info] For info**
>
> Use this for infomation messages.

警告造型

> **[warning] For warning**
>
> Use this for warning messages.

危險造型

> **[danger] For danger**
>
> Use this for danger messages.

成功造型

> **[success] For success**
>
> Use this for success messages.

2.19. flexible-alerts 警報

這個GitBook插件將塊引用轉換為漂亮的警報。可以在全局和警報特定級別配置外觀，因此輸出確實符合您的需求（如下圖）。此外，您還可以提供自己的警報類型（比如最后的comment）。
圖 19
插件地址
 GitHub地址
這個看上面那個鏈接里的內容更豐富一點

用法：

在你的gitbook的book.json文件中，添加flexible-alerts到插件列表。

在pluginsConfig中，配置插件以滿足您的需求。自定義設置不是必需的。

簡單使用
1.在book.json中添加以下內容。然后執行gitbook install，或者使用NPM安裝（單獨安裝推薦NPM）npm install gitbook-plugin-flexible-alerts，也可以從源碼GitHub地址中下載，放到node_modules文件夾里（GitHub地址在進入插件地址右側的GitHub鏈接）：

{
  "plugins": [
    "flexible-alerts"
  ]
}

2.markdown文件中編輯
簡單的markdown文件寫法，效果見上圖 19 的第一個圖：

> [!NOTE]
> 這是一個簡單的Note類型的使用，所有的屬性都是默認值。

上面的[!NOTE]是行匹配模式，默認情況下支持類型NOTE，TIP，WARNING和DANGER。
可以通過提供有效配置來擴展可用類型（請參閱這一節最下面的示例COMMENT）

個性化使用：
在markdown中的個性化語法

> [!type|style:xx|label:xx|icon:xx|className:xx|labelVisibility:xx|iconVisibility:xx]
> 內容部分

字段介紹，如果不設置的表示選擇默認，除了!type都不是必需

鍵	允許的值	說明
!type	`NOTE`，`TIP`，`WARNING`和`DANGER`	警告級別設置
style	以下值之一: `callout`（默認）, `flat`	警告樣式，見圖19的左右不同
label	任何文字	警告塊的標題位置，即Note這個字段位置（不支持中文）
icon	比如： `fa fa-info-circle`	一個有效的Font Awesome圖標，那塊小符號
className	CSS類的名稱	指定css文件，用於指定外觀
labelVisibility	以下值之一：`visible`（默認），`hidden`	標簽是否可見
iconVisibility	以下值之一：`visible`（默認），`hidden`	圖標是否可見

對比：

> [!NOTE]
> 這是一個簡單的Note類型的使用，所有的屬性都是默認值。
---
> [!NOTE|style:flat|lable:Mylable|iconVisibility:hidden]
> "!type":`NOTE`、"style":`flat`、"lable":`自定義標簽`、圖標不可見

效果：

json配置個性化
自定義一個COMMENT類型
在book.json中添加以下內容。然后執行gitbook install，或者使用NPM安裝（單獨安裝推薦NPM）npm install gitbook-plugin-flexible-alerts，也可以從源碼GitHub地址中下載，放到node_modules文件夾里（GitHub地址在進入插件地址右側的GitHub鏈接）：

{
  "plugins": [
    "flexible-alerts"
  ],
  "pluginsConfig": {
    "flexible-alerts": {
      "style": "callout",
      "comment": {
        "label": "Comment",
        "icon": "fa fa-comments",
        "className": "info"
      }
    }
  }
}

示例：

> [!COMMENT]
> An alert of type 'comment' using style 'callout' with default settings.

效果：

2.20. pageview-count 閱讀量計數

插件地址
 GitHub地址
在book.json中添加以下內容。然后執行gitbook install，或者使用NPM安裝（單獨安裝推薦NPM）npm install gitbook-plugin-pageview-count，也可以從源碼GitHub地址中下載，放到node_modules文件夾里（GitHub地址在進入插件地址右側的GitHub鏈接）：

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

2.21. auto-scroll-table 表格滾動條

為避免表格過寬，增加滾動條
插件地址
 GitHub地址
在book.json中添加以下內容。然后執行gitbook install，或者使用NPM安裝（單獨安裝推薦NPM）npm install gitbook-plugin-auto-scroll-table，也可以從源碼GitHub地址中下載，放到node_modules文件夾里（GitHub地址在進入插件地址右側的GitHub鏈接）：

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

沒滾動條刷新一下頁面

2.22. 查看圖片

單擊圖片，在新頁面查看大圖。
插件地址
 GitHub地址
在book.json中添加以下內容。然后執行gitbook install，或者使用NPM安裝（單獨安裝推薦NPM）npm install gitbook-plugin-lightbox，也可以從源碼GitHub地址中下載，放到node_modules文件夾里

{
  "plugins": [ "popup" ]
}

新窗口打開圖片，大小不變
插件地址
 GitHub地址
在book.json中添加以下內容。然后執行gitbook install，或者使用NPM安裝（單獨安裝推薦NPM）npm install gitbook-plugin-lightbox ，也可以從源碼GitHub地址中下載，放到node_modules文件夾里（GitHub地址在進入插件地址右側的GitHub鏈接）：

{
  "plugins": ["lightbox"]
}

2.23. click-reveal 點擊顯示

默認隱藏，點擊可顯示。
插件地址
 GitHub地址
在book.json中添加以下內容，然后執行gitbook install，或者使用NPM安裝（單獨安裝推薦NPM）npm install gitbook-plugin-click-reveal，也可以從源碼GitHub地址中下載，放到node_modules文件夾里（GitHub地址在進入插件地址右側的GitHub鏈接）

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

快速使用：
默認顯示的文字是Click to show:

{% reveal %}
要被隱藏的內容
{% endreveal %}

使用自定義顯示文字：

{% reveal text="點擊顯示" %}
要被隱藏的內容
{% endreveal %}

用HTML語法也可以：
<div class="click_reveal"><span> 點擊顯示 </span><div><pre><code>隱藏的文字</code></pre></div></div>

2.24. custom-favicon 修改標題欄圖標

修改網頁標題的圖標
插件地址
 GitHub地址
在book.json中添加以下內容，然后執行gitbook install，或者使用NPM安裝（單獨安裝推薦NPM）npm install gitbook-plugin-custom-favicon，也可以從源碼GitHub地址中下載，放到node_modules文件夾里（GitHub地址在進入插件地址右側的GitHub鏈接）

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

把.ico格式的圖標放進項目中。這個路徑可以使用相對路徑，比如我用的是./images/a.ico
注意：這個pluginsConfig和其他的不大一樣。圖標只能用.ico文件。

2.25. accordion 折疊模塊

這個插件名叫手風琴，可以實現將內容隱藏起來，外部顯示模塊標題和顯示箭頭，點擊箭頭可顯示里面的內容。
插件地址
 GitHub地址
 示例
在book.json中添加以下內容。然后執行gitbook install，或者使用NPM安裝（單獨安裝推薦NPM）npm install gitbook-plugin-custom-favicon，也可以從源碼GitHub地址中下載，放到node_modules文件夾里。

{
  "plugins": ["accordion"]
}

用法：
編輯內容，用下面的標簽括起來。

%accordion%模塊標題%accordion%
內容部分
%/accordion%

可嵌套，內部可以加代碼塊，引用，標題等都可以實現。

2.26. hide-element 隱藏元素

可以隱藏不想看到的元素，比如導航欄中Published by GitBook
插件地址
 GitHub地址
在book.json中添加以下內容。然后執行gitbook install，或者使用NPM安裝（單獨安裝推薦NPM）npm install gitbook-plugin-custom-favicon，也可以從源碼GitHub地址中下載，放到node_modules文件夾里。

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

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 gitbook的插件配置【Gitbook】實用配置及插件介紹 Gitbook詳解（五）-插件的配置和使用詳解 Gitbook的_book目錄下html不能跳轉的問題 gitbook配置 gitbook serve后報錯：:Error: ENOENT: no such file or directory……/_book/gitbook/gitbook GitBook 常用插件 Gitbook配置目錄折疊 Gitbook最全初始配置 Gitbook最全初始配置

GitBook插件整理 - book.json配置

1. 配置概況

1.1. 全局配置

1.2. 插件列表 plugins

1.3. 插件屬性配置pluginsConfig

2. 一些實用插件

2.1. back-to-top-button 回到頂部

2.2. 導航目錄折疊

2.2.1. chapter-fold 左側目錄折疊

2.2.2. expandable-chapters-small 左側章節目錄可折疊

2.2.3. expandable-chapters 可擴展導航章節

2.3. 代碼復制，行號

2.3.1. code 代碼添加行號&復制按鈕（可選）

2.3.2. copy-code-button 代碼塊復制按鈕

2.4. todo 待做項☑

2.5. insert-logo 插入logo

2.6. search-pro 高級搜索（支持中文）

2.7. advanced-emoji 支持emoji表情

2.8. github 在右上角添加github圖標

2.9. emphasize 為文字加上底色

2.10. splitter 側邊欄寬度可調節

2.11. sharing-plus 分享

2.12. 頁腳、版權信息

2.12.1. tbfed-pagefooter 頁面添加頁腳（內容少）

2.12.2. page-copyright 頁面頁腳版權（內容多）

2.13. sectionx 將頁面分塊顯示

2.14. 生成頁內目錄

2.14.1. page-treeview 生成頁內目錄

2.14.2. simple-page-toc 生成本頁目錄

2.15. 懸浮目錄

2.15.1. page-toc-button 懸浮目錄

2.15.2. ancre-navigation 懸浮目錄和回到頂部

2.16. klipse 嵌入類似IDE的功能

2.17. donate 打賞插件

2.18. change_girls 可自動切換的背景

2.19. 警報

2.19.1. alerts 警報

2.19. flexible-alerts 警報

2.20. pageview-count 閱讀量計數

2.21. auto-scroll-table 表格滾動條

2.22. 查看圖片

2.22.1. popup 彈出大圖

2.22. lightbox 單擊查看圖片

2.23. click-reveal 點擊顯示

2.24. custom-favicon 修改標題欄圖標

2.25. accordion 折疊模塊

2.26. hide-element 隱藏元素

免責聲明！