美文网首页
六、gitbook插件

六、gitbook插件

作者: 爱发抖的小喵喵 | 来源:发表于2020-02-26 09:23 被阅读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 © 你的名字",
        "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插件

          本文链接:https://www.haomeiwen.com/subject/engpchtx.html