选用gitbook

前方的话

  gitbook功用强大,能够自行完结搜索及翻页等职能,上手简单,用markdown书写即可,且可以自动生成响应式网址。本文将详细介绍怎么样行使gitbook

 

安装

  一、使用npm全局安装gitbook-cli

npm install gitbook-cli -g

皇冠直营现金网开户 1

  2、使用gitbook –version来查看gitbook的版本

gitbook --version

皇冠直营现金网开户 2

  3、接下去对gitbook实行基础配置,创造并进入一个笔记文件夹

mkdir myNote
cd myNode

  四、开端化gitbook,会自动生成八个文本。README.md用于书籍介绍,SUMMA奔驰M级Y.md用于安装书籍的目录

gitbook init

皇冠直营现金网开户 3

  5、接着,使用gitbook
serve命令来运营gitbook本地服务器,预览暗许的书籍内容

gitbook serve

皇冠直营现金网开户 4

  陆、打开localhost:陆仟,会现出如下页面

皇冠直营现金网开户 5

  七、使用gitbook install命令来安装插件

gitbook install

  八、生成静态网页

  使用gitbook build命令,gitbook把md文件创设成静态网页

gitbook build #生成静态网页

 

目录结构

  GitBook 基本的目录结构如下所示

.
├── book.json
├── README.md
├── SUMMARY.md
├── chapter-1/
|   ├── README.md
|   └── something.md
└── chapter-2/
    ├── README.md
    └── something.md

【book.json】

  该公文用于存放配置新闻

【Glossary.md】

  允许钦赐要来得为注释的术语及其各自的概念。依照那么些条款,GitBook将自行创设2个目录并鼓起体现那些术语

  该GLOSSARY.md格式是列表h2的题目,以及描述项联合

## Term
Definition for this term

## Another term
With it's definition, this can contain bold text
and all other kinds of inline markup ...

【README.md】

  书本的第二页内容是从文件 README.md 中提取的。假诺那一个文件名尚未出现在 SUMMARY 中,那么它会被加上为章节的第二个条款

【.bookignore】

  GitBook将读取.gitignore.bookignore以及.ignore文件以获得文件和文件夹跳过列表

【SUMMARY.md】

  该公文用于存放GitBook的文件目录消息,右侧的目录正是依照那一个文件来扭转的,默许对应的文本是 SUMMARY.md,可以在 book.json 重新定义该公文的对应值。它通过马克down中的列表语法来表示文件的老爹和儿子关系

  [注意]不被SUMMARY.md饱含的文书不会被gitbook处理.

  该公文中央的写法如下

# Summary

* [Part I](part1/README.md)
    * [Writing is nice](part1/writing.md)
    * [GitBook is nice](part1/gitbook.md)
* [Part II](part2/README.md)
    * [We love feedback](part2/feedback_please.md)
    * [Better tools for authors](part2/better_tools.md)

  目录中的章节可以利用锚点指向文件的一定部分

# Summary

### Part I

* [Part I](part1/README.md)
    * [Writing is nice](part1/README.md#writing)
    * [GitBook is nice](part1/README.md#gitbook)
* [Part II](part2/README.md)
    * [We love feedback](part2/README.md#feedback)
    * [Better tools for authors](part2/README.md#tools)

  目录能够分为以标题或水平线分隔的一对

# Summary

### Part I

* [Writing is nice](part1/writing.md)
* [GitBook is nice](part1/gitbook.md)

### Part II

* [We love feedback](part2/feedback_please.md)
* [Better tools for authors](part2/better_tools.md)

----

* [Last part without title](part3/title.md)

 

配置

  上边是book.json中的壹些安顿音信

【title】

  书本的标题

"title" : "小火柴的前端小册子"

【author】

  我的连带音信

"author" : "xiaohuochai"

【description】

  本书的简单描述

"description" : "小火柴的前端学习记录"

【language】

  Gitbook使用的语言

"language" : "zh-hans",

【root】

  钦赐存放 GitBook 文件(除了 book.json)的根目录

  假设目录结构如下

.
├── book.json
└── docs/
    ├── README.md
    └── SUMMARY.md

  则能够如此设置

"root": "./docs"

【structure】

  钦命自述文件,摘要,词汇表等的路径

变量            描述
structure.readme     自述文件名(默认为README.md)
structure.summary    摘要文件名(默认为SUMMARY.md)
structure.glossary   词汇表文件名(默认为GLOSSARY.md)
structure.languages  语言文件名(默认为LANGS.md)

【variables】

  能够因此{{book.value}}来赢得变量,变量会从书册内容中搜寻对应的值

     "variables": {
        "value": "Hello World"
    }   

【link】

  插件中的链接(null: default, false: remove, string: new value)

  "links": {
        // Custom links at top of sidebar
        "sidebar": {
            "Custom link name": "https://xiaohuochai.site"
        },
        // Sharing links
        "sharing": {
            "google": null,
            "facebook": null,
            "twitter": null,
            "weibo": null,
            "all": null
        }
    }

 

插件

plugins          要加载的插件列表
pluginsConfig   插件配置

  gitbook默许带有五个插件

highlight
search
sharing
font-settings
livereload
lunr

  假若要去除自带的插件, 能够在插件名称前边加-

"plugins": [
    "-search"
]

  上边来介绍1些常用的插件

【打赏作用:donate】

{
    "plugins": ["donate"],
    "pluginsConfig": {
        "donate": {
          "wechat": "例:qr.png",
          "alipay": "http://blog.willin.wang/staticqr.png",
          "title": "默认空",
          "button": "默认值:Donate",
          "alipayText": "默认值:支付宝捐赠",
          "wechatText": "默认值:微信捐赠"
        }
    }
}

【中文搜索:search-plus】

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

【广告效应:ad】

{
  "plugins": ["ad"],
  "pluginsConfig": {
    "ad": {
      "contentTop": "<div>Ads at the top of the page</div>",
      "contentBottom": "%3Cdiv%3EAds%20at%20the%20bottom%20of%20the%20page%3C/div%3E"
    }
  }
}

// note: contentBottom is escape('<div>Ads at the bottom of the page</div>')

【目录宽度可调节和测试:splitter】

{
    "plugins": ["splitter"]
}

【github图标】

{
    "plugins": [ "github" ],
    "pluginsConfig": {
        "github": {
            "url": "https://github.com/your/repo"
        }
    }
}

【自定义页脚:tbfed-pagefooter】

{
    "plugins": [ "tbfed-pagefooter" ],
    "pluginsConfig": {
        "tbfed-pagefooter": {
             "copyright":"&copy Taobao FED Team",
             "modify_label": "该文件修订时间:",
             "modify_format": "YYYY-MM-DD HH:mm:ss"
        }
    }
}    

【目录章节可折叠:expandable-chapters

{
    {
        plugins: ["expandable-chapters"]
    }
    {
        "pluginsConfig": {
            "expandable-chapters":{}
        }
    }
}

【畅言评论:changyan】

{
    "plugins": [
        "changyan"
    ],
    "pluginsConfig": {
        "changyan": {
            "appid": "your changyan's appid",
            "conf": "the conf in the code generate by changyan"
        }
    }
}

【重回顶部:back-to-top-button】 

{
    "plugins" : [ "back-to-top-button" ]
}

【更换ico:favicon】

  [注意]favicon只帮助本地路径,不帮忙网络路径

{
    "plugins": [
        "favicon"
    ],
    "pluginsConfig": {
        "favicon": {
            "shortcut": "assetsvicon.ico",
            "bookmark": "assetsvicon.ico",
            "appleTouch": "assetspple-touch-icon.png",
            "appleTouchMore": {
                "120x120": "assetspple-touch-icon-120x120.png",
                "180x180": "assetspple-touch-icon-180x180.png"
            }
        }
    }
}

 

主题

皇冠直营现金网开户,  近来 GitBook 提供了叁类文书档案: Book 文书档案、API文书档案、FAQ文书档案。常用的是
Book 文书档案格局,假如急需运用 API 文书档案方式可能 FAQ
文书档案形式,只需引进文书档案对应的主题插件即可

【Book】

   Book 是常用的方式,大多数插件也都以针对那一个格局做的。

theme-default 是暗中认可的 Book 主旨。将 showLevel 设为 true
就可以来得题最近边的数字索引,暗许不展现

{
    "theme-default": {
        "showLevel": true
    }
}

  them-comscore是另1个Book核心,能够为标题添加颜色

{
"plugins": [
        "theme-comscore"
    ]
}

【API】

  GitBook 同样能够编写 API
文书档案,只需求引进 theme-api 插件,引进之后会交替私下认可的体制

{
    "plugins": ["theme-api"],
    "pluginsConfig": {
        "theme-api": {
            "theme": "dark"
        }
    }
}

【FAQ】

theme-faq 插件首要用来塑造知识库可能扶助中央,GitBook
的 补助宗旨 正是选用的该宗旨。为了支持中文搜索供给引进 search-pro 包

{
    "plugins": [
        "theme-faq",
        "-lunr",
        "search-pro@^2.0.2"
    ]
}

  编写辅助主题很简短,在 Summary 里配置问题以及答案所在的文本,在对应文件中写入难点的答案即可

  [注意]出于FAQ大旨私下认可会调用maxcdn里的bootstrap和fontawesome,所以对于国内用户来说,可访问性不是很好

# Summary

## HTML
* [介绍](README.md)
* [语法介绍](introduce.md)
* [结构](struct.md)

## HTTP
*  [HTTP](HTTP.md)

## CSS
* [display](display.md)
* [float](float.md)
* [absolute](absolute.md)
* [relative](relative.md)

 

修改内容

  上边在开首化的gitbook的功底上改动内容,并制作八个简短的电子书

  [注意]gitbook供给驾驭markdown语法,详细消息挪动至此

  修改目录文件SUMMA安德拉Y.md

# Summary

* [前言](README.md)
* [HTML](HTML.md)
* [CSS](CSS.md)
* [JS](JS.md)
* [ES6](ES6.md)
* [HTTP](HTTP.md)
* [前端框架](FELib.md)
    * [Bootstrap](bs.md)
    * [jQuery](jq.md)
    * [Vue](vue.md)
* [前端构建](build.md)
* [版本管理](version.md)
* [后端相关](BELib.md)
    * [PHP](php.md)
    * [MySQL](mysql.md)
    * [NodeJS](node.md)
    * [MongoDB](mongo.md)
* [服务器端](server.md)
* [辅助工具](helper.md)
* [术语表](Glossary.md)
* [参考资料](Resources.md)

  修改book.json文件

{
  "title": "FE-booklet",
  "description": "小火柴的前端小册子",
  "author": "xiaohuochai",
  "language": "zh-hans",
  "links": {
    "sidebar": {
      "小火柴的博客": "https://webhuochai.com"
    }
  },
  "styles":{
    "website":"style.css"
  },
  "variables": {
    "cdn": "://static.xiaohuochai.site/"
  },
  "plugins": [
    "-lunr",
    "-search",
    "-livereload",
    "-sharing",
    "expandable-chapters",
    "search-plus",
    "splitter",
    "github",
    "tbfed-pagefooter","back-to-top-button",
  ],
  "pluginsConfig": {
    "github": {
      "url": "https://github.com/littlematch0123/FE-booklet"
    },
    "tbfed-pagefooter": {
      "copyright": "&copy; xiaohuochai",
      "modify_label": "文件修订时间:",
      "modify_format": "YYYY-MM-DD HH:mm:ss"
    },
  }
}

  最后效果如下

 

相关文章