在搭建商城项目的文档网站的时候使用了很多工具，比如Docsify、VuePress、Hexo、语雀等，对比了一下，如果好用、上线速度快或者Docsify，就不算了几分钟后上网的问题。今天我们就来说说Docsify的使用吧！SpringBoot实战电商项目商城（50k+star）地址：https://github.com/macrozheng/mall简介Docsify是一个开源的文档生成工具，目前在Github上有21K+Star。Docsify可以快速帮助您生成文档网站。与VuePrese和Hexo不同，它不会生成静态.html文件，所有转换都在运行时完成。安装使用Docsify，只需要安装NodeJs和Docsify的CLI工具，非常简单。安装NodeJs首先要下载NodeJs安装包，下载地址：https://nodejs.org/dist/v12.1...下载完成后点击下一步进行安装。如果要修改npm模块安装路径和缓存路径，可以使用如下命令；#修改npm的全局安装模块路径npmconfigsetprefix"D:\developer\env\node-v12.14.0\node_global"#修改npm的缓存路径npmconfigsetcache"D:\developer\env\node-v12.14.0\node_cache”，然后添加系统环境变量NODE_PATH；NODE_PATH=D:\developer\env\node-v12.14.0然后在系统环境变量的Path中添加如下路径。%NODE_PATH%\%NODE_PATH%\node_global\安装docsify-cli工具安装完NodeJs后，可以使用如下命令安装DocsifyCLI工具。npmidocsify-cli-g使用环境安装完成后，再来说说Docsify的使用。初始化项目首先，我们需要使用下面的命令来初始化一个项目。注意，如果找不到docsify命令，很可能是NodeJs环境变量配置有问题。docsifyinit./docs项目初始化后的基本结构如下-|文档/-|.nojekyll-|很快，下面是我完成的文档网站的最终效果图，还是不错的，访问地址：http://localhost:3000customsidebar从上面的效果图中可以看到，左边有一个侧边栏栏目用于显示文档内容和大纲，侧边栏可以在index.html文件中配置；然后在docs目录下添加侧边栏配置文件_sidebar.md，并添加如下配置；*序言*[商城结构与功能概览](foreword/mall_foreword_01.md)*[mall学习需要的知识点](foreword/mall_foreword_02.md)*架构*[商城集成SpringBoot+MyBatis搭建基本骨架](架构师/mall_arch_01.md)*[mall集成Swagger-UI实现在线API文档](architect/mall_arch_02.md)此时我们可以看到网站左侧出现侧边栏的时候，可以发现Docsify不一样来自VuePress，你可以直接使用Markdown来配置侧边栏。自定义导航栏Docsify也支持配置顶部导航栏，直接修改index.html文件，添加如下配置；然后创建_navbar.md文件并添加以下配置；*Demo*[后台管理](http://www.macrozheng.com/admin/index.html)*[移动端](http://www.macrozheng.com/app/mainpage.html)*项目地址*[后台项目](https://github.com/macrozheng/mall)*[前端项目](https://github.com/macrozheng/mall-admin-web)*[学习教程](https://github.com/macrozheng/mall-learning)*[项目框架](https://github.com/macrozheng/mall-tiny)*SpringCloud*[SpringCloud版本](https://github.com/macrozheng/mall-swarm)*[SpringCloudTutorial](https://github.com/macrozheng/springcloud-learning)此时我们的文档网站顶部可以显示导航栏。自定义封面Docsify也支持封面的配置，直接修改index.html文件，添加如下配置；然后创建_coverpage.md文件，添加如下配置即可;#mall-learning>商城学习教程，全面解析架构、业务、技术要点。商城项目（50k+star）是一个电商系统，现阶段采用主流技术实现。涵盖SpringBoot、MyBatis、Elasticsearch、RabbitMQ、Redis、MongoDB、Mysql等技术，采用Docker容器化部署。[GitHub](https://github.com/macrozheng/mall-learning)[GetStarted](README.md)此时封面会显示如下效果，修改配置时可以发现，Docsify修改配置和内容可以立即生效，非常快，比VuePress编译快很多。插件Docsify也有丰富的插件支持。这里我们说说一些常用的插件。全文搜索如果要实现全文搜索，可以在index.html中添加搜索插件配置；添加成功后，文档网站在左上角打开搜索功能。代码高亮如果想实现代码高亮，可以在index.html中添加代码高亮插件；以上是几个常用的代码高亮插件，添加完成后即可实现代码高亮。一键复制代码如果你想实现一键复制代码，Docsify也有插件可以支持，只需在index.html中添加如下插件即可；添加完成后，一个复制代码按钮会出现在我们代码的右上角。Docsify的默认主题很好，但是有没有其他主题可以替代呢？这里有一个愉快的主题docsify-themeable，只需修改index.htmlhead中导入的css代码即可；<头>
