推薦12個實用的gitbook插件

➢ 安裝和使用插件方法

在根目錄下建立book.json

在該文件中按照指定格式插入如下插件對應的代碼。

安裝插件有兩種方式 ：

一種是在book.json寫入相應插件和配置後，

使用gitbook install安裝插件。

一種是使用npm install pluginName安裝，而後寫入配置

➢ hide-element 隱藏元素

主要用來隱藏不想看到的元素。

如：

默認的gitbook左側提示：Published with GitBook

使用方式： 在book.json中寫入如下內容

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

➢ back-to-top-button 回到頂部

當文章篇幅較長時，頁面底部會顯示按鈕，一鍵點擊自動回到頂部。

使用方式:

在book.json中寫入如下內容

{
    "plugins": [
         "back-to-top-button"
    ]
}複製代碼

➢ chapter-fold 導航目錄摺疊

gitbook默認目錄沒有摺疊效果。

使用方式： 在book.json中寫入如下內容

{
    "plugins": ["chapter-fold"]
}複製代碼

➢ code 複製代碼

在代碼域的右上角添加一個複製按鈕，點擊一鍵複製代碼。

使用方式：

在book.json中寫入如下內容

{
    "plugins" : [ "code" ]
}複製代碼

➢ splitter 側邊欄寬度可調節

左側目錄和右側文章能夠拖動調節寬度。

使用方式：

在book.json中寫入如下內容

{
    "plugins": [
        "splitter"
    ]
}複製代碼

➢ search-pro 高級搜索

支持中英文，準確率更高一些。

使用方式：

在book.json中寫入如下內容

{
    "plugins": [
          "-lunr", 
          "-search", 
          "search-pro"
    ]
}複製代碼

➢ insert-logo 插入logo

在左側導航欄上方插入logo。

使用方式： 在book.json中寫入如下內容

url支持本地圖片也支持網絡圖片連接

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

➢ custom-favicon 修改標題欄圖標

設置瀏覽器選項卡標題欄的小圖標。

使用方式：

在book.json中寫入如下內容

注意只支持ico後綴的圖片，而且只支持本地圖片，不支持網絡圖片連接。

{
    "plugins" : ["custom-favicon"],
    "pluginsConfig" : {
        "favicon": "icon/favicon.ico"
    }
}複製代碼

➢ pageview-count 閱讀量計數

記錄每一個文章頁面被訪問的次數。

使用方式：

在book.json中寫入如下內容

{
  "plugins": [ "pageview-count"]
}複製代碼

➢ tbfed-pagefooter 頁面添加頁腳

在每一個文章下面標註版權信息和文章時間。

使用方式：

在book.json中寫入如下內容

{
    "plugins": [
       "tbfed-pagefooter"
    ],
    "pluginsConfig": {
        "tbfed-pagefooter": {
            "copyright":"Copyright &copy dsx2016.com 2019",
            "modify_label": "該文章修訂時間：",
            "modify_format": "YYYY-MM-DD HH:mm:ss"
        }
    }
}複製代碼

➢ popup 彈出大圖

點擊能夠在新窗口展現圖片。

使用方式：

在book.json中寫入如下內容

{
  "plugins": [ "popup" ]
}複製代碼

➢ sharing-plus 分享當前頁面

gitbook默認只有Facebook、Google+、Twiter、Weibo、Instapaper

插件能夠有更多分享方式，也能夠關閉指定分享方式。

使用方式：

在book.json中寫入如下內容

{
    "plugins": ["-sharing", "sharing-plus"],
    "pluginsConfig": {
        "sharing": {
             "douban": true,
             "facebook": true,
             "google": true,
             "pocket": true,
             "qq": true,
             "qzone": true,
             "twitter": true,
             "weibo": true,
          "all": [
               "douban", "facebook", "google", "instapaper", "linkedin","twitter", "weibo", 
               "messenger","qq", "qzone","viber","whatsapp"
           ]
       }
    }
}複製代碼

➢ 綜合代碼

本文演示代碼配置book.json

{
    "plugins": [
        "back-to-top-button",
        "chapter-fold",
        "code",
        "splitter",
        "-lunr",
        "-search",
        "search-pro",
        "insert-logo",
        "custom-favicon",
        "pageview-count",
        "tbfed-pagefooter",
        "popup",
        "-sharing",
        "sharing-plus"
    ],
    "pluginsConfig": {
        "insert-logo": {
            "url": "https://file.smallzhiyun.com/%E4%B9%A6.png",
            "style": "background: none; max-height: 30px; min-height: 30px"
        },
        "favicon": "./icon/book.ico",
        "tbfed-pagefooter": {
            "copyright": "Copyright &copy dsx2016.com 2019",
            "modify_label": "該文章修訂時間：",
            "modify_format": "YYYY-MM-DD HH:mm:ss"
        },
        "sharing": {
            "douban": true,
            "facebook": true,
            "google": true,
            "pocket": true,
            "qq": true,
            "qzone": true,
            "twitter": true,
            "weibo": true,
            "all": [
                "douban",
                "facebook",
                "google",
                "instapaper",
                "linkedin",
                "twitter",
                "weibo",
                "messenger",
                "qq",
                "qzone",
                "viber",
                "whatsapp"
            ]
        }
    }
}複製代碼

安裝和使用