GitBook使用教程(插件篇)

在上一章Gitbook入门教程中,我们简单介绍了如何搭建自己的电子书站点并在本地浏览器上浏览。这一章,我们的主要内容涉及一些更高级的玩法。

复杂目录结构

添加book.json实现更丰富配置

上面讲到多级目录的编写,主要就是在SUMMARY.md文件中设置好目录之间的嵌套关系,不过就算按照上面的步骤来操作的话,你会发现并没有实现目录折叠的功能。为什么呢?有两个原因:

  • Gitbook本身是npm下的插件
  • Gitbook下的目录折叠功能需要另外的插件支持

是不是很绕?简单地说就算,要想实现更加复杂的功能,我们在根目录下必须有一个book.json文件,这个文件内容是个json对象,里面配置了我们工程的基础信息和依赖的第三方插件信息。

这个book.json文件作用类似于package.json,前端开发工程师很容易理解。我们在mywebsite文件根目录下新建一个book.json文件。新建文件后编辑book.json内容如下:

{
    "title" : "我的学习笔记",
    "author" : "myname",
    "description" : "日常工作中用到的一些技术总结",
    "language" : "zh-hans"
}

保存这个配置文件后,重新运行项目:

gitbook serve

再试试浏览器上的效果,网页上是不是显示标题了呢?

下面我们讲解一下如何在book.json里面添加三方插件,为我们提供更加丰富的功能样式

导航折叠

如果我们希望在导航栏里添加多级目录,并且能够实现多级目录的展开或者折叠功能,那么需要安装一个插件,在上面的book.json中添加expandable-chapters-small插件就可以,配置如下:

{
    "title" : "我的学习笔记",
    "author" : "myname",
    "description" : "日常工作中用到的一些技术总结",
    "language" : "zh-hans",
    "plugins": [
        "expandable-chapters-small"
    ]
}

编辑配置文件后保存,然后运行安装插件的命令:

gitbook install

安装完成后,重新运行gitbook serve命令,看看是不是可以折叠菜单了呢?

导航栏宽度伸缩插件

GitBook默认的导航栏宽度是固定的,也就是说如果在md文件中显示的标题文字很长的话会在导航栏菜单中显示不全,这样的效果当然不好,这种情况下我们需要安装一个叫做splitter的插件,配置信息如下:

{
    "title" : "我的学习笔记",
    "author" : "myname",
    "description" : "日常工作中用到的一些技术总结",
    "language" : "zh-hans",
    "plugins": [
            "expandable-chapters-small",
            "splitter"
    ]
}

自己可以运行'gitbook install'和gitbook serve后查看导航栏的宽度是否可以拉伸。

中文搜索

GitBook在网页左上角有搜索框,能支持站点的全局内容搜索,使用起来非常方便,不过还不能支持中文搜索,如果需要支持中文全局搜索的话,需要添加search-pro三方插件,修改book.json配置如下:

{
    "title" : "我的学习笔记",
    "author" : "myname",
    "description" : "日常工作中用到的一些技术总结",
    "language" : "zh-hans",
    "plugins": [
            "expandable-chapters-small",
            "splitter",
            "-lunr", 
            "-search", 
            "search-pro"
    ]
}

运行install命令后,在搜索框输入中文,验证一下是否可以全局搜索中文内容了呢?

复制代码

很多博客在显示代码块的时候都会提供复制代码功能,我们也可以在GitBook中实现这个功能,需要引入copy-code-button插件,修改配置文件如下:

{
    "title" : "我的学习笔记",
    "author" : "myname",
    "description" : "日常工作中用到的一些技术总结",
    "language" : "zh-hans",
    "plugins": [
            "expandable-chapters-small",
            "splitter",
            "-lunr", 
            "-search", 
            "search-pro",
            "copy-code-button"
    ]
}

添加一段代码块后运行'gitbook install'和gitbook serve,查看代码块右上角是否显示复制代码的黑色按钮。

回到顶部

这个插件在网页上显示一个向上的箭头图标,用来回滚到页面顶部,如果需要引入这个插件,修改配置文件如下:

{
    "title" : "我的学习笔记",
    "author" : "myname",
    "description" : "日常工作中用到的一些技术总结",
    "language" : "zh-hans",
    "plugins": [
            "expandable-chapters-small",
            "splitter",
             "-lunr", 
            "-search", 
            "search-pro",
            "copy-code-button",
            "back-to-top-button"
    ]
}

运行'gitbook install'和gitbook serve,查看网页底部是否多了一个箭头图标,点击能否回到页面顶部。

Github链接插件

如果我们在自己的GitBook站点上放一个自己的GitHub链接地址和logo的话,只需要在上面的book.json中添加github插件就可以,配置如下:

{
    "title" : "我的学习笔记",
    "author" : "myname",
    "description" : "日常工作中用到的一些技术总结",
    "language" : "zh-hans",
    "plugins": [
            "github", 
            "expandable-chapters-small",
            "splitter",
            "-lunr", 
            "-search", 
            "search-pro",
            "copy-code-button",
            "back-to-top-button"
    ],
    "pluginsConfig": {
            "github": {
                "url": "https://github.com/username"
            }
    }
}

编辑配置文件后保存,然后运行安装插件的命令:

gitbook install

安装完成后,重新运行gitbook serve命令看看页面右上角是不是有了一个GitHub链接地址,点击一下看看是否跳转到你所配置的网页链接。

社交分享插件

添加版权信息

版权插件能在我们网页的底部显示一行版权声明,显示效果如图:

如果需要实现以上功能,只需要在上面的book.json中添加tbfed-pagefooter插件就可以,配置如下:

{
    "title" : "我的学习笔记",
    "author" : "myname",
    "description" : "日常工作中用到的一些技术总结",
    "language" : "zh-hans",
    "plugins": [
            "github", 
            "expandable-chapters-small",
            "splitter",
            "-lunr", 
            "-search", 
            "search-pro",
            "copy-code-button",
            "back-to-top-button",
            "tbfed-pagefooter"
    ],
    "pluginsConfig": {
            "github": {
                "url": "https://github.com/username"
            },
            "tbfed-pagefooter": {
                "copyright":"版权所有,盗版必究",
                "modify_label": "Last Modified On:",
                "modify_format": "YYYY-MM-DD HH:mm:ss"
            }
    }
}

页面浏览量统计

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 196,099评论 5 462
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 82,473评论 2 373
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 143,229评论 0 325
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,570评论 1 267
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,427评论 5 358
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,335评论 1 273
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,737评论 3 386
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,392评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,693评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,730评论 2 312
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,512评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,349评论 3 314
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,750评论 3 299
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,017评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,290评论 1 251
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,706评论 2 342
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,904评论 2 335

推荐阅读更多精彩内容

  • 1、简介 GitBook 是一个基于 Node.js 的命令行工具,可使用 Github/Git 和 Markdo...
    IT人仕阅读 1,730评论 0 1
  • 毛清姣 焦点中级二期 2018年12月30日 坚持分享第889天 昨天下午,我们早早的把学生送走,接下来...
    Emily626阅读 1,227评论 0 0
  • 我是一个五年制临床医学本科毕业生,由于工作和个人原因,近期一直感觉到胃不舒服,于是就去医院门诊看病。这是我第一次做...
    雕兄_KYP阅读 3,340评论 2 5
  • 今日分享: Happiness has something to do with struggling and e...
    木子姐陪伴成长阅读 182评论 0 0
  • 晚安AD钙奶 晚安我的童年 我在慢慢长大 慢慢学习 一点点吸收 虽然很痛苦 但我相信我会更优秀 生活更美好。
    哈喽摩托呦呦呦阅读 452评论 0 0