关于gitbook的结构及优化配置

gitbook基本结构

├── book.json
├── README.md
├── SUMMARY.md
├── chapter1/
|    ├── README.md
|    ├── something.md
├── chapter2/
|    ├── README.md

SUMMARY.md中[]内的内容是标题,()内是文档的路径,章节和子章节用四个空格或者tab键来分级,菜单示例:

# 概述
### 服务介绍
* [服务介绍](README.md)

### 服务接入流程

* [服务开通](serviceOpen.md)
* [应用配置](appConfig.md)

### 企业实名认证服务端API
* [API服务规范](apiStandard.md)
* [营业执照OCR接口](apiOCR.md)

book.json的配置说明

变量 描述
root 包含所有图书文件的根文件夹的路径,除了 book.json
structure 指定自述文件,摘要,词汇表等的路径
title 您的书名,默认值是从 README 中提取出来的。在 GitBook.com 上,这个字段是预填的。
description 您的书籍的描述,默认值是从 README 中提取出来的。在 GitBook.com 上,这个字段是预填的。
author 作者名。在GitBook.com上,这个字段是预填的。
isbn 国际标准书号 ISBN
language 本书的语言类型,默认值是 en
direction 文本阅读顺序。可以是 rtl (从右向左)或 ltr (从左向右),默认值依赖于 language 的值。
gitbook 应该使用的GitBook版本,并接受类似于 >=3.0.0 的条件。
links 在左侧导航栏添加链接信息
plugins 要加载的插件列表
pluginsConfig 插件的配置

基本配置

{
	"title": "Gitbook Use",
	"author": "Jian Fangjian ",
	"description": "This is a sample book created by gitbook",
	"language": "zh-hans",
}
  • title - 设置书本的标题
  • author - 作者的相关信息
  • description - 本书的简单描述
  • language - 语言
    en, ar, bn, cs, de, en, es, fa, fi, fr, he, it, ja, ko, no, pl, pt, ro, ru, sv, uk, vi, zh-hans, zh-tw
  • links - 在左侧导航栏添加链接信息
  • styles - 自定义页面样式, 默认情况下各generator对应的css文件
    "styles": { "website": "styles/website.css", }

默认插件

默认带有 5 个插件:

  • highlight - 语法高亮插件
  • search - 搜索插件
  • sharing - 分享插件
  • font-settings - 字体设置插件
  • livereload - 热加载插件

去除默认插件,可以在插件名称前面加 -

常用插件

book.json写入相应插件plugins和配置pluginsConfig后,使用gitbook install安装插件

npm插件:https://www.npmjs.com/

  • gitbook-plugin-insert-logo 图标
	"plugins": [
		"insert-logo"
	],

	"pluginsConfig": {
		"insert-logo": {
			"url": "https://fangjian98.gitee.io/gitbook/images/android.png",
			"style": "background: none; max-height: 30px; min-height: 30px"
		}
	},
  • hide-element 隐藏元素

默认的gitbook左侧提示:Published with GitBook

{
    "plugins": [
        "hide-element"
    ],
    "pluginsConfig": {
        "hide-element": {
            "elements": [".gitbook-link"]
        }
    }
}
  • back-to-top-button 回到顶部

当文章篇幅较长时,页面底部会显示按钮,一键点击自动回到顶部

{
    "plugins": [
         "back-to-top-button"
    ]
}
  • chapter-fold 导航目录折叠

gitbook默认目录没有折叠效果
或者expandable-chapters-small

{
    "plugins": ["chapter-fold"]
}
  • code 复制代码

在代码域的右上角添加一个复制按钮,点击一键复制代码。

{
    "plugins" : [ "code" ]
}
  • splitter 侧边栏宽度可调节

左侧目录和右侧文章可以拖动调节宽度。

{
    "plugins": [
        "splitter"
    ]
}
  • search-pro 高级搜索

支持中英文,准确率更高一些

{
    "plugins": [
          "-lunr", 
          "-search", 
          "search-pro"
    ]
}
  • insert-logo 插入logo

在左侧导航栏上方插入logo
url支持本地图片也支持网络图片链接

{
    "plugins": [ "insert-logo" ]
    "pluginsConfig": {
      "insert-logo": {
        "url": "images/logo.png",
        "style": "background: none; max-height: 30px; min-height: 30px"
      }
    }
}
  • pageview-count 阅读量计数

记录每个文章页面被访问的次数

{
  "plugins": [ "pageview-count"]
}
  • custom-favicon 修改标题栏图标

设置浏览器选项卡标题栏的小图标
注意只支持ico后缀的图片,并且只支持本地图片,不支持网络图片链接。
图标的分辨率要是32x32的。

{
    "plugins" : ["custom-favicon"],
    "pluginsConfig" : {
        "favicon": "icon/favicon.ico"
    }
}
  • tbfed-pagefooter 页面添加页脚

在每个文章下面标注版权信息和文章时间

{
    "plugins": [
       "tbfed-pagefooter"
    ],
    "pluginsConfig": {
        "tbfed-pagefooter": {
            "copyright":"Copyright © dsx2016.com 2019",
            "modify_label": "该文章修订时间:",
            "modify_format": "YYYY-MM-DD HH:mm:ss"
        }
    }
}
  • popup 弹出大图

点击可以在新窗口展示图片

{
  "plugins": [ "popup" ]
}
  • sharing-plus 分享当前页面

gitbook默认只有Facebook、Google+、Twiter、Weibo、Instapaper
插件可以有更多分享方式,也可以关闭指定分享方式。

{
    "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"
           ]
       }
    }
}
  • change_girls 可自动切换的背景
"plugins":["change_girls"]
 
"pluginsConfig": {
    
    "change_girls" : {
        "time" : 5,
        "urls" : [
            "girlUrl1", "girlUrl2",...
        ]
    }
}
  • emphasize强调突出颜色
{
    "plugins": ["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 %}
  • page-copyright 页面页脚版权(内容多):

https://www.npmjs.com/package/gitbook-plugin-page-copyright

运行以后有很多信息是原创作者的,这些配置都在你的插件安装目录\node_modules\gitbook-plugin-page-copyright下的index.js中,自己可以修改,大部分信息都在 defaultOption 中。其二维码可以在文件中找到 QRcode 改成自己的,或者直接把所有的 defaultOption.isShowQRCode改成false

  • page-toc-button悬浮目录
  • anchor-navigation-ex
  • page-treeview
  • donate打赏
  • flexible-alerts警报
  • klipse 嵌入类似IDE的功能
{
    "plugins": ["klipse"]
}

用法,在 markdown 中

```eval-python
    print [x + 1 for x in range(10)]
```
  • sidebar-style 导航栏显示作者信息

会替换掉 Published by GitBook

{
    "plugins": ["sidebar-style"],
    "pluginsConfig": {
        "sidebar-style": {
            "title": "前端开发",
            "author": "付铭"
        }
    }
}
  • multipart 将书籍分成几个部分

https://www.npmjs.com/package/gitbook-plugin-multipart

  • prism 基于 Prism 的代码高亮

https://github.com/gaearon/gitbook-plugin-prism

参考

https://segmentfault.com/a/1190000019664545
https://zhousiwei.gitee.io/
https://www.cnblogs.com/mingyue5826/p/10307051.html

你可能感兴趣的:(技术流Clip,gitbook,npm)