Gitbook常用插件合集

一、書本配置

1. 書本標(biāo)題：title

    "title" : "This Gitbook"

2. 作者：author

    "author" : "Monky"

3. 簡單描述：description

    "description" : "記錄Gitbook插件配置和使用方法"

4. 語言：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"

5. 左側(cè)導(dǎo)航欄添加鏈接信息：links

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

6. 自定義頁面樣式

  • 默認(rèn)情況下各generator對應(yīng)的css文件
    "styles": {
        "website": "styles/website.css",
        "ebook": "styles/ebook.css",
        "pdf": "styles/pdf.css",
        "mobi": "styles/mobi.css",
        "epub": "styles/epub.css"
    }
  • 例如使 <h1> <h2>標(biāo)簽有下邊框， 可以在website.css中設(shè)置
    h1 , h2{
        border-bottom: 1px solid #EFEAEA;
    }

二、插件配置

1. 配置使用的插件

    "plugins": [
        "-search", "-share"
        "back-to-top-button",
        "expandable-chapters-small",
        "insert-logo"
    ]
    
    
    其中"-search"中的 - 符號代表去除插件
  • Gitbook默認(rèn)自帶有5個插件：
    • highlight： 代碼高亮
    • search： 導(dǎo)航欄查詢功能（不支持中文）
    • sharing：右上角分享功能
    • font-settings：字體設(shè)置（頁面頂部的"A"符號）
    • livereload：為GitBook實時重新加載（不建議）

2. 插件屬性配置pluginsConfig

  • 配置插件的屬性，例如配置 tbfed-pagefooter(頁腳插件) 的屬性：
    "plugins": [
       "tbfed-pagefooter"
    ],

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

三、常用插件

  • 用法：在book.json中添加 "plugins" 和 "pluginConfig" 字段。然后執(zhí)行 gitbook install，或者使用NPM安裝npm install gitbook-plugin-插件名，也可以從源碼GitHub地址中下載，放到 node_modules文件夾里。

1. 回到頂部：back-to-top-button 

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

2. 導(dǎo)航目錄折疊

  • 插件1：chapter-fold 
    "plugins": [
        "chapter-fold"
    ]

注意：要想目錄折疊，SUMMARY.md目錄應(yīng)該如下：

    * [引言](README.md)
    
    * [第一章](book/season1/season1.md)
        * [第一節(jié)](book/season1/chapter1.md)
        * [第二節(jié)](book/season1/chapter2.md)
    * [第二章](book/season2/season2.md)
        * [第一節(jié)](book/season2/chapter1.md)
        * [第二節(jié)](book/season2/chapter2.md)

如下寫法會產(chǎn)生bug，點擊目錄無法展開列表:

    * [第一章]
        * [第一節(jié)](book/season1/chapter1.md)
        * [第二節(jié)](book/season1/chapter2.md)
  • 插件2：expandable-chapters 
    "plugins": [
        "expandable-chapters"
    ]

注意：如下寫法，需要點擊箭頭才能展開收縮目錄：

    * [第一章](book/season1/season1.md)
        * [第一節(jié)](book/season1/chapter1.md)
        * [第二節(jié)](book/season1/chapter2.md)

建議：和chapter-fold插件一起用：

    "plugins": [
        "expandable-chapters",
        "chapter-fold",
    ]

3. 側(cè)邊欄(側(cè)邊目錄)寬度可調(diào)節(jié)：splitter 

    "plugins": [
        "splitter"
    ]

4. 查看圖片

  • 新標(biāo)簽頁打開圖片，查看原圖：popup 
    "plugins": [
        "popup"
    ]
  • 以彈窗形式查看圖片，查看原圖：lightbox 
    "plugins": [
        "lightbox"
    ]

5. 頁面內(nèi)導(dǎo)航目錄

  • 在頁面頂部顯示目錄：page-treeview 
    "plugins": [
        "page-treeview"
    ]
  • 頁面內(nèi)生成懸浮導(dǎo)航目錄：anchor-navigation-ex 
    "plugins": [ 
        "anchor-navigation-ex"
    ],
    "pluginsConfig": {
        "anchor-navigation-ex": {
            "showLevel": false,     // 標(biāo)題是否顯示標(biāo)題層級序號
            "showGoTop": false      // 是否顯示返回頂部按鈕
        },
    }
  • 頁面右上角生成黑色的按鈕，鼠標(biāo)移入后會顯示黑色的目錄：page-toc-button
    建議：該插件與“back-to-top-button(回到頂部)”一起使用，可實現(xiàn)快速定位。
    "plugins": [ 
        "page-toc-button"
    ],

    "pluginsConfig": {
        "page-toc-button": {
            "maxTocDepth": 2,  // 標(biāo)題的最大深度（2 = h1 + h2 + h3）。不支持值> 2。
            "minTocSize": 2    // 顯示toc按鈕的最小toc條目數(shù)。
           }
    }
  • 頁面右上角懸浮導(dǎo)航以及回到頂部按鈕：ancre-navigation 
    "plugins": [
        "ancre-navigation"
    ]

6. 修改網(wǎng)站圖標(biāo)，瀏覽器標(biāo)簽欄上的小圖標(biāo)和保存后書簽的圖標(biāo)

  • 注意：
    1、圖標(biāo)的格式一定要是.ico的，直接修改圖片的后綴為.ico是無效的。
    2、圖標(biāo)的分辨率要是32x32的。
  • 插件1：favicon 
    "plugins": [
        "favicon"
    ],

    "pluginsConfig": {
        "favicon": {
            "shortcut": "file/favicon.ico",
            "bookmark": "file/favicon.ico",
        }
    }
  • 插件2：custom-favicon 
    "plugins": [
        "custom-favicon"
    ],
    
    "pluginsConfig" : {
        "favicon": "file/favicon.ico"
    }

7. 頁面添加頁腳，包含版本信息和文檔最后修訂時間：tbfed-pagefooter 

    "plugins": [
       "tbfed-pagefooter"
    ],

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

8. 隱藏元素，元素可以通過檢查頁，查找對應(yīng)的class獲取：hide-element 

    "plugins": [
        "hide-element"
    ],

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

9. 在左側(cè)欄上方插入公司/團隊logo：insert-logo 

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

10. 高級搜索（支持中文）：search-pro，需要將默認(rèn)的search和lunr 插件去掉

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

11. 閱讀量計數(shù)：pageview-count 

    "plugins": [
        "pageview-count"
    ]
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。
禁止轉(zhuǎn)載，如需轉(zhuǎn)載請通過簡信或評論聯(lián)系作者。

友情鏈接更多精彩內(nèi)容