主题插件
1.主题
Gitbook
提供了三种主题: Book文档
, API文档
, FAQ文档
- 默认是
Book文档
, 其他两种类型顾名思义
- 使用插件:
{
"plugins": [
"theme-comscore"
]
}
1.1.theme-default
theme-default
是默认的主题类型
- 但它是
黑白类型
的,所以一般会会用彩色主题: theme-comscore
theme-comscore
会为不同级别
的标题
添加颜色
API文档
, FAQ文档
因为没有使用, 在此不再赘述
2.插件
livereload
highlight
search
lunr
sharing
fontsettings
theme-default
2.1插件的安装
- 1.添加到
book.json
然后使用 gitbook install
安装 (不推荐)
- 2.使用
npm
安装: npm install plugin-name
2.2插件的禁用
- 如果想禁用默认插件, 在默认插件前面加
-
即可
- 禁用
sharing
{
"plugins": [
"-sharing"
]
}
2.3插件的配置
pluginsConfig
可以配置插件
的字段配置
2.4常用插件
- alerts 提示框的增强
- anchor 锚点
- chapter 菜单折叠
- code 代码行号、复制
- favicon 网站的小图标
- github 链接到github仓库
- pagefooter 页脚说明
- prism 代码着色
- search 增强中文搜索
- section 文本折叠
- sharing 分享增强
- splitter 菜单动态伸缩
- statistics 搜索引擎点击统计,百度统计,谷歌统计
- version 多版本选择
2.5参考
{
"plugins": [
"theme-comscore",
"chapter-fold",
"expandable-chapters",
"livereload",
"back-to-top-button",
"splitter",
"-lunr",
"-search",
"search-pro",
"insert-logo",
"custom-favicon",
"tbfed-pagefooter",
"prism",
"anchor-navigation-ex",
"summary"
],
"pluginsConfig": {
"insert-logo": {
"url": "/styles/images/icon.png",
"style": "background: none; max-height: 80px; min-height: 80px"
},
"favicon": "/styles/images/icon.png",
"tbfed-pagefooter": {
"copyright": "Copyright by <a href='https://www.skyne.cn'> SKYNE </a>",
"modify_label": " ",
"modify_format": "YYYY-MM-DD"
},
"anchor-navigation-ex": {
"showLevel": false,
"showGoTop": false
}
},
"styles": {
"website": "styles/website.css"
}
}
2.6自定义CSS
- 如果自己有
前端能力
还可以自己写css
来扩展主题
自带的
- 在
book.json
增加 styles
字段,并指定文件位置
{
"styles": {
"website": "styles/website.css",
"ebook": "styles/ebook.css",
"pdf": "styles/pdf.css",
"mobi": "styles/mobi.css",
"epub": "styles/epub.css"
}
}
- 自己不太喜欢主题自带的
灰色
的code
和目录样式
- 因此自己重新定义了样式
- 参考如下:
.book .book-body .page-wrapper .page-inner section.normal :not(pre)>code {
padding: 0.1em;
border-radius: 0.3em;
white-space: normal;
color: #f85353;
background-color: #e5e5e5;
}
.book-summary ul.summary li.header {
font-size: 1em;
padding: 0.1em;
font-weight: bolder;
color: #364149;
}