Docsify的使用和手册说明
官网（配置参数）：https://docsify.js.org/#/zh-cn/plugins?id=%E5%85%A8%E6%96%87%E6%90%9C%E7%B4%A2-search
文章目录
1.简介
docsify 可以快速生成文档网站。不同于 GitBook、Hexo 的地方是它不会生成静态的 .html 文件，所有转换工作都是在运行时。如果你想要开始使用它，只需要创建一个 index.html 就可以开始编写文档并直接部署。
官网：https://docsify.js.org/#/zh-cn/
2.特性
- 无需构建
- 容易且轻量 (压缩后 ~21kB)
- 全文搜索
- 可修改主题
- 丰富的 API
- 支持 Emoji
- 兼容 IE11
- 支持服务端渲染
3.安装、使用和启动
1.安装nodejs
2.安装npm
3.安装脚手架
npm i docsify-cli -g
4.初始化
docsify init . // .表示当前目录里写文档
5.目录说明
index.html // 入口文件
README.md // 会做为主页内容渲染
.nojekyll // 用于阻止 GitHub Pages 忽略掉下划线开头的文件
（1）本地浏览
运行docsify serve . 启动一个本地服务器
默认地址：http://localhost:3000
（2）指定端口
可以用-p指定端口
docsify serve -p 80 .
4.Loading 提示
实例：
<!-- 自定义加载信息，默认 'Loding……' 效果 -->
<!-- <div id="app">加载中……</div> -->
<div id="app"></div>
<script>
window.$docsify = {
el: '#app',
name: '博客的开发', // 手册标题，首页指向 README.md
repo: '',
loadSidebar: true
}
</script>
默认显示 Loading… ，可以自定义提示信息。
<div id="app">正在加载……</div>
5.页面配置
单页面
单页面渲染的就是README.md的内容，要改变页面内容，只需要修改README.md
多页面
.
└── docs
├── README.md
├── one.md
└── two
├── README.md
└── three.md
目录默认指向README.md
6.侧菜单
1.修改`index.html`配置文件，配置`loadSidebar` 选项
2.创建 _sidebar.md 文件
// index.html
<script>
window.$docsify = {
loadSidebar: true
}
</script>
// _sidebar.md
- 首页
- [page](page/001.md "标题说明")
嵌套页面链接为侧菜单
// 1.index 页面设置 subMaxLevel: 2
<script>
window.$docsify = {
……
subMaxLevel: 2 // 设置页面到二层
}
</script>
7.导航栏的设置
通过页面链接创建导航栏
在index.html加上导航标签
<body>
<nav>
<a href="#/page/001.md">首页</a>
</nav>
<div id="app"></div>
<script>
window.$docsify = {
el:'#app',
name: 'docsify 手册'
}
</script>
<script src="//cdn.jsdelivr.net/npm/docsify@4"></script>
</body>
通过文件配置设置导航栏
1.index.html配置导航栏参数loadNavbar
2.添加配置文件_navbar.md配置导航栏
<body>
<div id="app"></div>
<script>
window.$docsify = {
loadSidebar: true,
loadNavbar: true
}
</script>
<!-- Docsify v4 -->
<script src="//cdn.jsdelivr.net/npm/docsify@4"></script>
</body>
* [首页](home/home)
* [首页2](home2/home2 "副标题") // 添加标题
导航嵌套列表模式
_navbar.md
* 首页
* [首页](/first)
* [首页1](first/first1)
* [首页2](first/first2)
* 指南
* [指南](guide/guide)
8.定制封面
自定义背景
在index.html中配置参数 coverpage 开启封面。
设置了onlyCover=true 之后封面成独立封面。
配置文件_coverpage.md 来配置封面
9.搜索
全文搜索插件会根据当前页面上的超链接获取文档内容
index.html配置搜索插件
window.$docsify = {
search: 'auto', // 默认值
// 配置参数
search: {
maxAge: 86400000,//过期时间,单位毫秒,默认一天
paths: [], // or 'auto'
placeholder: '请输入搜索关键字',
noData: '没有搜到呦!',
depth:2
}
}
index.html添加js
<script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/search.min.js"></script>
10.剪切板
代码块上添加一个简单的Click to copy按钮来允许用户从你的文档中轻易地复制代码
index.html中添加js
<script src="//cdn.jsdelivr.net/npm/docsify-copy-code/dist/docsify-copy-code.min.js"></script>
11.分页导航
index.html中添加js
<script src="//cdn.jsdelivr.net/npm/docsify-pagination/dist/docsify-pagination.min.js"></script>
12.字数统计
index.html添加配置
window.$docsify = {
count:{
countable:true,
fontsize:'0.9em',
color:'rgb(90,90,90)',
language:'chinese'
}
}
添加js
<script src="//unpkg.com/docsify-count/dist/countable.js"></script>
13.Gitee Pages 部署
配置
配置生成GiteePages。创建了一个gitee仓库，专门用来做个人网站。
更新
14.本地启动 docsify 配置
主要配置css 和 js
进入node_modules中，找到docsify中对应的 docsify.mini.js 和 lib/themes/vue.css 引用即可。
