docsify 教程
docsify 教程
参考 docsify
前期准备
安装 git
git 国内镜像下载地址
安装 npm
参照 npm 安装教程，安装 node ，建议选择 Long Term Support (LTS) 长期支持版本。
全局安装 docsify-cli 工具，可以方便创建及本地预览文档网站。
npm i docsify-cli -g
安装 notepad++
文本编辑器推荐安装 notepad++ 。
初始化
在 E:\GitHub 下打开 git bash here ,通过 docsify init ./name 初始化项目，自动生成 E:\GitHub\docsify 目录，且在该目录下会存在以下三个文件：
- .nojekyll
- index.html
- README. md
$ docsify init ./docsify
Initialization succeeded! Please run docsify serve ./docsify
docsify serve docsify 运行本地服务器，默认访问 http://localhost:3000 实时预览效果
$ docsify serve docsify
Serving E:\GitHub\docsify now.
Listening at http://localhost:3000
多页文档
-| docsify/
-| README.md
-| guide.md
-| zh-cn/
-| README.md
-| guide.md
对应的访问地址为
docs/README.md => http://domain.com
docs/guide.md => http://domain.com/guide
docs/zh-cn/README.md => http://domain.com/zh-cn/
docs/zh-cn/guide.md => http://domain.com/zh-cn/guide
侧边栏
默认加载方式
通过 _sidebar.md 文件创建
在 index.html 中配置 loadSidebar 选项，默认加载 _sidebar.md 文件
接着创建 _sidebar.md 文件，保存在根目录 E:\GitHub\docsify 下
* [首页](guide)
* [指南](zh-cn/guide)
* [自定义加载的文件](summary)
效果
自定义加载文件名
配置 loadSidebar 选项
效果
目录
配置 subMaxLevel，其后的数字表示能够显示副标题的级数
{docsify-ignore} 忽略特定标题；{docsify-ignore-all} 忽略特定页面下的所有标题；
修改 E:\GitHub\docsify\guide 文档如下
1 guide
# 一级标题0
不会显示在侧边栏
# 一级标题1
显示
## 二级标题1
显示
### 三级标题1
设置的 subMaxLevel: 2 ，故三级标题不显示
# 一级标题2
显示
## 二级标题2{docsify-ignore}
{docsify-ignore} 省略当前标题
# 一级标题3{docsify-ignore-all}
{docsify-ignore-all} 省略其下所有标题
## 二级标题3
显示
显示结果如下：
导航栏
两种方法：HTML 定义和 Markdown 文件定义
HTML 定义
注意链接要以 #/ 开头。
Markdown 文件定义
先配置 loadNavbar ，默认加载的文件为 _navbar.md
创建 _navbar.md ，保存在根目录 E:\GitHub\docsify 下
* [En](/)
* [中文](/zh-cn/)
与侧边栏一样，也可以自定义加载文件名
window.$docsify = {
// 加载 _navbar.md
loadNavbar: true,
// 加载 nav.md
loadNavbar: 'nav.md'
};
Markdown 文件配置的优先级高于直接在 HTML 里定义
嵌套（下拉列表）
如果导航内容过多，可以写成嵌套的列表，会被渲染成下拉列表的形式。
修改 _navbar.md 文件
- 导航1
- [home 1](/)
- [guide 1](/guide)
- 导航2
- [home 2](/zh-cn/)
- [guide 2](/zh-cn/guide)
结果如下图：
封面
Markdown 文件配置
修改 index.html 文件
创建 _coverpage.md 文件，将引用图片保存在 E:\GitHub\docsify_medial 路径下
or
# docsify
> A magical documentation site generator.
* Simple and lightweight (~12kb gzipped)
* Multiple themes
* Not build static html files
[GitHub](https://github.com/docsifyjs/docsify/)
[Get Started](#quick-start)
一份文档只会在根目录下加载封面，其他页面或者二级目录下都不会加载。
背景
默认的背景是随机生成的渐变色，我们自定义背景色或者背景图。在文档末尾用添加图片的 Markdown 语法设置背景。
_coverpage.md
多个封面页
window.$docsify = {
coverpage: true,
// 自定义文件名
coverpage: 'cover.md',
// mutiple covers
coverpage: ['/', '/zh-cn/'],
// mutiple covers and custom file name
coverpage: {
'/': 'cover.md',
'/zh-cn/': 'cover.md'
}
};
更多
更多详细说明参照：
官方说明文档-英文版
官方说明文档-中文版
示例
完整项目可在 GitHub 上 fork
个人 index.html 的配置如下：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CS-Learningtitle>
<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="stylesheet" href="//unpkg.com/docsify/lib/themes/vue.css">
head>
<body>
<div id="app">div>
<script>
window.$docsify = {
maxAge: 100,
name: 'CS-Learning',//文档名
repo: 'dreamwhigh/CS-Learning',//Github corner 挂件
loadSidebar: true,//配置侧边栏
subMaxLevel: 2,//配置目录副标题级数
maxLevel: 3,
loadNavbar: true,//配置导航栏
coverpage: true,//配置封面
search: {
paths: 'auto',
placeholder: '? Type to search ',
noData: '? No Results! ',
// Headline depth, 1 - 6
depth: 6
},//增加搜索框
}
script>
<script src="//unpkg.com/docsify/lib/docsify.min.js">script>
<script src="//unpkg.com/docsify/lib/plugins/search.min.js">script>
<script src="//unpkg.com/prismjs/components/prism-java.min.js">script>
<script src="//unpkg.com/docsify/lib/plugins/zoom-image.js">script>
<script src="//unpkg.com/docsify-copy-code">script>
<script src="//unpkg.com/docsify-pagination/dist/docsify-pagination.min.js">script>
body>
html>