官网（配置参数）：https://docsify.js.org/#/zh-cn/plugins?id=%E5%85%A8%E6%96%87%E6%90%9C%E7%B4%A2-search

文章目录

Docsify的使用和手册说明
- 1.简介
- 2.特性
- 3.安装、使用和启动
- - （1）本地浏览
  - （2）指定端口
- 4.Loading 提示
- 5.页面配置
- - 单页面
  - 多页面
- 6.侧菜单
- - 嵌套页面链接为侧菜单
- 7.导航栏的设置
- - 通过页面链接创建导航栏
  - 通过文件配置设置导航栏
  - 导航嵌套列表模式
- 8.定制封面
- - 自定义背景
- 9.搜索
- 10.剪切板
- 11.分页导航
- 12.字数统计
- 13.Gitee Pages 部署
- - 配置
  - 更新
- 14.本地启动 docsify 配置

Docsify的使用和手册说明

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 引用即可。