秒建炫酷的开源项目文档，这款神器用起来够优雅

学习过我的开源项目mall的朋友应该知道，我有一个使用Docsify 搭建的项目文档网站。使用Docsify搭建文档网站虽然简单，但是缺少分类、标签、SEO这类功能，随着文档越来越多，查找起来有点不方便！今天给大家推荐一个炫酷的文档主题vuepress-theme-hope，用来搭建项目文档网站正合适！

vuepress-theme-hope 简介

vuepress-theme-hope是一个具有强大功能的VuePress主题，为Markdown添加了更多增强语法，可用于搭建项目文档和博客网站。支持分类和标签功能，可以让你的文档更加结构化！内置多种插件，功能强大，值得一试！

演示效果

我们先来看下使用vuepress-theme-hope搭建的网站演示效果，还是挺炫酷的！

​

编辑切换为居中

添加图片注释，不超过 140 字（可选）

安装

使用vuepress-theme-hope搭建文档网站非常简单，基本就是开箱即用，我们先来安装它。

• 首先在安装目录下创建docs目录，然后使用如下命令初始化项目；

npm init vuepress-theme-hope@next docs

• 初始化过程中会安装所有依赖，还需要对项目进行一些设置，具体参考下图；

​

编辑切换为居中

添加图片注释，不超过 140 字（可选）

• 安装完成后可以选择立刻启动，也可以使用如下命令启动；

npm run docs:dev

• 启动成功后即可访问，下面是我已经配置完成的效果图，访问地址：http://localhost:8080/

​

编辑切换为居中

添加图片注释，不超过 140 字（可选）

• 我们可以发现该主题不仅支持多种颜色的切换，还支持深色模式和浅色模式，还是挺炫酷的！

​

编辑切换为居中

添加图片注释，不超过 140 字（可选）

使用

接下来介绍下vuepress-theme-hope主题的使用，主要是一些界面组件的使用和自定义配置。

目录结构

首先我们来了解下项目的整体目录结构，这对我们之后使用该主题会有很大的帮助。

​

编辑切换为居中

添加图片注释，不超过 140 字（可选）

这里需要注意的是，如果运行过程中出现错误，可以尝试删除.cache和.temp两个临时文件夹。

导航栏

• 一般来说我们都有修改顶部导航栏的需求，例如我们想要按照如下样式定制下导航栏；

• 可以修改navbar.ts文件，修改内容如下，修改后的导航栏可支持子级目录，既可以导航到本站，也可以导航到外部链接。

  </