一、什么是 docsify

docsify是一个有魔法的文档网站生成器，它能够动态生成您的文档网站。与GitBook、Hexo不同，它不生成静态html文件，而是智能地加载和解析您的md文件，并将其显示为网站。要开始使用它，只需创建一个index.html并将其部署在GitHub Page/Gitee Page等第三方站点上即可。

官网：docsify

特点：

无需构建静态的html文件

轻量

拥有智能的全文搜索插件

支持多主题

支持丰富的API插件

支持表情符号

兼容 IE11

支持服务端的渲染

以前曾经折腾过一段时间 hexo 个人静态博客，总体来说还是比较满意的，hexo 也支持md渲染、一键部署、包括很多三方的插件和丰富的拓展性，唯一的不足可能就是相比 docify 配置比较麻烦，两者最大的区别就是当本地文件变更的时，hexo 需要首先通过hexo -c清空目前生成的静态网页文件，然后再通过hexo -g根据本地变更后的新文件构建出一个 public目录存放网站的静态文件，然后如果需要查看效果的话，还需通过hexo -s启动本地的hexo服务，而 Docsify 并不需要构建静态html文件，并且本地文件变更时网站会进行热部署，自动的变更到本地3000端口实时展示，极大的减轻了我们对于网站的管理，能让我们更加专注的进行文档编写或者知识的分享。

二、安装 docsify

安装 docsify 之前，我们需要安装npm包管理器，而安装了node.js就会自动安装npm，对于node.js，直接去Node.js官网选择合适的版本进行下载，然后一键安装即可。

zhongsiru@zhongsirudeAir ~ % npm -v
8.3.2

接着我们来全局安装 docsify-cli，这是一个 docsify 的命令行工具，可以帮助我们在本地进行 docsify 的初始化和网站的预览。

npm i docsify-cli -g

然后我们创建一个文件夹，用来存储 docsify 所有的文件，接着输入以下命令进行初始化

mkdir docsify
docsify init ./docsify

可以看到初始化成功了，我们就可以在刚创建的 Docsify 文件夹中查看到README.md和index.html两个文件，此外还存在一个隐藏文件.nojekyll

zhongsiru@zhongsirudeAir Documents % cd Docsify
zhongsiru@zhongsirudeAir Docsify % tree
.
├── README.md       # 会做为主页内容渲染
└── index.html  # 入口文件
└── .nojekyll       # 用于阻止 GitHub Pages 忽略掉下划线开头的文件

根据上述提示命令，我们便可启动 docsify 的网站，默认在本地的3000端口

我们访问该网址，便可以看到内容

这里渲染的内容就是上述 Docsify 文件夹中的 README.md，我们如果更改该文件中的内容，网站的内容会自动同步更新。

三、多页文档设置

我们可以轻松的在docsify 实现多级路由的网站，比如在前面创建的 Docsify 文件夹中创建guide.md、zh-cn/READEME.md、zh-cn/guide.md，结构如下所示：

.
├── README.md
├── guide.md
├── index.html
└── zh-cn├── README.md└── guide.md

此时我们访问如下url即可以访问到对应的页面：

README.md                    => http://localhost:3000/#/
guide.md                    => http://localhost:3000/#/guide
/zh-cn/README.md  => http://localhost:3000/#/zh-cn/
/zh-cn/guide.md   => http://localhost:3000/#/zh-cn/guide

四、定制化配置

4.1、侧边栏

默认情况下，我们的侧边栏是根据 Markdown 文件自动生成，我们也可以定制化进行设定，首先修改Docsdify/index.html开启侧边栏的选项添加loadSiderbar: true，这样设置后就会加载 Docsify 目录下的 _sidebar.md 文件进行加载而渲染成我们定制的侧边栏。

<script>window.$docsify = {name: '',repo: '',// 开启侧边栏定制,加载_sidebar.mdloadSidebar: true,}
</script>

然后我们在 Docsify 目录下创建一个 _sidebar.md 文件，里面可以对侧边栏进行配置，比如这里配置如下：

<!-- Docsify/_sidebar.md -->* [首页](/)
* [guide](/guide)
* [zh-cn](zh-cn/)
* [zh-cn guide](zh-cn/guide)

也就是 MarkDown 中的超链接语法，后面的路径也就对应着上述多页文档的路由路径

这样设置以后，渲染出的侧边栏如下图所示，我们点击对应地方即可跳转到对应的多页文档

此外我们还可以指定页面的标题，比如这里指定首页的标题为home

<!-- Docsify/_sidebar.md -->* [首页](/ "home")
* [guide](/guide)
* [zh-cn](zh-cn/)
* [zh-cn guide](zh-cn/guide)

Docsify个人网站搭建详细教程相关推荐

安装+wordpress+出现403+forbidden_教程篇 | WordPress网站搭建详细教程
嗨,大家好,上一次给大家分享了关于阿里云服务器的购买以及登录服务器的教程,这次分享的是利用阿里云服务器搭建wordpress网站的教程. 首先介绍一下wordpress. WordPress是当今世界 ...
【个人网站】零基础个人网站搭建完整教程二（网站服务器配置）
零基础个人网站搭建完整教程(二) 内容包括:前端搭建+后端搭建+如何选购服务器和域名+连接服务器+上传代码+网站上线(完整教程) 从0到1搭建网站零基础个人网站搭建完整教程(二) 前言三.选购服务 ...
win0php环境搭建,win10php环境搭建详细教程
大家在将系统更新为Win10系统后,对php环境搭建方法并不是很清楚.那么win10php环境搭建要怎么操作呢?其实win10php环境搭建的方法跟Win7/Win8.1系统的php环境搭建是相同道理 ...
搭建可视化网页的software package_网页制作与网站搭建步骤教程
原标题:网页制作与网站搭建步骤教程现代建设网站,只需要一个鸣蝉建站系统的账号,注册一个账号直接用网站模板建站,基本上几十秒就可以做出网站的雏形,随后再添加相关的产品信息和内容,即可建成网站. 鸣蝉智 ...
Win10 Anaconda下TensorFlow-GPU环境搭建详细教程（包含CUDA+cuDNN安装过程）（转载）...
win7(win10也适用)系统安装GPU/CPU版tensorflow Win10 Anaconda下TensorFlow-GPU环境搭建详细教程(包含CUDA+cuDNN安装过程) 目录 2.配置 ...
2021最新微信影视小程序源码无限代开+搭建详细教程
源码简介: 小程序可开通流量主,达到开通条件可以选择开通流量主即可躺着赚钱(流量主可以刷上去,但不推荐,有被封风险) 该程序后端为苹果CMS,绝非网传泛滥源码! 花钱买的某团队自运营版本,百分百的完 ...
Kurento-6.7.1 媒体服务器搭建详细教程（Kurento-Media-Server）
< Kurento-6.7.1 媒体服务器搭建详细教程 > 关于 Kurento 媒体服务器 Kurento 架构的核心是媒体服务器,它被命名为Kurento媒体服务器,即 KMS.Kur ...
查题公众号搭建详细教程,提供永久免费接口
查题公众号搭建详细教程,提供永久免费接口本平台优点:免费查题接口搭建多题库查题.独立后台.响应速度快.全网平台可查.功能最全! 1.想要给自己的公众号获得查题接口,只需要两步! 2.题库:题库后台 ...
linux搭建cdn教程_网站搭建新手教程：一步一步教你拥有一个属于自己WordPress网站...
应网友要求,今天知识吧为大家分享一篇新手建站教程,本来是打算做一个视频教程的,毕竟大家看的会直观一些,但是由于我的个人电脑在并不在身边,在公司电脑录新手建站视频又不太合适,所以就为大家写一篇图文教程吧 ...

Docsify个人网站搭建详细教程

目录