04、定制化配置项
打开 index.html 文件,在 script 标签中对 window.$docsify 进行配置,如下所示:
window.$docsify = { name: '教妹学Java', repo: 'https://github.com/itwanger/TechSisterLearnJava', }
1)name:文档标题,会显示在侧边栏顶部。
2)repo:GitHub 上的仓库地址,会在页面右上角渲染一个 GitHub 角标。
保存后,就可以在浏览器上查看到效果。
05、安装插件
1)全文搜索
全文搜索插件会根据当前页面上的超链接获取文档内容,在 localStorage 内建立文档索引。默认过期时间为一天,也可以指定需要缓存的文件列表或者过期时间。
打开 index.html 文件,添加全文搜索配置项,并引入 search.min.js,如下所示:
<body> <script> window.$docsify = { search: { paths: 'auto', placeholder: '搜索', noData: '找不到结果', depth: 3, }, } </script> <script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/search.min.js"></script> </body>
保存后,就可以在浏览器上查看到效果。
2)图片缩放
在 index.html 文件中引入 zoom-image.min.js 即可,如下所示:
<script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/zoom-image.min.js"></script>
保存后,就可以在浏览器上查看到效果,鼠标放到一张图片上时会出现缩小或者放大的图标,点击后就可以改变图片的形态。
3)复制到剪贴板
在所有的代码块上添加一个简单的 Click to copy 按钮来允许用户从你的文档中轻易地复制代码。在 index.html 文件中引入 docsify-copy-code 即可,如下所示:
<script src="//cdn.jsdelivr.net/npm/docsify-copy-code"></script>
保存后,就可以在浏览器上查看到效果。
4)字数统计
提供了统计中文汉字和英文单词的功能,并且排除了一些 markdown 语法的特殊字符例如 *、- 等。
打开 index.html 文件,添加 count 配置项,并引入 countable.js,如下所示:
<body> <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> </body>
保存后,就可以在浏览器上查看到效果。




