六、gitbook插件

2020-02-26 本文已影响0人爱发抖的小喵喵

一、插件安装

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 &copy 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 &#169; 你的名字",
    "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:

emoji表情列表

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 &#169; 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:嵌入动态内容

六、gitbook插件

一、插件安装

1.根据book.json属性plugins安装项目插件

2.根据插件名称进行单个安装

二、插件注入及插件属性配置

1. 插件注入(示例)

2. 插件属性配置(示例)

三、自带默认插件

四、常用插件

1. pageview-count:阅读量计数

2.back-to-top-button:返回顶部按钮

3. 可折叠菜单

4. donate:打赏插件

5. search-pro：高级搜索（支持中文

6. sharing-plus:分享

7. 代码块复制

8. splitter：侧边栏可调节宽度

9. 页脚、版权信息

10. hide-element：隐藏元素

11. 警报块

12. change_girls:自动切换背景

13. sectionx:模块

14. todo:代办项

15. insert-logo:导航栏上方logo

16. advanced-emoji:emoji表情

17. emphasize:高亮

18. github:右上角添加github链接图标

19. 页内目录

20. 悬浮目录

21. klipse:嵌入类似IDE的功能

22. auto-scroll-table:表格滚动条

23. 查看图片

24. click-reveal:点击显示块

25. custom-favicon:修改标题图标ico

26. accordion:折叠模块(手风琴)

27. changyan:畅言评论

28. fbqx:填空表单

29. 其他

猜你喜欢

热点阅读