docsify 是一个动态生成文档网站的工具。不一样于 GitBook、Hexo 的地方是它不会生成将 .md 转成 .html 文件,全部转换工做都是在运行时进行。javascript
docsify能你快速的搭建一个小型的文档网站,只须要建立一个 index.html 就能够开始写文档并且直接部署在 GitHub Pages。css
官方文档:https://docsify.js.org/#/html
官方github: https://github.com/docsifyjs/docsify/vue
开启docsify第一个案例,须要安装Node.js
以及docsify-cli
工具。java
docsify-cli是生成docsify项目的小工具。使用如下命令全局安装docsify-cli,安装完成查看版本node
#全局安装docsify-cli npm i docsify-cli -g
#查看版本 docsify -v
建立一个项目根目录,用来存放案例git
mkdir docsifyDemo
进入项目根目录并初始化github
docsify init ./docs
查看生成的目录和文件spring
tree /f
生成目录和文件sql
─docs --.nojekyll 用于阻止 GitHub Pages 会忽略掉下划线开头的文件 --index.html 入口文件 --README.md 主页内容渲染
运行服务
docsify serve ./docs
默认访问
http://localhost:3000
访问效果
在docs/index.html中添加封面设置
<script> window.$docsify = { coverpage: true } </script>
建立docs/_coverpage.md,并添加如下内容
![logo](https://docsify.js.org/_media/icon.svg) # Spring Security 从零开始的异世界 ### 从零开始学 Spring Security > 以Spring Security为主题,开启学习之旅,从基本案例到实战案例 [Gitee](https://gitee.com/newbetome/spring-security-fromzero) [Get Started](README.md)
刷新页面,查看效果
在docs/README.md中设置内容,默认状况下,侧边栏会根据当前文档的标题生成目录。
## 1. Spring Security 简介 简介 ## 2. Spring Security 入门程序 入门程序 ## 3. 表单认证 表单认证 ### 3.1 HTTP Basic认证 HTTP Basic认证 ### 3.2 HttpClient模拟Basic认证 HttpClient模拟Basic认证
查看效果,总体知足使用,可是美中不足,须要自定义侧边栏等。
在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
查看效果
建立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>
查看效果
在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>
在docs/index.html添加
<script src="//unpkg.com/docsify-copy-code"></script>
在docs/index.html添加
<script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/zoom-image.min.js"></script>
在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>
建立项目,提交项目,设置gitHub pages
一、master分支 二、master分支下的docs目录 三、gh-pages分支 一、在项目根目录写的,直接把代码推送到master分支上, GitHub Pages里选择master branch. 2.文档是在master分支下的docs/目录下编写的,直接把代码推送到master分支上,GitHub Pages里选择master branch/docs folder.