docsify中文文档
摘自视觉派pie 、Docsify快速搭建个人博客
文档网站生成工具、快速搭建个人博客
docsify 是一个动态生成文档网站的工具。不同于 GitBook、Hexo 的地方是它不会将 .md 转成 .html 文件，所有转换工作都是在运行时进行。
这将非常实用，如果只是需要快速的搭建一个小型的文档网站，或者不想因为生成的一堆 .html 文件“污染” commit 记录，只需要创建一个 index.html 就可以开始写文档而且直接部署在GitHub Pages。
特性
- 无需构建，写完文档直接发布
- 容易使用并且轻量 (~19kB gzipped)
- 智能的全文搜索
- 提供多套主题
- 丰富的 API
- 支持 Emoji
- 兼容 IE10+
- 支持 SSR (example)
生成文档的工具：
阿里的语雀、DokuWiki、MDwiki、HDwiki
使用Typora+docsify+GitHub Pages搭建团队知识库
文档案例
使用Vue全家桶+Node.js搭建的小型全栈项目
安装
全局安装docsify-cli工具，可以方便地创建及在本地预览生成的文档。
初始化项目
如果想在项目的 ./docs 目录里写文档，直接通过 init 初始化项目。
本地预览
通过运行 docsify serve 启动一个本地服务器，可以方便地实时预览效果。默认访问地址 http://localhost:3000
修改docs/index.html，配置 loadSidebar 选项
1
2
3
4
5
| window.$docsify = {
loadSidebar: true, // 开启左侧导航栏
name: '',
repo: ''
}
|
在根目录(docs)（与index.html同目录）中，新建_sidebar.md文件
1
2
3
4
5
6
7
8
9
10
11
12
| * 常用网址 // 分组名
* [Vue](website/vue.md) // 链接到对应文件
* 收藏博客
* [javascript](blogs/javascript.md)
* 常用软件
* [web前端](software/web.md)
* 笔记
[web前端](software/web.md)
|
配置 alias 避免不必要的回退过程 （即访问非根目录的页面时，会报_sidebar.md文件是404)
1
2
3
4
5
6
| window.$docsify = {
loadSidebar: true,
alias: {
'/.*/_sidebar.md': '/_sidebar.md'
}
}
|
新建对应的文件（如：website/vue.md 【新建website目录，新建vue.md】）
官方文档没有介绍左侧目录的折叠问题，可以使用这个开源：
git地址 https://github.com/iPeng6/docsify-sidebar-collapse
代码如下：
1
2
3
4
| <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify-sidebar-collapse/dist/sidebar.min.css" />
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify-sidebar-collapse/dist/sidebar-folder.min.css" />
<script src="//cdn.jsdelivr.net/npm/docsify-sidebar-collapse/dist/docsify-sidebar-collapse.min.js"></script>
|
使用sidebarDisplayLevel设置默认折叠的层级：
1
2
3
| window.$docsify = {
sidebarDisplayLevel: 1, // 如果想收起的是第一层级，设置为0
}
|
然后根据自己需求修改样式。
侧边栏三层级配置
参考docsify侧边栏折叠
_sidebar.md：
1
2
3
4
5
6
7
8
| * 项目
* [管理后台](project/manage.md)
* [新广告后台](project/ad_admin.md)
* [纳米盒应用后台2.0](project/AppManage2.0.md)
* [纳米盒管理后台](project/manage_new.md)
* [黄豆芽办公系统](project/ai.huangdouya.com.md)
* [黄豆芽sdk运营后台](project/hanteng-manage.vxinyou.com.md)
* [切支付](project/check_pay.md)
|
manage.md：（里面写什么都可以）
1
2
3
4
5
6
| ## 新广告后台
## 纳米盒应用后台2.0
## 纳米盒管理后台
## 黄豆芽办公系统
## 黄豆芽sdk运营后台
## 切支付
|
添加代码高亮
引入js文件：
1
| <script src="//cdn.jsdelivr.net/npm/prismjs@1/components/prism-bash.min.js"></script>
|
参考代码高亮
写代码的时候要加上bash
1
2
3
| ```bash
echo "hello"
```
|
添加搜索功能
修改window.$docsify（在docs/index.html）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| window.$docsify = {
loadSidebar: true,
name: '',
repo: '',
search: { // 添加
noData: {
'/': '无匹配结果'
},
paths: 'auto',
placeholder: {
'/': '搜索'
}
}
}
|
添加search.min.js插件（在docs/index.html）
1
| <script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/search.min.js"></script>
|
1
| <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify-sidebar-collapse/dist/sidebar.min.css" />
|
部署到服务器
如何把 Docsify 文档部署到服务器?
使用Typora+docsify+GitHub Pages搭建团队知识库
使用docsify 写开源文档+部署到云服务器
配置参考
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>工作文档</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="description" content="Description">
<link rel="shortcut icon" href="./favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify@4/lib/themes/vue.css">
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify-sidebar-collapse/dist/sidebar.min.css" />
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify-sidebar-collapse/dist/sidebar-folder.min.css" />
<style>
a{
text-decoration: none;
}
a:hover{
text-decoration: underline;
}
.sidebar ul li a{
/* color: #0088CC !important; */
font-weight: normal;
}
.content td a, .content p a{
font-weight: normal;
}
.markdown-section blockquote p{
font-weight: normal;
}
.markdown-section h5{
font-size: 1.05rem;
margin-top: 0.5rem;
margin-bottom: 1rem;
}
.markdown-section hr{
margin: 2em 0 0.5rem;
}
.sidebar-nav ul:not(.app-sub-sidebar)>li.folder::before{
display: none;
}
.sidebar-nav ul:not(.app-sub-sidebar)>li.file::before{
background: none;
}
.sidebar-nav ul:not(.app-sub-sidebar)>li::before{
content: "-";
top: -1px;
left: -10px;
width: 10px;
height: 10px;
}
.sidebar-nav ul:not(.app-sub-sidebar)>li.open::before{
transform: none;
}
.markdown-section p{
margin: 0;
}
.markdown-section th{
background-color: #f8f8f8;
color: #909399;
}
.markdown-section pre{
padding: 0 0.6rem;
margin: 0.6em 0;
}
.markdown-section pre>code{
padding: 0.4rem 5px;
}
.markdown-section code, .markdown-section output:after, .markdown-section pre{
font-family: 'Source Sans Pro,Helvetica Neue,Arial,sans-serif';
}
/* .sidebar{
width: 200px;
}
.sidebar-toggle{
width: 184px;
}
.content{
left: 200px;
}
.markdown-section{
max-width: 90%;
} */
</style>
</head>
<body>
<div id="app"></div>
<script>
window.$docsify = {
// name: '工作文档',
auto2top: true,
repo: '',
loadSidebar: true,
sidebarDisplayLevel: 0,
// subMaxLevel: 2,
alias: {
'/.*/_sidebar.md': '/_sidebar.md'
},
search: {
noData: {
'/': '无匹配结果'
},
paths: 'auto',
placeholder: {
'/': '搜索'
}
}
}
</script>
<!-- Docsify v4 -->
<script src="//cdn.jsdelivr.net/npm/docsify@4"></script>
<script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/search.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/docsify-sidebar-collapse/dist/docsify-sidebar-collapse.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/prismjs@1/components/prism-bash.min.js"></script>
</body>
</html>
|
