安装您的插件使用:
$ gitbook install
OR
$ npm i -D gitbook-plugin-theme-hqbook将主题添加到您的图书配置 book.json 或者 book.js中:
{
"plugins": [
"theme-hqbook"
]
}整体配置
{
"plugins": [
"theme-hqbook"
],
"variables": {
"themeHqbook":{
"nav":[
{
"url": "https://www.baidu.com",
"target": "_blank",
"name": "百度一下"
},
// { ... }
]
},
},
"pluginsConfig": {
"theme-hqbook":{
"favicon": "./favicon.ico",
"logo":"./logo.png",
"search-placeholder":"输入关键字搜索",
"copyButtons": true,
"copyLines": true,
"dragSplitter": true,
"hide-elements": [
".summary .gitbook-link"
],
"flexible-linkcard": {
"title": "flexible-linkcard",
"hrefUrl": "https://github.com/HaoqiangChen/gitbook-plugin-flexible-linkcard",
"target": "_blank",
"imgSrc": "./book/logo.png",
"imgClass": "rect"
}
}
}
}自定义favicon地址，修改标题栏图标
自定义logo地址，修改logo
搜索框提示信息
代码块添加复制按钮
当显示多行代码时，将添加行号
在左侧目录和右侧内容之间添加一个可以拖拽的栏，用来调整两边的宽度
隐藏元素，比如导航栏中Published by GitBook
顶部导航栏，nav为数组，将需要的导航添加到变量themeHqbook中
title: 定义flexible-linkcard的默认标题hrefUrl: 定义flexible-linkcard的默认网址target: 定义flexible-linkcard的网址默认打开方式，即HTML<a>的target属性，属性值有_seft,_blank,_parent,_top几种，最好还是设置_blank新窗口打开imgSrc: 定义flexible-linkcard的默认显示图片imgClass: 定义flexible-linkcard的默认图片样式
新增几个代码高亮样式，配合prism插件使用
- prism-atom-dark.css
- prism-ghcolors.css
- prism-vs.css
- prism-xonokai.css
{
"pluginsConfig": {
"prism": {
"css": [
"gitbook-plugin-theme-hqbook/_themes/prism-xonokai.css"
]
},
}
}plugins: [
"-highlight",
"-lunr",
"-search",
"theme-hqbook",
"chapter-fold",
"flexible-alerts",
"lightbox",
"prism",
"search-pro"
//...
]
- fix:
flexible-linkcard插件样式调整
- fix: 新增
flexible-linkcard插件，以特定语法美化<a>链接，制成漂亮的链接卡片
- fix: 新增在左侧目录和右侧内容之间添加一个可以拖拽的栏，用来调整两边的宽度
- fix: 新增代码添加行号&复制按钮
- fix: 修复上个版本忘记git add
_theme文件夹
- fix: 新增几个代码高亮样式，配合
prism插件使用
- fix: 修改默认滚动条样式
- fix: 新增返回顶部按钮
- fix: 新增右侧标题导航栏
- 创建和发布自开发Gitbook主题 theme-hqbook
hqbook gitbook theme flexible-linkcard prism Syntax Highlighting
Copyright (c) 2016-present, HaoqiangChen