Skip to content

gitbook

http://www.zhaowenyu.com/gitbook-doc

环境

node 10

安装

npm install -g gitbook-cli

其他命令

# 测试页面
gitbook serve
# 生成页面
gitbook build

常用插件

https://www.zhaowenyu.com/gitbook-doc/plugins/cat-article-content.html

https://www.jianshu.com/p/09bf890ec8f6

https://juejin.cn/post/6844903865146441741

插件开发教程

https://snowdreams1006.github.io/gitbook-official/en/plugins/testing.html

hide-element 隐藏元素

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

splitter 侧边栏宽度可调节

{
    "plugins": [
        "splitter"
    ]
}

search-pro 高级搜索

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

插件

plantuml

集成 plantuml 插件

参考 http://skyao.github.io/2015/11/25/gitbook-plantuml-plugin/

安装gitbook-plugin-plantuml

修改package.json文件,增加一个gitbook-plugin-plantuml插件.

“gitbook-plugin-plantuml”: “~0.0.15”

"devDependencies": {
    ......
    "gitbook-plugin-plantuml":  "~0.0.15"
},
然后执行命令:

npm install .

也可以一次性执行命令:

npm install gitbook-plugin-plantuml –save

设置book.json

在book.json中增加plugins设置:

{
    "plugins": ["plantuml"],
}
下载plantuml.jar

从官网download页面下载到plantuml.jar文件, 放到项目根目录下

创建目录/assets/images/uml

使用插件
在需要插入planttuml图片的地方, 插入plantuml内容 (注意要放在类型为uml的代码块中):


@startuml
a -> b
@enduml
之后执行gitbook server或者grunt test命令, 生成gitbook的html内容时, 这里的plantuml内容就会被转换为uml图片,然后替换对应的plantuml文本内容.

这样我们就可以在文章内容中直接书写plantuml内容, 然后自动得到对应的图片, 非常方便.

子页面不能显示原因分析及解决

打开插件index.js

此段代码表示只能解析一二级目录的图片

assetPath = '../assets/images/uml/' + chapterPath + '/'

稍作修改使之能解析多级

let assetPathPre = '../'.repeat(pathToken.length - 1)
assetPath = assetPathPre + 'assets/images/uml/' + chapterPath + '/'

现在下面的示例就能显示了

示例

@startuml
a -> b
@enduml

为什么不能用？

@startuml

    Class Stage
    Class Timeout {
        +constructor:function(cfg)
        +timeout:function(ctx)
        +overdue:function(ctx)
        +stage: Stage
    }
    Stage <|-- Timeout

@enduml

bug

Error: ENOENT: no such file or directory, stat ‘C:\Users\Lenovo\www\mdspg\md\mybook_book\gitbook\gitbook-plugin-fontsettings\fontsettings.js’

解决方式

用户目录下找到以下文件。 .gitbook\versions\3.2.3\lib\output\website\copyPluginAssets.js

Replace all

confirm: true

with

confirm: false

常用插件

+-- gitbook-plugin-import@0.0.4
+-- gitbook-plugin-3-ba@0.9.0
+-- gitbook-plugin-anchor-navigation-ex@1.0.14
+-- gitbook-plugin-back-to-top-button@0.1.4
+-- gitbook-plugin-code@0.1.0
+-- gitbook-plugin-disqus@0.1.0
+-- gitbook-plugin-ga@1.0.1
+-- gitbook-plugin-github@2.0.0
`-- gitbook-plugin-search-plus@1.0.3

拓展阅读

  • 如何开发插件g https://snowdreams1006.github.io/gitbook-official/en/plugins/create.html

Comments