docsify导出html,Docsify生成文档网站

Docsify生成文档网站

1. docsify简介

docsify 是一个动态生成文档网站的工具。不同于 GitBook、Hexo 的地方是它不会生成将 .md 转成 .html 文件，所有转换工作都是在运行时进行。

docsify能你快速的搭建一个小型的文档网站，只需要创建一个 index.html 就可以开始写文档而且直接部署在 GitHub Pages。

2. docsify入门案例

开启docsify第一个案例，需要安装Node.js以及docsify-cli工具。

2.1 安装Node.js

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中添加封面设置

window.$docsify = {

coverpage: true

}

创建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

window.$docsify = {

name: 'Spring Security Study',//侧边栏标题

repo: '',//github地址

loadSidebar: true, // 加载自定义侧边栏

maxLevel: 4, // 默认情况下会抓取文档中所有标题渲染成目录，可配置最大支持渲染的标题层级。

subMaxLevel: 5, // 生成目录的最大层级

mergeNavbar: true, // 小屏设备下合并导航栏到侧边栏

alias: { // 定义路由别名，可以更自由的定义路由规则。 支持正则

'/.*/_sidebar.md': '/_sidebar.md'//防止意外回退

},

coverpage: true//设置封面

}

创建_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

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//设置封面

}

查看效果

4. 插件

4.1代码高亮

在docs/index.html添加

4.1 代码拷贝

在docs/index.html添加

4.2 图片放大

在docs/index.html添加

4.3 全文搜索

在docs/index.html添加样式

默认搜索

window.$docsify = {

search: 'auto', // default

}

自定义搜索

window.$docsify = {

search: {

placeholder: '搜索',

noData: '找不到结果!',

depth: 3

},

}

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.