Docsify保姆级教程

目录

官网

前言

Docsify的优点

准备工作

工具的的安装（docsify-cli）

项目搭建

如何使用？

基础配置文件

基础配置(index.html)

封面配置（_coverpage.md）

Docsify使用指南

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

侧边栏配置（_sidebar.md）

运行项目

官网

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)

<!-- 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配置，更多使用细节后续会慢慢更新！欢迎大家指正！！

欢迎大家点击下方卡片，关注《coder练习生》