携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第21天，点击查看活动详情

官网

Docsify官网地址 docsify.js.org/

前言

动态生成文档网站的一款热门工具！网上很多关于动态生成文档的工具！今天我们的主角是Docsify！

Docsify的优点

无需构建，写完文档直接发布
容易使用并且轻量
智能的全文搜索
丰富的 API
支持表情——Emoji

准备工作

nodejs下载地址
node.js最新最详细安装教程
markdown语法的积累（Docsify是markdown语法支持）

工具的的安装（docsify-cli）

安装命令如下： npm i docsify-cli -g

安装结果图：

到这里我们的准备工作就搞定了！

项目搭建

找到我们想要初始化的文件夹，比如我这里是E:\docsify，cmd中进入响应的目录执行下面的命令 docsify init ./Docsify-Guide

如下图：

进入到响应的目录，查看我们的结果，如下图，我们可以看到三个文件夹：

index.html 入口文件
README.md 会做为主页内容渲染
.nojekyll 用于阻止 GitHub Pages 忽略掉下划线开头的文件

接下来我们只需要编辑README.md即可实现我们的接口文档网站了！

如何使用？

基础配置文件

文件作用	文件
基础配置项（入口文件）	index.html
封面配置文件	_coverpage.md
侧边栏配置文件	_sidebar.md
导航栏配置文件	_navbar.md
主页内容渲染文件	README.md
浏览器图标	favicon.ico

简单的文档，有这么几个配置就完全足够了，接下来我们详细的看一下各个配置具体内容！

基础配置(index.html)

<!-- index.html -->

<script>
  window.$docsify = {
    coverpage: true
  }
</script>
<script src="//cdn.jsdelivr.net/npm/docsify/lib/docsify.min.js"></script>

封面配置（_coverpage.md）

这里我们将官网的封面配置拿过来了

Docsify使用指南

<!-- _coverpage.md -->

# Docsify使用指南 
# docsify 
> A magical documentation site generator.

- Simple and lightweight
- No statically built html files
- Multiple themes

[开始使用 Let Go](/README.md)

导航栏配置文件（_navbar.md）

添加导航配置的时候，需要在index.html页面添加一行代码 loadNavbar: true 如下： window.$docsify = { coverpage: true, loadNavbar: true }

接下来看一下导航的代码

   <!-- _navbar.md -->

* 链接到我
 * [百度地址](https://baidu.com/)

* 友情链接
 * [Docsify](https://docsify.js.org/#/)

侧边栏配置（_sidebar.md）

这个也需要在index中添加一行代码 loadSidebar: true

接下来看我们的具体侧边栏配置：

<!-- _sidebar.md -->
- [**API文档**](README.md)

* 用户
  * [用户相关接口](/user/user.md) <!--注意这里是相对路径-->
* 菜单
  * [菜单相关接口](/menu/menu.md)

运行项目

很简单，我们只需要执行下面的命令，根据结果，我们可以看到访问路径，这样输入路径就可以访问项目界面

docsify serve Docsify-Guide

浏览器输入 http://localhost:3000/

这里我们就搞定了基本的Docsify配置，更多使用细节后续会慢慢更新！欢迎大家指正！！

Docsify保姆级教程

官网

前言