文章目录
前言
由于一些公司内部一些机密资料不方面使用外网进行管理，且公司内部都是使用十分古老的文件管理方式，所以笔者找到了docsify来记录管理一些隐私文档。
步骤
node环境安装
具体可以参照笔者写的这篇博客的nodejs配置部分，注意版本尽可能高一些，笔者服务器上使用的就是v16.14.2，这样就会避免一些没必要的语法错误
安装docsify-cli工具
npm i docsify-cli -g
进行页面配置
初始化项目结构
新建一个docs文件夹，然后执行如下命令
docsify init ./docs
docsify会创建如下结构的目录：
-| docs/
-| .nojekyll
-| index.html
-| README.md
编写index.html
代码如下所示，我们只需后续我们只需重点关注_sidebar.md(侧边栏)以及_sidebar.md对应的文件夹下的文档即可。
<!DOCTYPE html>
<html lang="en">
<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>
<body>
<div id="app"></div>
<script>
window.$docsify = {
<!-- 显示封面 -->
coverpage: true,
loadSidebar: true,
maxLevel: 2,
subMaxLevel: 4,
alias: {
//侧边栏
'/.*/_sidebar.md': '/_sidebar.md'//防止意外回退
},
search: {
placeholder: '搜索',
noData: '找不到结果!',
depth: 3
}
}
</script>
<!-- 侧边栏 -->
<script src="//unpkg.com/docsify/lib/docsify.min.js"></script>
<!-- Docsify v4 -->
<script src="//cdn.jsdelivr.net/npm/docsify@4"></script>
<!-- 搜索栏 -->
<script src="//unpkg.com/docsify/lib/plugins/search.js"></script>
<!-- 代码高亮 -->
<script src="//unpkg.com/prismjs/components/prism-bash.js"></script>
<script src="//unpkg.com/prismjs/components/prism-java.js"></script>
<script src="//unpkg.com/prismjs/components/prism-sql.js"></script>
<!-- 支持复制代码 -->
<script src="//unpkg.com/docsify-copy-code"></script>
</body>
</html>
编写_sidebar.md
如下所示，这就是简单的markdown语法，可以看出笔者这样编写会使得侧边栏出现一个关于测试文档的导航，这样导航会将kill_bug文件夹下的depoly.md内容渲染到浏览器
* 测试文档目录
* [测试文档](kill_bug/depoly.md)
创建kill_bug文件夹，在文件夹下编写depoly.md
这里需要注意，typora默认的图片会存到c盘的位置，一旦我们部署到服务器，图片文件是看不到的，所以我们需要将图片保存位置设置为当前目录的相对路径
以笔者为例，笔者在docs文件夹创建了一个img文件夹，且笔者文档路径是在docs文件夹的kill_bug文件夹下，所以笔者希望markdown文件保存的路径是 ../img/xxx.jpg
所以我们需要打开typora的偏好设置
按照如图所示的设置即可完成将图片保存的相对路径的img下
编写对应目录文档
完成上述步骤后，我们编写一下测试文档
设置封面样式
可以看到笔者在上文的index.html设置了开启封面，所以笔者在docs文件夹下创建一个_coverpage.md，并编写封面内容
# 鲨鱼文档库
> 个人工作数据归档
此处填写详细简介。
[查看封面](http://xxxx:3000/)
[查看主页](README.md)
编写主页
可以看到当我们打开运行项目，将readme.md作为主页显示内容，所以笔者同样编写了一下readme.md
## 测试篇
> 测试文档目录
- [测试文档](kill_bug/depoly.md)
云服务器配置git
这部其实不需要的读者可以忽略，笔者这一步仅仅是为了文档方便管理而已，笔者希望将项目传到github上，然后服务器拉取项目更新
拉取项目，然后跑起来
按照上文完成git配置后，把项目clone下来
运行并查看效果
首先到达docs文件所在的文件夹(注意是docs所在的父目录，不是docs文件夹内部)，运行如下命令
docsify serve docs
输入http://你的ip:3000/#/
以笔者为例，封面如图
主页
查看文档
遇到的问题
执行docsify serve docs出现 Uncaught SyntaxError: Unexpected identifier
笔者查阅网上大部分答案都说是语法问题，查看笔者node版本为6，故推断可能是版本问题导致不兼容，所以node版本改为16解决
更多内容以及优化点
关于更多docsify的使用可以去官网查看
https://docsify.js.org/#/
使用docker部署
笔者这里参考了官网文档，地址如下
https://docsify.js.org/#/zh-cn/deploy?id=docker
按照文中步骤即可，需要注意的是构建镜像的时候可能会报如下的错误，解决方式也很简单，在Dockerfile中npm install后面补一句RUN npm install -g npm@8.6.0即可
npm notice Run `npm install -g npm@8.6.0` to update
FROM node:latest
LABEL description="A demo Dockerfile for build Docsify."
WORKDIR /docs
RUN npm install -g docsify-cli@latest
RUN npm install -g npm@8.6.0
EXPOSE 3000/tcp
ENTRYPOINT docsify serve .
注意，docker运行docsify时需要在docs目录内部再运行
docker run -itp 3000:3000 --name=docsify -v $(pwd):/docs docsify/demo
2022-4-19补充(docify后台运行的方法)
笔者之前尝试在阿里云使用命令行的方式部署网站，结果一旦退出终端网站就无法访问了，今天看到一篇博客刚刚好可以解决这个问题。
我们在把网站挂到nginx上就可以实现网站后台运行了，具体操作步骤如下
- 安装nginx，可以参考笔者写的这篇文章Linux下的nginx部署、安装、测试
- 编辑配置文件
vim /etc/nginx/conf.d/web.conf
server{
listen 80;
server_name 你的域名;
location / {
# 这里时docs的文件目录
alias /root/blog/docs/;
index index.html;
try_files $uri $uri/ index.html;
}
}
- 启动nginx
补充：文件夹下多文件遍历为导航栏文件
通过docsify我们知道，无论是导航栏还是侧边栏，一级导航和文章的格式如下格式
- 导航栏或者侧边栏
- [文件名](文章路径)
假如我们的文章和文件都在本地文件夹又该怎么办呢？就以笔者为例，笔者最近将csdn的文章转移的个人博客作为备份，经过导出后博客导出的文章有几百个，如果我们手动去编写侧边栏和导航栏关于文章的路径，我们会把自己搞崩溃的。
所以我们可以通过java编码去输出遍历文章所在的文件夹或者文件，如下所示，以笔者为例，所有csdn文章都会按照导航栏/文章的格式导出到download文件夹，所以我们传入对应的download文件夹，输出格式就如下图所示，然后再cv到侧边栏或者导航栏文件就大功告成了
public class ReadDir {
public static void main(String[] args) throws Exception {
readFile("D:\\download");
}
private static void readFile(String dirPath) throws Exception {
File fileDir = new File(dirPath);
if (!fileDir.exists()) {
throw new Exception("文件夹不存着");
}
if (fileDir.isDirectory()) {
//如果是文件夹，则输出- 文件夹名
System.out.println("- " + fileDir.getName());
// 遍历当前文件夹下的所有文件
String[] fileList = fileDir.list();
for (int i = 0; i < fileList.length; i++) {
File file = new File(dirPath + "\\" + fileList[i]);
if (file.isDirectory()) {
//如果遍历的文件还是文件夹，则递归遍历其目录下所有文件
readFile(file.getPath());
} else {
System.out.println(String.format(" - [%s](%s/%s)",fileList[i].replace(".md",""),fileDir.getName(),fileList[i]));
}
}
}
}
}
