一、插件安装
1.根据book.json属性plugins安装项目插件
gitbook install
2.根据插件名称进行单个安装
npm install gitbook-plugin-插件名
二、插件注入及插件属性配置
1. 插件注入(示例)
"plugins":["code"]
2. 插件属性配置(示例)
"pluginsConfig": {
"code": {
"copyButtons": true
}
}
三、自带默认插件
- highlight: 代码高亮
- search: 导航栏查询功能(不支持中文)
- sharing:右上角分享功能
- font-settings:字体设置(最上方的"A"符号)
- livereload:为GitBook实时重新加载
[info] 如果要去除自带的插件,可以在插件名称前面加”-“;如"-search"
四、常用插件
1. pageview-count:阅读量计数
安装命令
npm install gitbook-plugin-pageview-count
注入插件
"pageview-count"
2.back-to-top-button:返回顶部按钮
安装命令
npm install gitbook-plugin-back-to-top-button
注入插件
"back-to-top-button"
3. 可折叠菜单
3.1 chapter-fold
安装命令
npm install gitbook-plugin-chapter-fold
注入插件
"chapter-fold"
3.2 expandable-chapters-small
安装命令
npm install gitbook-plugin-expandable-chapters-small
注入插件
"expandable-chapters-small"
3.3 expandable-chapters
安装命令
npm install gitbook-plugin-expandable-chapters
注入插件
"expandable-chapters"
4. donate:打赏插件
安装命令
npm install gitbook-plugin-donate
注入插件
"donate"
插件配置
"donate": {
"wechat": "微信收款二维码URL",
"alipay": "支付宝收款二维码URL",
"title": "打赏模块标题",
"button": "打赏按钮",
"alipayText": "支付宝打赏",
"wechatText": "微信打赏"
}
5. search-pro:高级搜索(支持中文
安装命令
npm install gitbook-plugin-search-pro
注入插件
"-lunr", "-search", "search-pro"
6. sharing-plus:分享
安装命令
npm install gitbook-plugin-sharing-plus
注入插件
"-sharing", "sharing-plus"
插件配置
"sharing": {
"douban": false,
"facebook": false,
"google": true,
"hatenaBookmark": false,
"instapaper": false,
"line": true,
"linkedin": true,
"messenger": false,
"pocket": false,
"qq": false,
"qzone": true,
"stumbleupon": false,
"twitter": false,
"viber": false,
"vk": false,
"weibo": true,
"whatsapp": false,
"all": [
"douban", "facebook", "google", "hatenaBookmark",
"instapaper", "linkedin","twitter", "weibo",
"messenger","qq", "qzone","viber","vk","weibo",
"pocket", "stumbleupon","whatsapp"
]
}
其他
/**
* 插件配置具体说明
* true:代表直接显示在页面顶端;false:不显示,不写默认为false
* "all"中代表点击分享符号显示出来的支持网站
*/
/**
* 添加其他分享
* 插件中在buttons.js中SITES={...}添加对应的分享
* 插件中package.json添加分享的网站配置信息
*/
7. 代码块复制
7.1 code:行号和复制按钮
安装命令
npm install gitbook-plugin-code
注入插件
"code"
插件配置
"code": {
"copyButtons": false
}
7.2 copy-code-button:复制按钮
安装命令
npm install gitbook-plugin-copy-code-button
注入插件
"copy-code-button"
8. splitter:侧边栏可调节宽度
安装命令
npm install gitbook-plugin-splitter
注入插件
"splitter"
9. 页脚、版权信息
9.1 tbfed-pagefooter:页脚(内容少)
安装命令
npm install gitbook-plugin-tbfed-pagefooter
注入插件
"tbfed-pagefooter"
插件配置
"tbfed-pagefooter": {
"copyright":"Copyright © zhangjikai.com 2017",
"modify_label": "该文件修订时间:",
"modify_format": "YYYY-MM-DD HH:mm:ss"
}
9.2 page-copyright:页脚和版权(内容多)
安装命令
npm install gitbook-plugin-page-copyright
注入插件
"page-copyright"
插件配置
"page-copyright": {
"description": "modified at",
"signature": "你的签名",
"wisdom": "Designer, Frontend Developer & overall web enthusiast",
"format": "YYYY-MM-dd hh:mm:ss",
"copyright": "Copyright © 你的名字",
"timeColor": "#666",
"copyrightColor": "#666",
"utcOffset": "8",
"style": "normal",
"noPowered": false,
}
10. hide-element:隐藏元素
安装命令
npm install gitbook-plugin-custom-favicon
注入插件
"hide-element"
插件配置
"hide-element": {
"elements": [".gitbook-link"]
}
11. 警报块
11.1 alerts
安装命令
npm install gitbook-plugin-alerts
注入插件
"alerts"
使用格式
> **[type] 简述**
>
> 内容部分
type
info 信息
warning 警告
danger 危险
success 成功
11.2 flexible-alerts
安装命令
npm install gitbook-plugin-flexible-alerts
注入插件
“flexible-alerts”
使用格式
> [!type|style:xx|label:xx|icon:xx|className:xx|labelVisibility:xx|iconVisibility:xx]
> 内容部分
键 | 允许的值 | 说明 |
---|---|---|
!type | NOTE,TIP,WARNING和DANGER | 警告级别设置 |
style | 以下值之一: callout(默认), flat | 警告样式 |
label | 任何文字 | 警告块的标题位置,即Note这个字段位置(不支持中文) |
icon | 比如: fa fa-info-circle | 一个有效的Font Awesome图标,那块小符号 |
className | CSS类的名称 | 指定css文件,用于指定外观 |
labelVisibility | 以下值之一:visible(默认),hidden | 标签是否可见 |
iconVisibility | 以下值之一:visible(默认),hidden | 图标是否可见 |
12. change_girls:自动切换背景
安装命令
npm install gitbook-plugin-change_girls
注入插件
"change_girls"
插件配置
"change_girls" : {
"time" : 10,
"urls" : [
"girlUrl1", "girlUrl2",...""
]
}
13. sectionx:模块
安装命令
npm install gitbook-plugin-sectionx
注入插件
"sectionx"
方式一:直接使用
<!--sec data-title="标题2" data-id="section0" data-show=true ces-->
内容部分2;
<!--endsec-->
方式二:添加按钮
<button class="section" target="section2" show="显示模块2" hide="隐藏模块2"></button>
<!--sec data-title="模块2" data-id="section2" data-show=true ces-->
内容部分2
<!--endsec-->
插件参数
参数 | 说明 |
---|---|
data-title | 该部分的标题,它将显示为bootstrap面板的标题(大小为h2)。请注意,您不能使用"标题中的字符,请"改用。 |
data-id | 章节的id,对按钮控制很有用(在下一节中讨论)。 |
data-show | 默认表示面板内容是否可见的布尔值。true:默认情况下,面板内容对用户可见,面板标题可以单击。false:默认情况下,面板内容对用户隐藏,面板 标题不可点击,只能通过添加自定义按钮查看(在下一节中讨论)。 |
data-nopdf | 一个布尔值,表示该部分是否将隐藏在pdf导出中。true:面板不会显示在.pdf或.epub中。 |
data-collapse | 一个布尔值,表示默认情况下是否打开(但仍然可见)该部分。true:默认情况下,面板内容对用户可见,但已关闭false:默认情况下,面板内容对用户可见,但已打开(默认设置)。 |
按钮属性
属性 | 说明 |
---|---|
class | 该按钮必须属于类“section”。//这里就是用到 1部分的section |
target | 当按下时,将切换id为target的部分。 |
show | 隐藏目标部分时按钮上的文本。 |
hide | 目标部分可见时按钮上的文本。 |
14. todo:代办项
安装命令
npm install gitbook-plugin-todo
注入插件
"todo"
使用示例
* [ ] 代办项
* [x] 已办项
样式修改:styles/website.css
input[type=checkbox]{
margin-left: -2em;
}
15. insert-logo:导航栏上方logo
安装命令
npm install gitbook-plugin-insert-logo
注入插件
"insert-logo"
插件配置
"insert-logo": {
"url": "img/logo.png",
"style": "background: none; max-height: 30px; min-height: 30px"
}
16. advanced-emoji:emoji表情
安装命令
npm install gitbook-plugin-advanced-emoji
注入插件
"advanced-emoji"
使用示例({% em color="#ff0000" %}使用忽略示例的 // {% endem %})
//:bowtie::smile:
17. emphasize:高亮
安装命令
npm install gitbook-plugin-emphasize
注入插件
"emphasize"
使用示例
This text is {% em %}highlighted !{% endem %}
This text is {% em %}highlighted with **markdown**!{% endem %}
This text is {% em type="green" %}highlighted in green!{% endem %}
This text is {% em type="red" %}highlighted in red!{% endem %}
This text is {% em color="#ff0000" %}highlighted with a custom color!{% endem %}
18. github:右上角添加github链接图标
安装命令
npm install gitbook-plugin-github
注入插件
"github"
插件配置
"github": {
"url": "https://github.com/zhangchaowei"
}
19. 页内目录
19.1 page-treeview:生成所有目录
安装命令
npm install gitbook-plugin-page-treeview
注入插件
"page-treeview"
插件配置
"page-treeview": {
"copyright": "Copyright © aleen42",
"minHeaderCount": "2",
"minHeaderDeep": "2"
}
19.2 simple-page-toc:生成指定目录
安装命令
npm install gitbook-plugin-simple-page-toc
注入插件
"simple-page-toc"
插件配置
"simple-page-toc": {
"maxDepth": 3,
"skipFirstH1": true
}
名称 | 默认 | 描述 |
---|---|---|
maxDepth | 3 | 使用深度最多为maxdepth的标题 |
skipFirstH1 | true | 排除文件中的第一个h1级标题 |
20. 悬浮目录
20.1 page-toc-button:悬浮目录
安装命令
npm install gitbook-plugin-page-toc-button
注入插件
"page-toc-button"
插件配置
"page-toc-button": {
"maxTocDepth": 2,
"minTocSize": 2
}
名称 | 默认 | 描述 |
---|---|---|
maxTocDepth | 2 | 标题的最大深度(2 = h1 + h2 + h3)。不支持值> 2 |
minTocSize | 2 | 显示toc按钮的最小toc条目数 |
20.2 ancre-navigation:悬浮目录和回到顶部按钮
安装命令
npm install gitbook-plugin-ancre-navigation
注入插件
"ancre-navigation"
21. klipse:嵌入类似IDE的功能
安装命令
npm install gitbook-plugin-klipse
注入插件
"klipse"
使用示例
```eval-python
print [x +1 for x in range(10)]
22. auto-scroll-table:表格滚动条
安装命令
npm install gitbook-plugin-auto-scroll-table
注入命令
"auto-scroll-table"
23. 查看图片
23.1 popup:弹出图片预览窗口(图片放大)
安装命令
npm install gitbook-plugin-popup
注入插件
"popup"
23.2 lightbox:弹出图片预览窗口(图片不变)
安装命令
npm install gitbook-plugin-lightbox
注入插件
"lightbox"
24. click-reveal:点击显示块
安装命令
npm install gitbook-plugin-click-reveal
注入插件
"click-reveal"
使用示例
{% reveal text="点击显示" %}
要被隐藏的内容
{% endreveal %}
使用示例(支持html写法)
<div class="click_reveal">
<span> 点击显示 </span>
<div><pre><code>隐藏的文字</code></pre></div>
</div>
25. custom-favicon:修改标题图标ico
安装命令
npm install gitbook-plugin-custom-favicon
注入插件
"custom-favicon"
插件配置
"favicon": "img/favicon.ico"
26. accordion:折叠模块(手风琴)
安装命令
npm install gitbook-plugin-accordion
注入插件
"accordion"
使用示例
%accordion%模块标题%accordion%
内容部分
%/accordion%
27. changyan:畅言评论
安装命令
npm install gitbook-plugin-changyan
注入插件
"changyan"
插件配置
"changyan": {
"appid": "畅言项目appid"
}
28. fbqx:填空表单
安装命令
npm install gitbook-plugin-fbqx
注入插件
"fbqx"
使用示例
{%fbq%}
Testing. Please type $$hello## (hello) and $$world## (world).
{%endfbq%}
29. 其他
- api:编写 API 文档
- theme-api:编写 API 文档
- mygitalk:gitalk评论插件
- theme-default:gitbook默认主题
- autotheme:自动换肤
- fontsettings:默认的字体、字号、颜色设置
- prism:代码高亮
- github-buttons:显示 github 仓库的star和fork按钮
- ga:添加 Google 统计代码
- sitemap:生成站点地图
- baid:使用百度统计
- anchors:标题带有 github 样式的锚点
- anchor-navigation-ex:插件锚导航-EX
- katex:使用KaTex进行数学排版
- editlink:内容顶部显示编辑本页链
- ad:在每个页面顶部和底部添加广告或任何自定义内容
- image-captions:抓取内容中图片的alt或title属性,在图片下面显示标题
- chart:使用 C3.js 图表
- styles-sass:使用 SASS 替换 CSS
- styles-less:使用 LESS 替换 CSS
- disqus:添加 disqus 评论插件
- latex-codecogs:使用数学方程式
- mermaid:使用流程图
- atoc:插入 TOC 目录
- ace:插入代码高亮编辑器
- mcqx:交互式多选插件
- include-codeblock:通过引用文件插入代码
- spoiler:隐藏答案,当鼠标划过时才显示
- anchor-navigation:锚点导航
- youtubex:插入 YouTube 视频
- redirect:重定向页面跳转
- duoshuo:使用多说评论
- jsfiddle:插入 JSFiddle 组件
- jsbin:插入 JSBin 组件
- Puml:使用 PlantUML 展示 uml 图
- Graph:使用 function-plot 绘制数学函数图
- Todo:添加 Todo 功能
- include-csv:展示 csv 文件内容
- musicxml:支持 musicxml 格式的乐谱渲染
- versions-select:添加版本选择的下拉菜单,针对文档有多个版本的情况
- rss:添加 rss 订阅功能
- multipart:将书籍分成几个部分
- url-embed:嵌入动态内容
网友评论