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 ...
随机推荐
- 分布式文件系统fastdfs安装以及python调用
fastfds的安装和使用 一.所需依赖 操作系统:centos7.x(注意的是centos使用yum安装相关依赖) fastdfs:V6.06.tar.gz libfastcommon:V1.0.4 ...
- 二、Uniapp+vue+腾讯IM+腾讯音视频开发仿微信的IM聊天APP，支持各类消息收发，音视频通话，附vue实现源码(已开源)-腾讯云后台配置TXIM
项目文章索引 1.项目引言 2.腾讯云后台配置TXIM 3.配置项目并实现IM登录 4.会话好友列表的实现 5.聊天输入框的实现 6.聊天界面容器的实现 7.聊天消息项的实现 8.聊天输入框扩展面板的 ...
- 【LeetCode】820. 单词的压缩编码 Short Encoding of Words（Python）
作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 题目地址:https://leetcode-cn.com/problems/short- ...
- 15 - Vue3 UI Framework - 完工部署
项目官网也基本完成了,接下来我们再讲一下如何将项目官网部署到 GitHub Pages 上 返回阅读列表点击 这里 项目配置 常见的模式有三种,即 History 模式 Hash 模式 Memory ...
- @Transactional 失效
1.Transactional注解标注方法修饰符为非public时,@Transactional注解将会不起作用. @Transactional void insertTestWrongModi ...
- CS5266代替AG9311|Type C转HDMI带PD3.0转换芯片|AG9311替代方案
ALGOLTEK AG9311是一款带PD3.0 Type C转HDMI的转换芯片,它主要用于usb Type-c拓展坞以及多功能usb Type-c转换器等产品设计当中,台湾瑞奇达新推出的CS526 ...
- Linux进程管理之基本指令
目录 基本介绍 显示系统执行的进程 指令 ps - aux 常用选项 每行栏目的含义 查看父进程 终止进程 相关指令 实用案例 踢掉某个非法登录用户 终止远程登录服务sshd,在适当的时候再次重启ss ...
- Java初学者作业——编写 Java 程序，定义 Java 类 （Point） 用来表示坐标，坐标范围在（0,0）到（100，100）以内，并显示合法的坐标在控制台。
返回本章节 返回作业目录 需求说明: 编写 Java 程序,定义 Java 类 Point 用来表示坐标,坐标范围在(0,0)到(100,100)以内,并显示合法的坐标在控制台. 实现思路: 定义 P ...
- 《手把手教你》系列技巧篇（五十三）-java+ selenium自动化测试-上传文件-上篇（详细教程）
1.简介 在实际工作中,我们进行web自动化的时候,文件上传是很常见的操作,例如上传用户头像,上传身份证信息等.所以宏哥打算按上传文件的分类对其进行一下讲解和分享. 2.为什么selenium没有提供 ...
- 论文翻译：2021_Semi-Blind Source Separation for Nonlinear Acoustic Echo Cancellation
论文地址:https://ieeexplore.ieee.org/abstract/document/9357975/ 基于半盲源分离的非线性回声消除 摘要: 当使用非线性自适应滤波器时,数值模型与实 ...