Docsify基础配置

一、激活加载动画

轻松修改index.html文件：

<div id="app">内容加载中，请稍候...</div>

二、设定文档标题与Github链接

<script>window.$docsify = {name: '王涵的博客文档',repo: 'http://baidu.com',}
</script>

效果展示：
在这里插入图片描述

三、自定义侧边栏

修改index.html，启用loadSidebar选项。

启用后，首页将默认展示_sidebar.md文件内容。
```
<script>window.$docsify = {name: '',repo: '',loadSidebar: true}
</script>
```
编辑_siderbar.md文件，创建个性化侧边栏。使用[目录名称](目录相对路径)来引用其他文件夹中的文件。
效果展示：

四、设置目录层级

在index.html中添加subMaxLevel=2配置，实现两级目录结构。可根据需要设置更多层级。

<script>window.$docsify = {name: '王涵的博客文档',repo: 'http://baidu.com',loadSidebar: true,subMaxLevel: 2
}
</script>

修改_sidebar.md文件，调整为两级目录结构。
效果展示：

五、引入表情符号

参考所有emoji表情：EmojiAll

<script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/emoji.min.js"></script>

效果展示：
在这里插入图片描述

六、配置导航栏

在index.html中设置导航栏参数loadNavbar。

<script>window.$docsify = {name: '王涵的博客文档',repo: 'http://baidu.com',loadSidebar: true,subMaxLevel: 2,loadNavbar: true
}
</script>

编辑_navbar.md文件，定制导航栏内容。
效果展示：

七、启用独立封面页

修改index.html文件，添加相关配置。

<script>window.$docsify = {name: '王涵的博客文档',repo: 'http://baidu.com',loadSidebar: true,subMaxLevel: 2,loadNavbar: true,coverpage: true,onlyCover: true
}
</script>

创建_coverpage.md文件，配置封面页内容。在media文件夹中添加logo.jpg作为封面logo。
效果展示：

八、添加搜索插件

修改index.html配置文件。

<script>window.$docsify = {search: 'auto', // 默认搜索配置// 高级搜索配置search: {maxAge: 86400000, // 过期时间，单位毫秒，默认一天placeholder: '请输入搜索关键字',noData: '抱歉，没有找到相关内容。',depth: 2}
}
</script>

引入搜索插件。

<script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/search.min.js"></script>

效果展示：

九、实现剪切板功能

在index.html中引入剪切板插件。

<script src="//cdn.jsdelivr.net/npm/docsify-copy-code/dist/docsify-copy-code.min.js"></script>

十、集成分页插件

在index.html中引入分页插件。

<script src="//cdn.jsdelivr.net/npm/docsify-pagination/dist/docsify-pagination.min.js"></script>

效果展示：
在这里插入图片描述

十一、添加字数统计功能

修改index.html，添加相关配置。

<script>window.$docsify = {count: {countable: true,fontsize: '0.9em',color: 'rgb(90,90,90)',language: 'chinese'}
}
</script>

引入字数统计插件。

<script src="//unpkg.com/docsify-count/dist/countable.js"></script>

效果展示

十二、我的整体配置

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>王涵的博客文档</title><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /><meta name="description" content="Description"><meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0"><link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify@4/lib/themes/vue.css">
</head>
<body><div id="app">全力加载中...</div><script>window.$docsify = {name: '王涵的博客文档',repo: 'http://baidu.com',// 开启侧边栏loadSidebar: true,// 开启两级目录设置subMaxLevel: 2,// 导航栏loadNavbar: true,// 开启页面和独立封面coverpage: true,onlyCover: true,// 配置搜索参数search: 'auto', // 默认值// 完整配置参数search: {maxAge: 86400000,//过期时间,单位毫秒,默认一天placeholder: '请输入搜索关键字',noData: '没有搜到呦!',depth: 2},// 字数统计count:{countable:true,fontsize:'0.9em',color:'rgb(90,90,90)',language:'chinese'}}</script><!-- Docsify v4 --><script src="//cdn.jsdelivr.net/npm/docsify@4"></script><!-- 引入表情 --><script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/emoji.min.js"></script><!-- 搜索插件 --><script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/search.min.js"></script><!-- 剪切板 --><script src="//cdn.jsdelivr.net/npm/docsify-copy-code/dist/docsify-copy-code.min.js"></script><!-- 分页插件 --><script src="//cdn.jsdelivr.net/npm/docsify-pagination/dist/docsify-pagination.min.js"></script><!-- 字数统计 --><script src="//unpkg.com/docsify-count/dist/countable.js"></script>
</body>
</html>