Installation and use of plug-in methods
Create book.json in the root directory
Insert the code for the following plug-ins in the specified format in this file.
There are two ways to install plug-ins:
One is that after book.json has written the corresponding plug-in and configuration,
Use Gitbook Install to install the plug-in.
One is to install using NPM install pluginName and then write the configuration
Preparation of a hidden element
Mainly used to hide unwanted elements.
Such as:
The default gitbook left prompt: Published with gitbook
How to use: Write the following to book.json
{
"plugins": [
"hide-element"]."pluginsConfig": {
"hide-element": {
"elements": [".gitbook-link"]}}}Copy the code
Back-to-top Button returned to the top
When the article is long, a button appears at the bottom of the page that automatically returns to the top with one click.
Usage:
Write the following in book.json
{
"plugins": [
"back-to-top-button"]}Copy the code
Preparation of A navigation directory
Gitbook default directory has no collapse effect.
How to use: Write the following to book.json
{
"plugins": ["chapter-fold"]}Copy the code
Trained code to duplicate code
Add a copy button in the upper right corner of the code field and copy the code with one click.
Usage:
Write the following in book.json
{
"plugins" : [ "code"]}Copy the code
Adjustable sidebar width
The left directory and the right article can be dragged to adjust the width.
Usage:
Write the following in book.json
{
"plugins": [
"splitter"]}Copy the code
Design: Search – Pro Advanced search
Support Both Chinese and English, more accurate.
Usage:
Write the following in book.json
{
"plugins": [
"-lunr"."-search"."search-pro"]}Copy the code
Preparation of insert logo
Insert the logo above the left navigation bar.
How to use: Write the following to book.json
Url supports local images as well as web image links
{
"plugins": [ "insert-logo" ]
"pluginsConfig": {
"insert-logo": {
"url": "images/logo.png"."style": "background: none; max-height: 30px; min-height: 30px"}}}Copy the code
Custom – FavIcon Modified title bar icon
Sets the small icon in the browser TAB title bar.
Usage:
Write the following in book.json
Note that only images with the ICO suffix are supported, and only local images are supported. Network image links are not supported.
{
"plugins" : ["custom-favicon"]."pluginsConfig" : {
"favicon": "icon/favicon.ico"}}Copy the code
Preparation of pageview-count
Log the number of times each article page is visited.
Usage:
Write the following in book.json
{
"plugins": [ "pageview-count"]}Copy the code
Tbfed-pagefooter page added footer
Mark the copyright information and the date of the article below each article.
Usage:
Write the following in book.json
{
"plugins": [
"tbfed-pagefooter"]."pluginsConfig": {
"tbfed-pagefooter": {
"copyright":"Copyright © dsx2016.com 2019"."modify_label": Revision date of this article:."modify_format": "YYYY-MM-DD HH:mm:ss"}}}Copy the code
Design popup
Click to display the image in a new window.
Usage:
Write the following in book.json
{
"plugins": [ "popup"]}Copy the code
Designed to share current page
By default, GitBook has only Facebook, Google+, Twiter, Weibo and Instapaper
Plug-ins can have more sharing methods, or they can turn off specified sharing methods.
Usage:
Write the following in book.json
{
"plugins": ["-sharing"."sharing-plus"]."pluginsConfig": {
"sharing": {
"douban": true."facebook": true."google": true."pocket": true."qq": true."qzone": true."twitter": true."weibo": true."all": [
"douban"."facebook"."google"."instapaper"."linkedin"."twitter"."weibo"."messenger"."qq"."qzone"."viber"."whatsapp"]}}}Copy the code
Integrated code
This article demonstrates the code to configure book.json
{
"plugins": [
"back-to-top-button"."chapter-fold"."code"."splitter"."-lunr"."-search"."search-pro"."insert-logo"."custom-favicon"."pageview-count"."tbfed-pagefooter"."popup"."-sharing"."sharing-plus"]."pluginsConfig": {
"insert-logo": {
"url": "https://file.smallzhiyun.com/%E4%B9%A6.png"."style": "background: none; max-height: 30px; min-height: 30px"
},
"favicon": "./icon/book.ico"."tbfed-pagefooter": {
"copyright": "Copyright © dsx2016.com 2019"."modify_label": Revision date of this article:."modify_format": "YYYY-MM-DD HH:mm:ss"
},
"sharing": {
"douban": true."facebook": true."google": true."pocket": true."qq": true."qzone": true."twitter": true."weibo": true."all": [
"douban"."facebook"."google"."instapaper"."linkedin"."twitter"."weibo"."messenger"."qq"."qzone"."viber"."whatsapp"]}}}Copy the code
Installation and use