「docsify」学习笔记

简单来说，docsify可以动态地将Markdown文件转换html文件。所谓动态，即所有转换工作都是在运行时进行。这也就意味着，你如果有需要搭建一个小型项目知识手册之类的网站时，使用docsify可以让你只需要一个index.html以及一大堆Markdown文件即可动态地生成很多html文件，让你更加方便地编辑Markdown文件，而不去操心html页面的排版问题，专注于内容的创作。

docsify官网首页的几句简单介绍就说出了它的全部优点：

准备使用docsify把自己家的家谱曼氏家谱实现网络化，寒假有事情做了~?

docsify需要Node.js环境，不知道Node.js的同学可以把它认为是一个无界面需要使用命令行操作的软件，而docsify需要在该软件中运行，因此在开始学习docsify之前，需要安装Node.js环境，安装十分简单，点击访问官网，然后按照提示下载你所使用的操作系统版本，安装一路回车即可。

安装界面

安装完成后，打开CMD命令行窗口（windows平台），输入node即可运行Node.js，出现以下提示说明安装成功：

然后就是安装docsify，继续在CMD命令行窗口中输入：

出现以下提示说明安装成功：

安装成功后，我们可以开始初始化docsify项目了，首先切换到你想要创建项目的文件目录，例如桌面文件夹：

切换到对应文件夹后，就可以开始初始化项目了，如果你想将项目文件放在docs子文件夹内，使用以下命令即可创建项目文件：

创建成功后，可以发现在桌面出现了一个docs文件夹，里面有三个文件，分别是README.md、index.html、.nojekyll（这个文件好像是上传GitHub什么什么用的，可以不用管）。

创建项目成功后，输入以下命令即可启动doscify服务：

这个时候根据提示，打开电脑浏览器，访问电脑本地端口http://localhost:3000即可打开创建项目的首页。

使用VS code打开项目文件夹，编辑README.md文件，写下：

然后再次访问项目首页，即可发现：

这个时候我们就会发现，其实README.md文件中的内容即是项目首页显示的内容，即在运行项目后，docsify将Markdown文档README.md动态地转换成了网站的index.html文件。

这一步我在本地Node.js环境中运行没有问题，但是上传到Nigix服务器中，一旦访问README.md就会解析不出来，很奇怪。我的解决方法是在设置里添加：

这样的话就可以把index.md代替README.md解析为首页，完美解决。

链接可以让我们在网页之间进行跳转，如何在项目文件中添加链接？正如上文所说，docsify是把md文件动态地转换为html文件，那么我们只需要在md文件中插入链接不就会自动地在html中呈现出来了吗？

在README.md文件中写入新的一行：

然后在项目文件中新建一个guide.md文件，写入内容：

侧边栏的设置必须先创建一个_sidebar.md文件，然后写入：

然后在index.html添加设置：

这个时候打开网页就会发现已经有了侧边栏：

如果文件命名不是_sidebar.md，那么需要更改loadSidebar参数设置，例如我的侧边栏命名为summary.md，那么就需要将上一步在index.html中的设置更改为：

即可将summary.md文件设置为侧边栏。

在_sidebar.md文件中写下目录链接：

如何在侧边栏中显示md文件中的二级标题、三级标题？需要在设置中添加：

开启导航栏需要在设置中添加：

然后按照侧边栏_sidebar.md文件的模式编写_navbar.md：

开启首页需要在设置中添加：

然后按照编写_coverpage.md文件：

默认情况下，封面和文档是在同一页的，[Get Started](#docsify)链接直接写标题就行。如果需要把封面单独作为一个页面显示，需要在设置中添加：

需要注意的是，把封面单独作为一个页面后，跳转链接需要写全，例如：[Get Started](./README.md)。

默认情况下，首页背景色为随机色，如果需要固定背景图片或者颜色，可以通过：

进行设置。

官方推出的四种主题，只需要在首页引入即可使用：

添加设置：

引入文件：

设置：

引入文件：

设置：

引入文件：

设置：

引入文件：

设置：