GitBook 常用插件

摘要:
不要灰心。您可以使用npminstallgitbook插件进行安装。如果此方法也很慢,请配置npm源npmconfigsetregistry=http://registry.npm.taobao.org-g请参阅我的完整配置详细信息:{“author”:“Levy”,“description”::“ThisrecordsharingbyLevy.”,“extension”:null,“generator”:“site”,”isbn“:”,“links”:“共享”:{”all“:null,”facebook“:null、”google“:null”,“twitter”:null、“weibo”:null},”侧边栏“:{https://www.google.com“}},”output“:null,”pdf“:{”fontSize“:12,”footerTemplate“:null”headerTemplate“:nul,”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“,”可扩展章节“,”隐藏元素“,”返回顶部按钮“,”拆分器“,”“-lunr”、“-search”、“-sharing”、“share plus”、“chapter fold“],”pluginsConfig“:{”hide element“:{”elements“:[”.gitbook link“]},”tbfed pagefooter“:{”copyright“:”Copyrightlevywang123@gmail.com2020“,”modify_label“:”本文修订于:“,”modify_format“:”YYYY-MM-DDHH:MM:ss“},”favicon“:{”shortcut“:”assets/ffavicon.ico“,”bookmark“:”资产/ffavicon.ico“,”appleTouch“:”assets/favicon.ico“,“appleTouchMore”:{“120x120”:”资产/Ffavicon.co“,“180x180”:”assets/ffavico.ico“},”fontsettings“:”主题“:”white“,”family“:“sans”,“size”:2},“page treeview”:{”版权“:”Copyrightlevywang123@gmail.com2020“,”minHeaderCount“:”2“,”minHeaderDeep“:”1“},”共享“:{”all“:[”facebook“,”google“,”linkedin“,”twitter“,”weibo“,”qq“]}},”语言“:”zh-hans“,”title“:”Levy“,”变量“:{},”styles“:”网站“:”assets/styles/website.css“}”}插件描述页面树视图目录GitHub地址不需要在文档中插入标签。它可以支持6级目录,并且在安装时可用。重要;}代码代码GitHub地址为代码块添加行号和复制按钮,复制按钮可以关闭没有行号的单行代码。

目录


必看说明

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 阅读量计数

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

popup 图片点击查看

GitHub 地址

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

tbfed-pagefooter 页面添加页脚(简单版)

GitHub 地址

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

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

page-copyright 页面添加页脚(复杂版)

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 打赏插件

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

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

个人博客地址

免责声明:文章转载自《GitBook 常用插件》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇unity3D导出exe文件,总是有个设置窗口,来设置分辨率和其他参数。如何删除掉这一步?猎鹰9火箭(Falcon 9)下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

如何在网页标题栏title加入icon图标?

打开某一个网页会在浏览器的标签栏处显示该网页的标题和图标,当网页被添加到收藏夹或者书签中时也会出现网页的图标,怎么在网页title左边显示网页的ico图标呢? 方法一是:找一个或者作一个格式为ico的图片,然后把图片的名字改为favicon.ico,像素大小为16*16,所使用的颜色不得超过16色,然后再把favicon.ico放到网站的根目录下就行了。...

nodejs入门篇---创建project并具体解释

想了非常久。总想写点对大家有优点的,今天解说生成项目。 如今市面上一般须要人全栈-----mean(mongo,express。angular,nodejs),这样能够从前端开发到后端以及数据库,听起来牛呼呼的。 这篇文章就说nodejs和比較流行的框架express4.X版本号(因为3.X版本号没怎么研究过。并且和4有一定差别。况且4也出来非常久了。...

如何给网页标题栏上添加图标(favicon.ico)(转)

如何给网页标题栏上添加图标(favicon.ico) favicon.ico详解:favicon是Favorites Icon的缩写,favicon.ico是指显示在浏览器收藏夹、地址栏和标签标题前面的个性化图标。 设置步骤:1. 把做好的favicon.ico图标文件上传到网站根目录,并命名为xxx.icon就可以了;2. 把以下代码放到网页Html代码...

HTTP,URL,FS 模块搭建一个静态WEB服务器

WEB服务器: 一般指网站服务器,是指驻留在因特网上某种类型计算机的程序,可以向浏览器等Web 客户端提供文档,也可以放置网站文件让全世界浏览,还可以放置数据文件,让全世界下载,目前最主流的Web服务器有 Apache,Nginx,IIS等。 NodeJS 创建一个WEB服务器, 可以让我们访问Web服务器上面的网站 可以让我们下载Web服务器上面的文件...

Django添加favicon.ico图标

Django添加favicon.ico图标 第一步:制作ico图标 制作 favicon.ico 图标的网址:www.bitbug.net  很简单,不难  做完之后,将生成ico图标,命名为:favicon.ico 第二步:将生成的图表存放至 静态文件夹  static/images/ 下 第三步:在HTML文件 里面引入静态文件 在 <he...

chrome浏览器更换favicon.ico后不更新缓存解决方案

chrome浏览器更换favicon.ico后不更新缓存 1、按ctrl+F5强制刷新或网页上右键重新载入。2、再不行就删除缓存。3、但这样太讨厌了,还有个小窍门屡试不爽,那就是直接在浏览器地址栏访问favicon文件。4、如果访问还是原先的ico文件,在浏览图片时刷新一下,再回到网站看一下,已经解决了,毕竟谁都不愿意为这个问题去清缓存和cookies什么...