Docsify使用指南（打造最快捷、最轻量级的个人&团队文档）
前言
网上关于动态文档生成工具有很多如：Docsify、 VuePress、Docute 、Hexo这些都是一些非常优秀的文档生成工具，本章主要介绍如何快速使用Docsify搭建一个快捷、轻量级的个人&团队文档。
什么是Docsify？
一个神奇的文档网站生成器。docsify 可以快速帮你生成文档网站。不同于 GitBook、Hexo 的地方是它不会生成静态的 .html 文件，所有转换工作都是在运行时。如果你想要开始使用它，只需要创建一个 index.html 就可以开始编写文档。
Docsify的特性
- 无需构建，写完文档直接发布
- 容易使用并且轻量 (压缩后 ~21kB)
- 智能的全文搜索
- 提供多套主题
- 丰富的 API
- 支持 Emoji
- 兼容 IE11
- 支持服务端渲染 SSR (示例)
轻量&完善的Docsify模板
该模板为一个简洁，并且完善的Docsify模板基本上可以满足百分之八十多的团队需求，你可以按照文章中的Docsify环境配置教程把运行Docsify所需要的环境配置起来，通过命令即可查看效果（配置环境顺利的话只要十来分钟）。
模板源码地址：Docsify-Guide
Node.js 安装配置
win+r：cmd进入命令提示符窗口，分别输入以下命令查看node和npm的版本能够正常显示版本号，则安装成功：
- node -v：显示安装的nodejs版本
- npm -v：显示安装的npm版本
docsify-cli工具安装
推荐全局安装
docsify-cli工具，可以方便地创建及在本地预览生成的文档。
npm i docsify-cli -g
项目初始化
如果想在项目的
./docs(文件名可以按自己的想法来)目录里写文档，直接通过init初始化项目。
docsify init ./Docsify-Guide
初始化成功后，可以看到 ./docs 目录下创建的几个文件
index.html入口文件README.md会做为主页内容渲染.nojekyll用于阻止 GitHub Pages 忽略掉下划线开头的文件
直接编辑 docs/README.md 就能更新文档内容，当然也可以添加更多页面。
本地运行docsify创建的项目
通过运行
docsify serve 项目名称启动一个本地服务器，可以方便地实时预览效果。默认访问地址 http://localhost:3000 。
docsify serve Docsify-Guide
基础配置文件介绍
其实我们维护一份轻量级的个人&团队文档我们只需要配置以下这几个基本文件就可以了。
| 文件作用 | 文件 |
|---|---|
| 基础配置项（入口文件） | index.html |
| 封面配置文件 | _coverpage.md |
| 侧边栏配置文件 | _sidebar.md |
| 导航栏配置文件 | _navbar.md |
| 主页内容渲染文件 | README.md |
| 浏览器图标 | favicon.ico |
基础配置项（index.html）
下面是一份基础的配置项模板如下(可直接Copy使用)。
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>Docsify-Guide</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="description" content="Description">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<!-- 设置浏览器图标 -->
<link rel="icon" href="/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<!-- 默认主题 -->
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify/lib/themes/vue.css">
</head> <body>
<!-- 定义加载时候的动作 -->
<div id="app">加载中...</div>
<script>
window.$docsify = {
// 项目名称
name: 'Docsify-Guide',
// 仓库地址，点击右上角的Github章鱼猫头像会跳转到此地址
repo: 'https://github.com/YSGStudyHards',
// 侧边栏支持，默认加载的是项目根目录下的_sidebar.md文件
loadSidebar: true,
// 导航栏支持，默认加载的是项目根目录下的_navbar.md文件
loadNavbar: true,
// 封面支持，默认加载的是项目根目录下的_coverpage.md文件
coverpage: true,
// 最大支持渲染的标题层级
maxLevel: 5,
// 自定义侧边栏后默认不会再生成目录，设置生成目录的最大层级（建议配置为2-4）
subMaxLevel: 4,
// 小屏设备下合并导航栏到侧边栏
mergeNavbar: true,
}
</script>
<script>
// 搜索配置(url：https://docsify.js.org/#/zh-cn/plugins?id=%e5%85%a8%e6%96%87%e6%90%9c%e7%b4%a2-search)
window.$docsify = {
search: {
maxAge: 86400000,// 过期时间，单位毫秒，默认一天
paths: auto,// 注意：仅适用于 paths: 'auto' 模式
placeholder: '搜索',
// 支持本地化
placeholder: {
'/zh-cn/': '搜索',
'/': 'Type to search'
},
noData: '找不到结果',
depth: 4,
hideOtherSidebarContent: false,
namespace: 'Docsify-Guide',
}
}
</script>
<!-- docsify的js依赖 -->
<script src="//cdn.jsdelivr.net/npm/docsify/lib/docsify.min.js"></script>
<!-- emoji表情支持 -->
<script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/emoji.min.js"></script>
<!-- 图片放大缩小支持 -->
<script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/zoom-image.min.js"></script>
<!-- 搜索功能支持 -->
<script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/search.min.js"></script>
<!--在所有的代码块上添加一个简单的Click to copy按钮来允许用户从你的文档中轻易地复制代码-->
<script src="//cdn.jsdelivr.net/npm/docsify-copy-code/dist/docsify-copy-code.min.js"></script>
</body> </html>
封面配置文件（_coverpage.md）
index.html
<!-- index.html --> <script>
window.$docsify = {
coverpage: true
}
</script>
<script src="//cdn.jsdelivr.net/npm/docsify/lib/docsify.min.js"></script>
_coverpage.md
<!-- _coverpage.md --> # Docsify使用指南 > Docsify使用指南，使用Typora+Docsify打造最强、最轻量级的个人&团队文档。 简单、轻便 (压缩后 ~21kB)
- 无需生成 html 文件
- 众多主题 [开始使用 Let Go](/README.md)
侧边栏配置文件（_sidebar.md）
index.html
<!-- index.html --> <script>
window.$docsify = {
loadSidebar: true
}
</script>
<script src="//cdn.jsdelivr.net/npm/docsify/lib/docsify.min.js"></script>
在index.html基础配置文件中设置了二级目录
_sidebar.md
<!-- _sidebar.md --> * Typora+Docsify使用指南
* [Docsify使用指南](/ProjectDocs/Docsify使用指南.md) <!--注意这里是相对路径-->
* [Typora+Docsify快速入门](/ProjectDocs/Typora+Docsify快速入门.md)
* Docsify部署
* [Docsify部署教程](/ProjectDocs/Docsify部署教程.md)
导航栏配置文件（_navbar.md）
index.html
<!-- index.html --> <script>
window.$docsify = {
loadNavbar: true
}
</script>
<script src="//cdn.jsdelivr.net/npm/docsify/lib/docsify.min.js"></script>
_navbar.md
<!-- _navbar.md --> * 链接到我
* [博客园地址](https://www.cnblogs.com/Can-daydayup/)
* [Github地址](https://github.com/YSGStudyHards)
* [知乎地址](https://www.zhihu.com/people/ysgdaydayup)
* [掘金地址](https://juejin.cn/user/2770425031690333/posts)
* [Gitee地址](https://gitee.com/ysgdaydayup) * 友情链接
* [Docsify](https://docsify.js.org/#/)
* [博客园](https://www.cnblogs.com/)
全文搜索 - Search
Docsify主题切换
注意：切换主题只需要在根目录的index.html切换对应的主题css文件即可
详情参考：https://docsify.js.org/#/zh-cn/themes
Docsify详细部署教程
相关教程
Docsify使用指南（打造最快捷、最轻量级的个人&团队文档）的更多相关文章
- html5权威指南：标记文字、组织内容、文档分节
HTML5新增及删除标签:http://www.cnblogs.com/starof/archive/2015/06/23/4581850.html 第八章:标记文字 ...
- docsify网站文档工具用法总结
docsify , 网站文档动态生成工具,类似gitbook 特性 无需构建,写完文档直接发布 容易使用并且轻量 (~19kB gzipped) 智能的全文搜索 提供多套主题 丰富的 API 支持 E ...
- NetModular 新年第一更以及升级指南(打造简单易用的.Net Core模块化快速开发框架~)
先给大家拜个晚年,祝大家身体健康,远离肺炎~ NetModular开源已有一年,在这一年收到了很多建议,框架也变得越来越完善.这次更新包括了从去年年尾到现在所做的更改,感觉更改的内容还是蛮多的,所以记 ...
- 转：苹果Xcode帮助文档阅读指南
一直想写这么一个东西,长期以来我发现很多初学者的问题在于不掌握学习的方法,所以,Xcode那么好的SDK文档摆在那里,对他们也起不到什么太大的作用.从论坛.微博等等地方看到的初学者提出的问题,也暴露出 ...
- 使用docsify 写开源文档
使用docsify 写开源文档 官网:https://docsify.js.org/#/ docsify 是一个动态生成文档网站的工具.不同于 GitBook.Hexo 的地方是它不会生成将 .md ...
- 计算机基础 | 文档神器docsify安装及基本使用
为啥要用docsify? 神器Docsify让你的文档变得美观,配合typora,从此爱上看文档,各种优点:小巧.快速.美观.方便.快捷.上手快,可以浏览如下优秀案例 ve-charts pyecha ...
- [.NET] 打造一个很简单的文档转换器 - 使用组件 Spire.Office
打造一个很简单的文档转换器 - 使用组件 Spire.Office [博主]反骨仔 [原文]http://www.cnblogs.com/liqingwen/p/6024827.html 序 之前,& ...
- 一起学微软Power BI系列-官方文档-入门指南(7)发布与共享-终结篇+完整PDF文档
接触Power BI的时间也只有几个月,虽然花的时间不多,但通过各种渠道了解收集,谈不上精通,但对一些重要概念和细节还是有所了解.在整理官方文档的过程中,也熟悉和了解了很多概念.所以从前到后把微软官方 ...
- 网易测试分享会——“一起打造你想要的QA团队”
昨天(2016.11.30)参加了网易资深测试专家王晓明的测试分享会——“一起打造你想要的QA团队”,以下为笔者做的归纳总结. 重点 1.让测试更加容易做好.不容易测试的代码,不具有健壮性. 2.Ke ...
随机推荐
- [BUUCTF]PWN——jarvisoj_level1
jarvisoj_level1 附件 步骤: 例行检查,32位程序,没有开任何保护 本地运行一下程序,看看大概的情况,可以看到输出了一个地址 32位ida载入,习惯性的检索程序里的字符串,没有发现可以 ...
- MySQL 创建定时任务 详解
自 MySQL5.1.6起,增加了一个非常有特色的功能–事件调度器(Event Scheduler),可以用做定时执行某些特定任务,来取代原先只能由操作系统的计划任务来执行的工作.事件调度器有时也可称 ...
- SP8374 PARKET1 - PARKET 题解
Content 有一个 \(l\times w\) 大小的网格,其四周均被染成了红色,其余部分是棕色,已知红色网格与棕色网格的数量,求 \(l\) 与 \(w\) 的值. Solution 接下来给各 ...
- 多进程 multiprocessing 模块进程并发Process；Pool ；Queue队列 、threading模块；
multiprocessing 模块中的 Process类提供了跨平台的多进程功能,在windows和linux系统都可以使用. 1.首先要实例化一个类,传入要执行的函数. 实例名 = Process ...
- Android 运行C可执行程序
p.p1 { margin: 0; font: 12px "Helvetica Neue"; color: rgba(69, 69, 69, 1) } p.p2 { margin: ...
- 【LeetCode】671. Second Minimum Node In a Binary Tree 解题报告（Python）
作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 找出所有值再求次小值 遍历时求次小值 日期 题目地址 ...
- Buy Tickets(poj2828)
Buy Tickets Time Limit: 4000MS Memory Limit: 65536K Total Submissions: 17416 Accepted: 8646 Desc ...
- Netty 中的心跳机制
在TCP长连接或者WebSocket长连接中一般我们都会使用心跳机制–即发送特殊的数据包来通告对方自己的业务还没有办完,不要关闭链接. 网络的传输是不可靠的,当我们发起一个链接请求的过程之中会发生什么 ...
- 【机器学习】Pandas库练习-获取yahoo金融苹果公司的股票数据
# 获取yahoo金融苹果公司的股票数据. # 1.分析拉取的数据,找到收盘数据列的列名. # 2.绘制收盘价格柱状图. # 3.分析拉取的数据涨跌率,股价移动平均和波动率. # 4. 找出开盘价和收 ...
- Distillation as a Defense to Adversarial Perturbations against Deep Neural Networks
目录 概 主要内容 算法 一些有趣的指标 鲁棒性定义 合格的抗干扰机制 Nicolas Papernot, Patrick McDaniel, Xi Wu, Somesh Jha, Ananthram ...