前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Gitbook安装使用笔记(二)实用配置和插件

Gitbook安装使用笔记(二)实用配置和插件

作者头像
公爵
发布2022-09-28 14:00:54
1K0
发布2022-09-28 14:00:54
举报
文章被收录于专栏:公爵书房

介绍一下gitbookbook.json的一些实用配置和插件,详细可直接拉到底查看参考资料

配置概况

全局配置

title 标题

设置书本的标题。 在book.json中加入以下内容:

代码语言:javascript
复制
"title" : "Ruarua"

author 作者

作者的相关信息。 在book.json中加入以下内容:

代码语言:javascript
复制
"author" : "公爵"

description 描述

本书的简单描述。 在book.json中加入以下内容:

代码语言:javascript
复制
"description" : "记录Gitbook的配置和一些插件的使用"

language 语言

Gitbook使用的语言, 版本3.2.3中可选的语言如下: 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 例如,配置使用简体中文,在book.json中加入以下内容:

代码语言:javascript
复制
"language" : "zh-hans"

links 链接

在左侧导航栏添加链接信息

代码语言:javascript
复制
"links" : {
        "sidebar" : {
            "Home" : "https://www.baidu.com"
        }
    }

styles 样式

自定义页面样式, 默认情况下各generator对应的css文件

代码语言:javascript
复制
"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中设置

代码语言:javascript
复制
h1 , h2{
    border-bottom: 1px solid #EFEAEA;
}

插件列表 plugins

配置使用的插件

代码语言:javascript
复制
"plugins": [
    "-search",
    "back-to-top-button",
    "expandable-chapters-small",
    "insert-logo"
]

其中"-search"中的 - 符号代表去除默认自带的插件

Gitbook默认自带有5个插件:

  • highlight: 代码高亮
  • search: 导航栏查询功能(不支持中文)
  • sharing:右上角分享功能
  • font-settings:字体设置(最上方的”A”符号)
  • livereload:为GitBook实时重新加载

插件属性配置 pluginsConfig

配置插件的属性 例如配置insert-logo的属性:

代码语言:javascript
复制
"pluginsConfig": {
    "insert-logo": {
      "url": "images/logo.png",
      "style": "background: none; max-height: 30px; min-height: 30px"
    }
  }

GitBook常见插件

添加GitBook常见插件首先要在项目目录文件夹下添加book.json文件,然后在book.json中输入对应内容,并在项目目录下控制台输入gitbook install即可安装。

back-to-top-button 回到顶部

代码语言:javascript
复制
{
    "plugins": [
         "back-to-top-button"
    ]
}

toggle-chapters 折叠目录

默认只在目录导航中显示章的标题,而不会显示小节的标题,点击每一章或者每一节会显示当前章或节的子目录,如果有的话,但是同时会收起其它之前展开的章节。 在book.json中加入以下内容:

代码语言:javascript
复制
"plugins": ["toggle-chapters"]

hide-element 隐藏元素

可以用来隐藏不想看到的元素,例如隐藏GitBook默认提示:Published with GitBook ,在book.json中加入以下内容:

代码语言:javascript
复制
"plugins": [
    "hide-element"
  ],
  "pluginsConfig": {
	"hide-element": {
		"elements": [".gitbook-link"]
	}
  }

tbfed-pagefooter 添加页脚

在每个文章下面标注版权信息和文章时间。 在book.json中加入以下内容:

代码语言:javascript
复制
"plugins": [
    "tbfed-pagefooter"
  ],
  "pluginsConfig": {
	"tbfed-pagefooter": {
		"copyright": "Copyright &copy ruarua 2020",
		"modify_label": "该文章修订时间:",
		"modify_format": "YYYY-MM-DD",
	}
  }

sharing-plus 分享页面

GitBook默认只有Facebook、Google+、Twiter、Weibo、Instapaper,插件可以有更多分享方式,也可关闭指定分享方式。 在book.json中加入以下内容:

代码语言:javascript
复制
"plugins": [
    "-sharing","sharing-plus"
  ],
  "pluginsConfig": {
	"sharing": {
		  "facebook": "false",
		  "google": "false",
	      "twiter": "false",
		  "qq": "true",
		"all": [
			"facebook","google","twiter","qq"
		]
	}
  }

search-pro 高级搜索

搜索支持中英文,准确率更高。 在book.json中加入以下内容:

代码语言:javascript
复制
"plugins": [
    "-lunr","-search","search-pro"
  ]

insert-logo 插入logo

在左侧导航栏上方插入logo。 在book.json中加入以下内容:

代码语言:javascript
复制
"plugins": [
    "insert-logo"
  ],
  "pluginsConfig": {
	"insert-logo": {
		"url": "../assets/logo.png",
		"style": "background: none"
	}
  }

custom-favicon 修改标题栏图标

设置浏览器选项卡标题栏的小图标。 在book.json中加入以下内容:

代码语言:javascript
复制
"plugins": [
    "custom-favicon"
  ],
  "pluginsConfig": {
	"favicon": "assets/favicon.ico"
	}
  }

book.json 全部代码

这里是只是列了几个做个师范,可根据自己的需求选择安装的插件,并非全都要装

代码语言:javascript
复制
{
  "title" : "骑士指南",
  "author" : "公爵",
  "description" : "记录Gitbook的配置和一些插件的使用",
  "language" : "zh-hans",
  "plugins": [
	"toggle-chapters",
	"insert-logo",
	"-sharing",
	"hide-element",
	"tbfed-pagefooter",
	"-lunr",
	"-search",
	"search-pro",
	"custom-favicon"
  ],
  "pluginsConfig": {
    "tbfed-pagefooter": {
		"copyright": "Copyright &copy ruarua 2020",
		"modify_label": "该文章修订时间:",
		"modify_format": "YYYY-MM-DD"
	},
	"hide-element": {
		"elements": [".gitbook-link"]
	},
	"insert-logo": {
		"url": "../assets/logo.jpg",
		"style": "background: none"
	},
	"favicon": "assets/favicon.ico"
  }
}

最后

当按配置方法配置完成后,就可以愉快的开始使用gitbook了

参考资料

GitBook插件整理

GitBook文档(中文版)

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2022-05-13,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 配置概况
    • 全局配置
      • title 标题
      • author 作者
      • description 描述
      • language 语言
      • links 链接
      • styles 样式
      • 插件列表 plugins
      • 插件属性配置 pluginsConfig
    • GitBook常见插件
      • back-to-top-button 回到顶部
      • toggle-chapters 折叠目录
      • hide-element 隐藏元素
      • tbfed-pagefooter 添加页脚
      • sharing-plus 分享页面
      • search-pro 高级搜索
      • insert-logo 插入logo
      • custom-favicon 修改标题栏图标
    • book.json 全部代码
    • 最后
    • 参考资料
    领券
    问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档