学习过我的开源项目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文件,修改内容如下,修改后的导航栏可支持子级目录,既可以导航到本站,也可以导航到外部链接。