安装您的插件使用:
$ 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