Docsify生成文档网站

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

访问效果

image-20200410140520786

3. docsify 实战

3.1 设置封面

在docs/index.html中添加封面设置

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

刷新页面，查看效果

image-20200410145205842

3.2 设置内容

在docs/README.md中设置内容，默认情况下，侧边栏会根据当前文档的标题生成目录。

## 1. Spring Security 简介
简介
## 2. Spring Security 入门程序
入门程序
## 3. 表单认证
表单认证
### 3.1 HTTP Basic认证
HTTP Basic认证
### 3.2 HttpClient模拟Basic认证
HttpClient模拟Basic认证

查看效果，整体满足使用，但是美中不足，需要自定义侧边栏等。

image-20200410153319995

3.3 定制侧边栏

在docs/README.md中设置:loadSidebar: 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

查看效果

image-20200410164756224

3.4 顶部导航栏

创建docs/_navbar.md配置顶部导航栏

* 学习
  * [文档1]()
  * [文档2]()

* 插件
  * [插件2]()
  * [学习教程]()

在docs/index.html添加

loadNavbar: true,//顶部导航

完整docs/index.html




  
  Document

查看效果

image-20200410165615861

4. 插件

4.1代码高亮

在docs/index.html添加

4.1 代码拷贝

在docs/index.html添加

4.2 图片放大

在docs/index.html添加

4.3 全文搜索

在docs/index.html添加样式

默认搜索

自定义搜索

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.
image-20200410190253359

最终代码：https://github.com/fby2018/MyDocsify

软件工具

相关

标签