Docsify生成文档网站
1. docsify简介
docsify 是一个动态生成文档网站的工具。不同于 GitBook、Hexo 的地方是它不会生成将 .md 转成 .html 文件，所有转换工作都是在运行时进行。
docsify能你快速的搭建一个小型的文档网站，只需要创建一个 index.html 就可以开始写文档而且直接部署在 GitHub Pages。
官方文档：https://docsify.js.org/#/
官方github: https://github.com/docsifyjs/docsify/
2. docsify入门案例
开启docsify第一个案例，需要安装Node.js以及docsify-cli工具。
2.1 安装Node.js
- 下载地址：https://nodejs.org/dist/v8.9.4/node-v8.9.4-x64.msi
- 下载完成后点击安装。
- 查看node 版本，命令：node -v
2.2 docsify-cli
docsify-cli是生成docsify项目的小工具。使用以下命令全局安装docsify-cli，安装完成查看版本
#全局安装docsify-cli
npm i docsify-cli -g
#查看版本
docsify -v
2.3 初始化项目
创建一个项目根目录,用来存放案例
mkdir docsifyDemo
进入项目根目录并初始化
docsify init ./docs
查看生成的目录和文件
tree /f
生成目录和文件
─docs
--.nojekyll 用于阻止 GitHub Pages 会忽略掉下划线开头的文件
--index.html 入口文件
--README.md 主页内容渲染
2.4 启动项目
运行服务
docsify serve ./docs
默认访问
http://localhost:3000
访问效果
3. docsify 实战
3.1 设置封面
在docs/index.html中添加封面设置
<script>
window.$docsify = {
coverpage: true
}
</script>
创建docs/_coverpage.md，并添加以下内容
# Spring Security 从零开始的异世界
### 从零开始学 Spring Security
> 以Spring Security为主题，开启学习之旅，从基本案例到实战案例
[Gitee](https://gitee.com/newbetome/spring-security-fromzero)
[Get Started](README.md)
刷新页面，查看效果
3.2 设置内容
在docs/README.md中设置内容，默认情况下，侧边栏会根据当前文档的标题生成目录。
## 1. Spring Security 简介
简介
## 2. Spring Security 入门程序
入门程序
## 3. 表单认证
表单认证
### 3.1 HTTP Basic认证
HTTP Basic认证
### 3.2 HttpClient模拟Basic认证
HttpClient模拟Basic认证
查看效果，整体满足使用，但是美中不足，需要自定义侧边栏等。
3.3 定制侧边栏
在docs/README.md中设置:loadSidebar: true
<script>
window.$docsify = {
name: 'Spring Security Study',//侧边栏标题
repo: '',//github地址
loadSidebar: true, // 加载自定义侧边栏
maxLevel: 4, // 默认情况下会抓取文档中所有标题渲染成目录，可配置最大支持渲染的标题层级。
subMaxLevel: 5, // 生成目录的最大层级
mergeNavbar: true, // 小屏设备下合并导航栏到侧边栏
alias: { // 定义路由别名，可以更自由的定义路由规则。 支持正则
'/.*/_sidebar.md': '/_sidebar.md'//防止意外回退
},
coverpage: true//设置封面
}
</script>
创建_sidebar.md文件配置侧边栏
* Spring Security 学习篇
* [Spring Security 整合JDBC](mypages/1.md)
*[Spring Security 整合Druid](mypages/2.md)
*[Spring Security 整合Druid](mypages/3.md)
分别创建docs/mypages/1.md、docs/mypages/2.md、docs/mypages/3.md，内容一致
# 标题1
## 标题1.1
# 标题2
## 标题2.1
查看效果
3.4 顶部导航栏
创建docs/_navbar.md配置顶部导航栏
* 学习
* [文档1]()
* [文档2]()
* 插件
* [插件2]()
* [学习教程]()
在docs/index.html添加
loadNavbar: true,//顶部导航
完整docs/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="description" content="Description">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<link rel="stylesheet" href="//unpkg.com/docsify/lib/themes/vue.css">
</head>
<body>
<div id="app"></div>
<script>
window.$docsify = {
name: 'Spring Security Study',//侧边栏标题
repo: 'https://gitee.com/newbetome/spring-security-fromzero',//github地址
loadNavbar: true,//顶部导航
loadSidebar: true, // 加载自定义侧边栏
maxLevel: 4, // 默认情况下会抓取文档中所有标题渲染成目录，可配置最大支持渲染的标题层级。
subMaxLevel: 5, // 生成目录的最大层级
mergeNavbar: true, // 小屏设备下合并导航栏到侧边栏
alias: { // 定义路由别名，可以更自由的定义路由规则。 支持正则
'/.*/_sidebar.md': '/_sidebar.md'//防止意外回退
},
coverpage: true//设置封面
}
</script>
<script src="//unpkg.com/docsify/lib/docsify.min.js"></script>
</body>
</html>
查看效果
4. 插件
4.1代码高亮
在docs/index.html添加
<script src="//unpkg.com/prismjs/components/prism-bash.js"></script>
<script src="//unpkg.com/prismjs/components/prism-java.js"></script>
<script src="//unpkg.com/prismjs/components/prism-sql.js"></script>
4.1 代码拷贝
在docs/index.html添加
<script src="//unpkg.com/docsify-copy-code"></script>
4.2 图片放大
在docs/index.html添加
<script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/zoom-image.min.js"></script>
4.3 全文搜索
在docs/index.html添加样式
<script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/search.min.js"></script>
默认搜索
<script>
window.$docsify = {
search: 'auto', // default
}
</script>
自定义搜索
<script>
window.$docsify = {
search: {
placeholder: '搜索',
noData: '找不到结果!',
depth: 3
},
}
</script>
5. 部署
创建项目，提交项目，设置gitHub pages
1、master分支
2、master分支下的docs目录
3、gh-pages分支
1、在项目根目录写的，直接把代码推送到master分支上， GitHub Pages里选择master branch.
2.文档是在master分支下的docs/目录下编写的，直接把代码推送到master分支上，GitHub Pages里选择master branch/docs folder.
