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
引用即可。
本文作者:轻风细雨_林木木
本文链接:https://www.cnblogs.com/linzhifen5/p/16960971.html
版权声明:本作品采用知识共享署名-非商业性使用-禁止演绎 2.5 中国大陆许可协议进行许可。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步