Docsify 安装
Node 安装
# wget https://cdn.npm.taobao.org/dist/node/v14.15.1/node-v14.15.1-linux-x64.tar.xz
# tar xvf node-v14.15.1-linux-x64.tar.xz -C /usr/local
# cd /usr/local
# mv node-v14.15.1-linux-x64/ node-14.15.1
# ln -s /usr/local/node-14.15.1/bin/npm /usr/local/bin/
# ln -s /usr/local/node-14.15.1/bin/node /usr/local/bin/
# node -v
# npm -v
Docsify 安装 \\ 需要先安装 node
# npm i docsify-cli -g
# ln -s /usr/local/node-14.15.1/bin/docsify /usr/local/bin/
# mkdir -p /data/www/node/syk.my \\ 创建 网页项目目录
# cd /data/www/node/syk.my
# docsify init ./docs \\ 建立
# cd docs
# docsify serve \\ http://localhost:3000 访问 ip + 端口
# docsify serve --port 4000 \\ 指定端口
# nohup docsify serve & \\ 后台启动
注:
Docsify: Markdown文件 的文档生成工具
关于 nginx 配置 不用安装node及docsify 直接指向即可
........................................................................................................................
Docsify 模板 --> 带折叠目录插件可直接使用
# vim index.html
<!-- index.html -->
<!-- 折叠目录插件作者: https://github.com/Wsine/blog -->
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta charset="UTF-8">
<title>A body without soul</title>
<!-- 站标 -->
<link rel="shortcut icon" href="https://img.cxywy.com/assets/avatar.png" type="image/x-icon">
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify/themes/vue.css">
</head>
<body>
<nav> <!-- 导航栏配置 只在这配置-->
<a href="#">Home</a>
<a href="https://www.syk.my/?page_id=6" target="_blank">Shell</a>
<a href="https://www.syk.my/?page_id=56" target="_blank">Linux</a>
<a href="https://www.syk.my/?page_id=124" target="_blank">Router</a>
<a href="https://www.syk.my/?page_id=402" target="_blank">Search</a>
<a href="https://www.syk.my/?page_id=386" target="_blan">Cpu</a>
<a href="https://www.syk.my" target="_blank">Teo</a>
<a href="https://www.syk.my/?page_id=2888" target="_blank">May</a>
<a href="#/数据采集/"></a>
</nav>
<div id="app"></div>
<script>
const sleep = ms => new Promise(r => setTimeout(r, ms));
window.$docsify = {
name: 'A body without soul', // 文档标题 会显示在侧边栏顶部
loadSidebar: true, // 侧边栏
subMaxLevel: 3, // 自定义侧边栏后默认不会再生成目录 也可以通过设置生成目录的最大层级开启这个功
auto2top: true, // 切换页面后是否自动跳转到页面顶部
coverpage: true, // 开启 封面
alias: {
'/Web/.*/_sidebar.md': '/Web/_sidebar.md',
'/%E5%9F%BA%E7%A1%80%E8%AF%AD%E6%B3%95/.*/_sidebar.md': '/基础语法/_sidebar.md',
'/%E5%BA%95%E5%B1%82%E5%8E%9F%E7%90%86/.*/_sidebar.md': '/底层原理/_sidebar.md',
'/%E6%8A%80%E6%9C%AF%E6%9D%82%E8%B0%88/.*/_sidebar.md': '/技术杂谈/_sidebar.md',
'/%E6%95%B0%E6%8D%AE%E5%88%86%E6%9E%90/.*/_sidebar.md': '/数据分析/_sidebar.md',
'/%E6%95%B0%E6%8D%AE%E5%AD%98%E5%82%A8/.*/_sidebar.md': '/数据存储/_sidebar.md',
'/%E6%95%B0%E6%8D%AE%E9%87%87%E9%9B%86/.*/_sidebar.md': '/数据采集/_sidebar.md',
'/%e6%96%87%e7%ab%a0%e7%b2%be%e9%80%89/.*/_sidebar.md': '/文章精选/_sidebar.md',
},
// 折叠目录
plugins: [
function (hook, vm) {
hook.doneEach(function () {
document.querySelectorAll(".sidebar-nav > ul > li").forEach(
function (node, index, nodelist) {
var span = document.createElement("span");
span.innerHTML = node.firstChild.data;
span.style.cursor = "pointer";
span.onclick = function (event) {
var ul = event.target.nextElementSibling;
if (ul.style.display === "none") {
ul.style.display = "block";
} else {
ul.style.display = "none";
}
};
node.firstChild.replaceWith(span);
node.lastChild.style.display = "none";
});
var active = document.querySelector(".sidebar-nav li.active");
if (active) {
active.parentElement.style.display = "block";
}
});
}
]
}
</script>
<!-- docsify -->
<script src="//cdn.jsdelivr.net/npm/docsify@4"></script>
<!-- 复制到剪贴板 -->
<script src="//cdn.jsdelivr.net/npm/docsify-copy-code"></script>
<script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/emoji.min.js"></script>
<!-- 语言高亮 -->
<script src="//cdn.jsdelivr.net/npm/prismjs@1/components/prism-bash.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/prismjs@1/components/prism-python.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/prismjs@1/components/prism-sql.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/prismjs@1/components/prism-c.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/prismjs@1/components/prism-java.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/prismjs@1/components/prism-ini.min.js"></script>
</body>
</html>
# vim _sidebar.md \\ 主页侧边栏 格式
<!-- docs/_sidebar.md -->
* Recognize yourself
- [Day 1](01/day1.md)
- [Day 2](01/day2.md)
* Recognize the world
- [Day 100](02/day100.md)
- [Day 101](02/day101.md)
# vim _coverpage.md \\ 封面格式
<!-- _coverpage.md -->
<!--  -->
# Be a low-key <small>08.05</small>
> The Seccret
[Oneself loneliness](https://syk.my)
[The Secret soul](#Secret)
# vim README.md \\ 主页格式
> May the beauty of the world be linked to you
- Rhonda Byrne
- The Secret
<br>
```
```
# mkdir 01
# cd 01
# vim day1.md \\ 内页格式
> Day 1
- 2021.6.15
<br>
```
```
...................................................................
Docsify 语法格式
内容编辑格式
关于标题
# 一级标题
## 二级标题
### 三级标题
- aaaaa \\ 无序列表
- bbbbb
- ccccc
1. aaaaa \\ 有序列表
2. bbbbb
3. ccccc
关于链接
[aaaaaa](https://www.baidu.com)
[aaaaaa](https://www.baidu.com "此处可能有炸弹") \\ 带 title的链接 title是 鼠标放上去会有 文字显示
关于图片
 \\ 带 title 图片 图片可以是相对地址
![alt][img01]
[img01]: https://www.baidu.com/a.jpg "此处可能有炸弹" \\ 引用方式
引用
> 澳门首家线上
关于字体
**粗体**
__粗体__
*看,我斜了没*
_真的很斜_
***粗体+斜体***
~我是删除线 此处的故事只能用泪水掩盖~
关于表格
| 姓名 | 年龄 | 三围|
| ----- | :----: | ----------: | \\ 设置的对齐方式 第一个姓名列为左对齐
| 罗余凤 | 18 | 18，27,30 | \\ 年龄有两个冒号为居中对齐 三围冒号在右边是右对齐
| 秋刀鱼 | 18 | 18，27,30 |
引用代码
`单行代码引用`
```bash \\ bash 为 bash语言 默认为此 ```go 为go语言
cd /data/
echo "啊啊啊"
while read line
do
done
``` \\ 多行引用代码
*** \\ 分割线
关于 页面 导航栏 目录 封面 设置 \\ 使用 相对路径即可 可以使用上面的模板即可 以下没有折叠目录的功能
# vim index.html
<head>
<meta charset="UTF-8">
<title>Document</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="description" content="Description">
<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"> \\ 默认主题 更换即可
</head>
<script>
window.$docsify = { \\ 没行以 , 结尾 最后一行不加 ,
name: '',
repo: '',
loadSidebar: true, \\ 开启对目录支持 loadSidebar: true
subMaxLevel: 2, \\ 显示的 目录层级为2
loadNavbar: true, \\ 开启对导航栏的支持
coverpage: true, \\ 开启封面
onlyCover: true \\ 封面 设置为单独页面 默认为false
}
</script>
# vim _sidebar.md \\ 目录
<!-- docs/_sidebar.md -->
* [首页](README) \\ 链接为 主页 README.md 文件
* [操作指南](guide)
# vim _navbar.md \\ 导航栏
* [首页](/)
* [第五章:Linux实战篇](01/)
* [ningx](02/)
* [php]()
* [操作指南](guide)
# vim _coverpage.md \\ 封面
<!-- _coverpage.md --> \\ 注释
 \\ 封面图片 如果封面不存在 也会有纯色渐变的背景
# Think About AI <small>3.5</small> \\ small 小字体 写3.5
> 一个神奇的文档网站生成器。
- 简单、轻便
- 无需生成 html 文件
[一个神奇的国度](https://syk.my) \\ 按钮 跳转链接
[Get Started](#Headline) \\ 按钮 跳转到 一级标题 Headline 为 README.md 的 一级标题
[Get Started](#README) \\ 当 开启了 图片 独立页面时候 不能跳转标题 需要跳转到 指定页面
主题
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify/themes/vue.css"> \\ 默认主题
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify/themes/buble.css">
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify/themes/dark.css">
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify/themes/pure.css">
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify/themes/dolphin.css">
导航栏 加 <body> 里
<nav>
<a href="#/">EN</a>
<a hhref="#/zh-cn/">中文</a>
</nav>
或者
<script>
window.$docsify = {
loadNavbar: true
}
</script>
<script src="//unpkg.com/docsify"></script>
_navbar.md
* [En](/)
* [中文](/zh-cn、)
