docsify文档生成器简单使用
概述
1、首先要说的是docsify是什么？
2、为什么选择docsify作为文档网站的生成工具？
3、docsify有哪些突出的优点？
自述
学习和工作中，经常会遇到一些东西需要做做笔记的，常常记录的东西要么很乱，有时候想看又找不到，甚至是遗失了，再也找不回来了，这些笔记甚是珍贵，遗失着实可惜。
Markdown文档让程序员们慢慢爱上了做笔记，其易读易写，专注于内容写作，这款轻量级的文档编辑语言成为时代的潮流。
最近几年，知识共享越发流行，开源项目、开源社区、博客等兴起。知识的分享与交流成为人们津津乐道的事情，在写博客的过程中，作者收获归纳知识中的知识巩固，记录学习经历和生活，读者获取作者宝贵的学习经验，双方互惠互利，共同进步。如何快速部署一个博客网站成为一个话题。技术博客网站就是这样的背景下兴起的，如CSDN的IT技术博客，51CTO博客、博客园、简书、知乎等。
作为一个又想法的新青年，一直想如何快速搭建一个自己的博客网站，专注于记录自己的学习记录，因此，基于这个问题，不懂就问度娘（百度），先后尝试了gitbook（国外）、kanClond（国内），gitbook早就停止维护，转向文档托管业务。kanClond支持在线编辑，发布和文档托管（git），免费版50MB空间，允许发布收费文档，相当强大（强烈推荐，支f持国产）。哈！由于强迫症，G看云的50MB空间、还有不便迁移，因此喜欢白嫖的我还是选择了docsify作为主要的文档网站工具（因为Gitee有5GB空间）。
使用教程官网已经有详细的中英文教程，下面我直接以实际案例来说说如何使用docsify
环境准备
工具依赖于node.js，Node.js是一个事件驱动I/O服务端JavaScript环境，简单来说就是执行.js文件所需要的环境，window上和Linux上使用docsify大同小异。
使用node -v和npm -v 查看是否已经安装好环境
- Node.js 安装说明文档
快速开始
Windows是我们最常使用的办公系统，因此本文以Windows 为例详细讲述使用过程。
安装
推荐全局安装 docsify-cli 工具，可以方便地创建及在本地预览生成的文档。
npm i docsify-cli -g
初始化项目
如果想在项目的 ./docs 目录里写文档，直接通过 init 初始化项目。
docsify init ./docs
初始化成功后，可以看到 ./docs 目录下创建的几个文件
index.html入口文件README.md会做为主页内容渲染.nojekyll用于阻止 GitHub Pages 忽略掉下划线开头的文件
直接编辑 docs/README.md 就能更新文档内容。
预览
通过运行 docsify serve 启动一个本地服务器，可以方便地实时预览效果。默认访问地址 http://localhost:3000 。
docsify serve docs
个性化配置
文档主要包含以下几个部分：文档标题、目录、导航栏、正文
配置主要是由index.html配置+.md文档配置共同完成的。
index.html
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="description" content="Description">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify@4/lib/themes/vue.css">
head>
<body>
<div id="app">div>
<script>
window.$docsify = {
name:'',
repo:''
}
script>
<script src="//cdn.jsdelivr.net/npm/docsify@4">script>
body>
html>
配置工作主要在window.$docsify中完成。下面来一起配置吧！
文档标题
<script>
window.$docsify = {
name:'docsify教程'
}
script>
目录
自定义侧边栏需要根目录下创建文件_sidebar.md。同时loadSidebar: true启用自定义侧边栏，默认是false，此时侧边栏会通过 Markdown 文件自动生成（如该文档），设置 subMaxLevel 配置多级目录。
<script>
window.$docsify = {
loadSidebar: true,
subMaxLevel: 2
}
script>
导航栏
自定义导航栏的设置有两种方式，html、_navbar.md
html
<body>
<nav>
<a href="#/">docsify教程a>
<a href="https://www.baidu.com">百度a>
nav>
<div id="app">div>
body>
_navbar.md
通过 Markdown 文件来配置导航，可以定义更加复杂的导航栏，如多级导航。
首先配置 loadNavbar，默认加载的文件为 _navbar.md。
<script>
window.$docsify = {
loadNavbar: true
}
script>
- #### [docsify教程](https://docsify.js.org/#/zh-cn/)
- #### [百度](https://baidu.com)
当然连接地址可以多种多样的，详细配置请看章节-正文
导航栏嵌套
如果导航内容过多，可以写成嵌套的列表，会被渲染成下拉列表的形式。有兴趣的请查看文档了解详情。
正文
默认情况下侧边导航栏是是根据Markdown多级标题自动创建的（我喜欢自动的，纯粹因为我比较懒）。所以定义标题时要规范，侧标导航栏（目录）才好看。
链接
指定静态文件
* [指定静态文件](lib/samples/指定静态文件.md)
* [指定静态文件](lib/samples/指定静态文件)
指定路径
* [指定路径](lib/samples/)
实际访问的是lib/samples/index.html
绝对地址
* [绝对地址](www.baidu.com)
可用主题
更多主题详情：https://docsify.js.org/#/themes
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify/themes/vue.css">
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify/themes/buble.css">
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify/themes/dark.css">
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify/themes/pure.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsify-themeable@0/dist/css/theme-defaults.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsify-themeable@0/dist/css/theme-simple.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsify-themeable@0/dist/css/theme-simple-dark.css">
更多内容敬请期待！收藏主页：https://qiushunji.gitee.io/documents/