zoukankan      html  css  js  c++  java
  • GitBook 常用插件


    必看说明

    GitBook 简单配置使用请参考 链接

    • plugins 是配置新增或删除插件的位置,而 Gitbook 默认自带有 5 个插件:

      sharing:右上角分享功能
      font-settings:字体设置(左上方的"A"符号)
      livereload:为 GitBook 实时重新加载
      highlight: 代码高亮
      search: 导航栏查询功能(不支持中文)

    • pluginsConfig 是插件配置的地方

    特别说明 系统自带插件可通过 在插件名前面加减号的方式去除掉,如-sharing

    再添加了插件后要加载使用插件,需要使用gitbook install 来安装进项目。否则无法使用。

    tips:网络环境不好的小伙伴可能需要等待很长时间,可能都还安装不下来。

    不要灰心,可以使用 npm install gitbook-plugin-插件名的方式进行安装。若这种方式也很慢

    则配置下 npm 源吧

    npm config set registry=http://registry.npm.taobao.org -g
    

    参考本人完整配置详情:

    {
        "author": "Levy",
        "description": "This is record sharing by Levy.",
        "extension": null,
        "generator": "site",
        "isbn": "",
        "links": {
            "sharing": {
                "all": null,
                "facebook": null,
                "google": null,
                "twitter": null,
                "weibo": null
            },
            "sidebar": {
                "谷歌": "https://www.google.com"
            }
        },
        "output": null,
        "pdf": {
            "fontSize": 12,
            "footerTemplate": null,
            "headerTemplate": null,
            "margin": {
                "bottom": 36,
                "left": 62,
                "right": 62,
                "top": 36
            },
            "pageNumbers": true,
            "paperSize": "a4"
        },
        "plugins": ["page-treeview", "code", "pageview-count", "popup", "tbfed-pagefooter", "favicon",
        "search-plus", "expandable-chapters", "hide-element", "back-to-top-button", "splitter",
        "-lunr", "-search", "-sharing", "sharing-plus", "chapter-fold"],
        "pluginsConfig": {
            "hide-element": {
                "elements": [".gitbook-link"]
            },
            "tbfed-pagefooter": {
                "copyright": "Copyright © levywang123@gmail.com 2020",
                "modify_label": "该文章修订时间:",
                "modify_format": "YYYY-MM-DD HH:mm:ss"
            },
            "favicon": {
                "shortcut": "assets/favicon.ico",
                "bookmark": "assets/favicon.ico",
                "appleTouch": "assets/favicon.ico",
                "appleTouchMore": {
                    "120x120": "assets/favicon.ico",
                    "180x180": "assets/favicon.ico"
                }
            },
            "fontsettings": {
                "theme": "white",
                "family": "sans",
                "size": 2
            },
            "page-treeview": {
                "copyright": "Copyright © levywang123@gmail.com 2020",
                "minHeaderCount": "2",
                "minHeaderDeep": "2"
            },
            "sharing": {
                "all": ["facebook", "google", "linkedin", "twitter", "weibo", "qq"]
            }
        },
        "language": "zh-hans",
        "title": "Levy",
        "variables": {},
        "styles": {
            "website": "assets/styles/website.css"
        }
    }
    

    插件说明

    page-treeview 目录

    GitHub 地址

    不需要在文档中插入标签,能够支持到 6 级目录,安装即可用。
    这个插件生成目录以后,下面有一行关于版权的文字。
    这行文字可以通过样式来进行控制,让它不显示出来。

    .treeview__container {
        margin-bottom: 0px !important;
    }
    .treeview__container-title {
        display: none !important;
    }
    

    code 代码

    GitHub 地址

    为代码块添加行号和复制按钮,复制按钮可关闭
    单行代码无行号。

    "code": {
            "copyButtons": false
          }
    

    pageview-count 阅读量计数

    该插件用来统计当前页面被访问次数

    GitHub 地址

    插件用于点击图片时,打开新的网页用来查看高清大图。

    GitHub 地址

    在每个页面的最下方自动添加页脚信息,配置如下:

    "tbfed-pagefooter": {
                "copyright": "Copyright © levywang123@gmail.com 2020",
                "modify_label": "该文章修订时间:",
                "modify_format": "YYYY-MM-DD HH:mm:ss"
            },
    

    GitHub 地址

    在每个页面的最下方自动添加页脚配置的各个信息,配置如下:

     "page-copyright": {
              "description": "footer",
              "copyright": "Copyright © levywang123@gmail.com 2020",
              "timeColor": "#ccc",
              "copyrightColor": "#ddd",
              "utcOffset": "8",
              "style": "normal",
              "noPowered": false,
              "signature": "levy",
              "wisdom": "footer",
              "format": "YYYY-MM-dd hh:mm:ss",
            },
    

    favicon 修改图标

    修改网页标题的图标,显示个性化 ico

            "favicon": {
                "shortcut": "assets/favicon.ico",
                "bookmark": "assets/favicon.ico",
                "appleTouch": "assets/favicon.ico",
                "appleTouchMore": {
                    "120x120": "assets/favicon.ico",
                    "180x180": "assets/favicon.ico"
                }
            },
    

    search-plus 替换原搜索插件

    原搜索插件不支持中文搜索,所以使用该插件进行替换。需要将原插件进行去除掉。

        "plugins": [ "search-plus", "-lunr", "-search"]
    

    expandable-chapters 及 chapter-fold 导航目录

    两个插件配合使用,使导航目录使用更正常,以免出现导航栏问题。

    一个支持多层目录,一个是在目录前方加上箭头。使点击两个都有效。

    hide-element 隐藏界面元素

    GitHub 地址

    可以隐藏不想看到的元素,比如导航栏中 下方的 Published by GitBook

    "elements": [".gitbook-link"]
    

    back-to-top-button 返回顶部

    GitHub 地址

    在页面篇幅过长时,在界面右下角自动添加上返回顶部的按钮。

    splitter 侧边栏宽度调整

    GitHub 地址

    添加完插件后,在界面上 侧边栏可自行调整宽度。

    sharing-plus 分享插件

    插件地址

    需要将自带的插件给隐藏掉 -sharing
    分享当前页面,比默认的 sharing 插件多了一些分享方式。

    "sharing": {
                 "douban": false,
                 "facebook": false,
                 "google": false,
                 "pocket": false,
                 "qq": false,
                 "qzone": false,
                 "twitter": false,
                 "weibo": false,
              "all": [
                  "qq", "qzone","viber","whatsapp",
                   "douban", "facebook", "google", "instapaper", "linkedin",
                   "messenger","twitter", "weibo"
               ]
           }
    

    配置打赏模块,在每篇文章底部都会加上一个按钮,点击显示图片

    "donate": {
                "wechat": "/assets/img/donate/wechat.png",
                "alipay": "/assets/img/donate/alipay.png",
                "title": "",
                "button": "赏",
                "alipayText": "支付宝打赏",
                "wechatText": "微信打赏"
            }
    

    个人博客地址

  • 相关阅读:
    redis哨兵高可用
    数据库主从搭建
    docker 补充
    docker 进阶操作
    docker 简介
    数据可视化(Matplotlib)
    数据操作
    pandas练习
    Pandas简介
    python mysql utf-8 latin
  • 原文地址:https://www.cnblogs.com/levywang/p/13569661.html
Copyright © 2011-2022 走看看