如何搭建docsify环境
一、前言,搭建环境
使用docsify必须基于node.js 环境。
1、下载node.js
2、安装docsify （终端输入命令，进行安装）
npm i docsify-cli -g
安装结束后，输入命令查看版本
docsify -v
二、初始化项目
核心命令
docsify init ./ //初始化项目
docsify serve ./ //启动项目
运行地址如下
三、自定义文档
1、自定义左侧菜单
打开index.html,加入 loadSidebar: true,//不生成默认的左侧菜单
window.$docsify = {
name: '',
repo: '',
loadSidebar: true,//不生成默认的左侧菜单
}新建一个文件_sidebar.md 内容如下
* [文档](home1)
** [介绍](home2)
** [快速了解](home2)
** [部署环境](home2)
** [项目介绍](home2)
** [后台手册](home2)
** [前端手册](home2)
** [组件文档](home2)
** [项目扩展](home2)
** [视频教程](home2)
* [其他](home1)
** [常见问题](home2)
** [捐赠支持](home2)* [显示在界面上的名称](页面名称，也就是跳转到哪去，文件名) 代表一级目录，记得空格。
** [显示在界面上的名称](页面名称，也就是跳转到哪去，文件名) 二级目录，空格别忘记了。
2、自定义顶部导航菜单
(1)、可以直接在index.html 中加入nav
<nav>
<a href="#/">菜单1</a>
<a href="#/home1">菜单2</a>
<a href="#/home1/a">菜单3</a>
</nav>(2)、引入文件
修改index.html 中的
window.$docsify = {
name: '',
repo: '',
loadSidebar: true,//不生成默认的左侧菜单
// subMaxLevel: 3 //是否显示目录级别
loadNavbar: true,//自定义顶部导航
}新建_navbar.md 文件内容如下
* 文档
* 前后端分离
* 生态系统
* 帮助
* 我要提问
* 常见问题
* 加入群聊
* github
* gitee3、独立封面
修改index.html
window.$docsify = {
name: '',
repo: '',
loadSidebar: true,//不生成默认的左侧菜单
// subMaxLevel: 3 //是否显示目录级别
loadNavbar: true,//自定义顶部导航
coverpage: true,//封面定义
onlyCover: true,//只显示封面
}新建 _coverpage.md 文件内容如下
 //图标
# NDCFL
## Fly文档
> 神奇的文档网站生成技术
[GitHub](https://github.com/ndcfl/)
[Get Started](/README)
[Get Started](#quick-start)
5、引入搜索，github 的评论等
<!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="css/vue.css">
<link rel="stylesheet" href="//cdn.bootcss.com/gitalk/1.5.0/gitalk.min.css">
</head>
<body>
<div id="app"></div>
<div id="gitalk-container" style="width: 60%;float: right;margin-top: -300px;margin-right: 50px"></div>
<script>
window.$docsify = {
name: '',
repo: '',
loadSidebar: true,//不生成默认的左侧菜单
// subMaxLevel: 3 //是否显示目录级别
loadNavbar: true,//自定义顶部导航
coverpage: true,//封面定义
onlyCover: true,//只显示封面
// 完整配置参数
search: {
maxAge: 86400000, // 过期时间，单位毫秒，默认一天
paths: [], // or 'auto'，匹配文件路径
placeholder: '输入关键词', // 搜索提示框文字， 支持本地化，例子在下面
// placeholder: {
// '/zh-cn/': '搜索',
// '/': 'Type to search'
// },
noData: 'No Results!', // 找不到结果文字提示，支持本地化，例子在下面
// noData: {
// '/zh-cn/': '找不到结果',
// '/': 'No Results'
// },
depth: 2, // 搜索标题的最大程级, 1 - 6
}
}
</script>
<script src="js/docsify.min.js"></script>
<!-- 引入搜索模块 -->
<script src="js/search.js"></script>
<script src="//cdn.bootcss.com/gitalk/1.5.0/gitalk.min.js"></script>
<script>
var gitalk = new Gitalk({
clientID: 'b88876b45cd9d0e39d00', // GitHub Application Client ID
clientSecret: '7ec68da38fccc80e08fbeff8844273ca8e8f452c', // GitHub Application Client Secret
repo: 'gitalk-comment', // 存放评论的仓库
owner: 'ndcfl', // 仓库的创建者，
admin: ['ndcfl'], // 如果仓库有多个人可以操作，那么在这里以数组形式写出
id: location.pathname, // 用于标记评论是哪个页面的，确保唯一，并且长度小于50
})
gitalk.render('gitalk-container'); // 渲染Gitalk评论组件
</script>
</body>
</html>
