不去做怎么知道做不到,用心做好每一天做好每一件事。|

轻风细雨_林木木

园龄:6年2个月粉丝:4关注:1

Docsify的使用和手册说明

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

1.简介

docsify 可以快速生成文档网站。不同于 GitBookHexo 的地方是它不会生成静态的 .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.jslib/themes/vue.css 引用即可。

本文作者:轻风细雨_林木木

本文链接:https://www.cnblogs.com/linzhifen5/p/16960971.html

版权声明:本作品采用知识共享署名-非商业性使用-禁止演绎 2.5 中国大陆许可协议进行许可。

posted @   轻风细雨_林木木  阅读(408)  评论(0编辑  收藏  举报
点击右上角即可分享
微信分享提示
评论
收藏
关注
推荐
深色
回顶
收起
  1. 1 尚好的青春 孙燕姿
  2. 2 孙燕姿
  3. 3 克卜勒 孙燕姿
克卜勒 - 孙燕姿
00:00 / 00:00
An audio error has occurred, player will skip forward in 2 seconds.