學(xué)習(xí)過我的開源項(xiàng)目mall的朋友應(yīng)該知道，我有一個(gè)使用Docsify 搭建的項(xiàng)目文檔網(wǎng)站。使用Docsify搭建文檔網(wǎng)站雖然簡(jiǎn)單，但是缺少分類、標(biāo)簽、SEO這類功能，隨著文檔越來越多，查找起來有點(diǎn)不方便！今天給大家推薦一個(gè)炫酷的文檔主題vuepress-theme-hope，用來搭建項(xiàng)目文檔網(wǎng)站正合適！

vuepress-theme-hope 簡(jiǎn)介

vuepress-theme-hope是一個(gè)具有強(qiáng)大功能的VuePress主題，為Markdown添加了更多增強(qiáng)語法，可用于搭建項(xiàng)目文檔和博客網(wǎng)站。支持分類和標(biāo)簽功能，可以讓你的文檔更加結(jié)構(gòu)化！內(nèi)置多種插件，功能強(qiáng)大，值得一試！

演示效果

我們先來看下使用vuepress-theme-hope搭建的網(wǎng)站演示效果，還是挺炫酷的！

添加圖片注釋，不超過 140 字（可選）

安裝

使用vuepress-theme-hope搭建文檔網(wǎng)站非常簡(jiǎn)單，基本就是開箱即用，我們先來安裝它。

• 首先在安裝目錄下創(chuàng)建docs目錄，然后使用如下命令初始化項(xiàng)目；

npm init vuepress-theme-hope@next docs

• 初始化過程中會(huì)安裝所有依賴，還需要對(duì)項(xiàng)目進(jìn)行一些設(shè)置，具體參考下圖；

?

編輯切換為居中

添加圖片注釋，不超過 140 字（可選）

• 安裝完成后可以選擇立刻啟動(dòng)，也可以使用如下命令啟動(dòng)；

npm run docs:dev

• 啟動(dòng)成功后即可訪問，下面是我已經(jīng)配置完成的效果圖，訪問地址：http://localhost:8080/

?

編輯切換為居中

添加圖片注釋，不超過 140 字（可選）

• 我們可以發(fā)現(xiàn)該主題不僅支持多種顏色的切換，還支持深色模式和淺色模式，還是挺炫酷的！

?

編輯切換為居中

添加圖片注釋，不超過 140 字（可選）

使用

接下來介紹下vuepress-theme-hope主題的使用，主要是一些界面組件的使用和自定義配置。

目錄結(jié)構(gòu)

首先我們來了解下項(xiàng)目的整體目錄結(jié)構(gòu)，這對(duì)我們之后使用該主題會(huì)有很大的幫助。

?

編輯切換為居中

添加圖片注釋，不超過 140 字（可選）

這里需要注意的是，如果運(yùn)行過程中出現(xiàn)錯(cuò)誤，可以嘗試刪除.cache和.temp兩個(gè)臨時(shí)文件夾。

導(dǎo)航欄

• 一般來說我們都有修改頂部導(dǎo)航欄的需求，例如我們想要按照如下樣式定制下導(dǎo)航欄；

?

編輯切換為居中

添加圖片注釋，不超過 140 字（可選）

• 可以修改navbar.ts文件，修改內(nèi)容如下，修改后的導(dǎo)航欄可支持子級(jí)目錄，既可以導(dǎo)航到本站，也可以導(dǎo)航到外部鏈接。

export default defineNavbarConfig([ "/", "/home", { text: "mall學(xué)習(xí)教程", icon: "launch", prefix: "/mall/", children: [ { text: "序章", icon: "note", link: "foreword/mall_foreword_01", }, { text: "架構(gòu)篇", icon: "note", link: "architect/mall_arch_01", }, { text: "業(yè)務(wù)篇", icon: "note", link: "database/mall_database_overview", }, { text: "技術(shù)要點(diǎn)篇", icon: "note", link: "technology/mybatis_mapper", }, { text: "部署篇", icon: "note", link: "deploy/mall_deploy_windows", } ], }, { text: "SpringCloud學(xué)習(xí)教程", icon: "hot", link: "/springcloud/springcloud", }, { text: "項(xiàng)目地址", icon: "stack", children: [ { text: "后臺(tái)項(xiàng)目", link: "https://github.com/macrozheng/mall", }, { text: "前端項(xiàng)目", link: "https://github.com/macrozheng/mall-admin-web", }, { text: "學(xué)習(xí)教程", link: "https://github.com/macrozheng/mall-learning", }, { text: "項(xiàng)目骨架", link: "https://github.com/macrozheng/mall-tiny", } ], }, ]);

側(cè)邊欄

• 修改側(cè)邊欄也是個(gè)常見需求，例如給項(xiàng)目文檔配置下目錄，方便查看，比如我的mall學(xué)習(xí)教程的側(cè)邊欄；

?

編輯切換為居中

添加圖片注釋，不超過 140 字（可選）

• 實(shí)現(xiàn)上面的效果需要修改sidebar.ts文件，值得一提的是vuepress-theme-hope支持針對(duì)不同路徑實(shí)現(xiàn)不同的側(cè)邊欄，這樣就不用把所有文檔側(cè)邊欄糅合在一起了；

export default defineSidebarConfig({ "/mall/":[ { text: "序章", icon: "note", collapsable: true, prefix: "foreword/", children: ["mall_foreword_01", "mall_foreword_02"], }, { text: "架構(gòu)篇", icon: "note", collapsable: true, prefix: "architect/", children: ["mall_arch_01", "mall_arch_02","mall_arch_03"], }, { text: "業(yè)務(wù)篇", icon: "note", collapsable: true, prefix: "database/", children: ["mall_database_overview", "mall_pms_01","mall_pms_02"], }, { text: "技術(shù)要點(diǎn)篇", icon: "note", collapsable: true, prefix: "technology/", children: ["mybatis_mapper", "aop_log"], }, { text: "部署篇", icon: "note", collapsable: true, prefix: "deploy/", children: ["mall_deploy_windows", "mall_deploy_docker"], } ], "/springcloud":["springcloud", "eureka", "ribbon"] });

• 看下配置好的SpringCloud學(xué)習(xí)教程的側(cè)邊欄，和mall學(xué)習(xí)教程的是分開的，結(jié)構(gòu)更加清晰的了，這是使用Docsify無法做到的。

?

編輯切換為居中

添加圖片注釋，不超過 140 字（可選）

圖標(biāo)

• vuepress-theme-hope主題默認(rèn)支持使用iconfont上的圖標(biāo)，我們可以在項(xiàng)目文檔中直接使用，以下是一些精選圖標(biāo)；

?

編輯切換為居中

添加圖片注釋，不超過 140 字（可選）

• 由于在themeConfig.ts中配置了圖標(biāo)前綴，在使用時(shí)需要去除icon-前綴。

export default defineThemeConfig({ iconPrefix: "iconfont icon-", })

信息定制

在使用vuepress-theme-hope搭建自己的項(xiàng)目文檔網(wǎng)站時(shí)，需要定制一些自己的信息，比如作者名稱、文檔鏈接、logo等信息，可以在themeConfig.ts中修改。

export default defineThemeConfig({ hostname: "http://www.macrozheng.com", author: { name: "macrozheng", url: "http://www.macrozheng.com", }, iconPrefix: "iconfont icon-", logo: "/logo.png", repo: "https://github.com/macrozheng", docsDir: "demo/src", // navbar navbar: navbar, // sidebar sidebar: sidebar, footer: "默認(rèn)頁腳", displayFooter: true, blog: { description: "SpringBoot實(shí)戰(zhàn)電商項(xiàng)目mall（50K+Star）的作者", intro: "https://github.com/macrozheng", medias: { Gitee: "https://gitee.com/macrozheng", GitHub: "https://github.com/macrozheng", Wechat: "https://example.com", Juejin: "https://juejin.cn/user/958429871749192", Zhihu: "https://www.zhihu.com/people/macrozheng", }, }, });

文檔首頁

• 首頁信息可以在home.md中進(jìn)行修改，比如下面樣式的項(xiàng)目文檔首頁：

?

編輯切換為居中

添加圖片注釋，不超過 140 字（可選）

• 修改內(nèi)容如下，支持在首頁上添加多個(gè)自定義模塊。

--- home: true icon: home title: mall學(xué)習(xí)教程 heroImage: /logo.png heroText: mall學(xué)習(xí)教程 tagline: mall學(xué)習(xí)教程，架構(gòu)、業(yè)務(wù)、技術(shù)要點(diǎn)全方位解析。mall項(xiàng)目（50k+star）是一套電商系統(tǒng)，使用現(xiàn)階段主流技術(shù)實(shí)現(xiàn)。 actions: - text: 使用指南 link: /mall/foreword/mall_foreword_01 - text: SpringCloud系列 link: /springcloud/springcloud type: secondary features: - title: mall學(xué)習(xí)教程 icon: markdown details: mall學(xué)習(xí)教程，架構(gòu)、業(yè)務(wù)、技術(shù)要點(diǎn)全方位解析。mall項(xiàng)目（50k+star）是一套電商系統(tǒng)，使用現(xiàn)階段主流技術(shù)實(shí)現(xiàn)。 link: /mall/foreword/mall_foreword_01 - title: SpringCloud學(xué)習(xí)教程 icon: slides details: 一套涵蓋大部分核心組件使用的Spring Cloud教程，包括Spring Cloud Alibaba及分布式事務(wù)Seata，基于Spring Cloud Greenwich及SpringBoot 2.1.7。 link: /springcloud/springcloud - title: K8S系列教程 icon: layout details: 實(shí)實(shí)在在的K8S實(shí)戰(zhàn)教程，專為Java方向人群打造！只講實(shí)用的，拋棄那些用不到又難懂的玩意！同時(shí)還有配套的微服務(wù)實(shí)戰(zhàn)項(xiàng)目mall-swarm，很好很強(qiáng)大！ link: https://juejin.cn/column/6962026171823292452 - title: mall icon: markdown details: mall項(xiàng)目是一套電商系統(tǒng)，包括前臺(tái)商城系統(tǒng)及后臺(tái)管理系統(tǒng)，基于SpringBoot+MyBatis實(shí)現(xiàn)，采用Docker容器化部署。 link: https://github.com/macrozheng/mall - title: mall-admin-web icon: comment details: mall-admin-web是一個(gè)電商后臺(tái)管理系統(tǒng)的前端項(xiàng)目，基于Vue+Element實(shí)現(xiàn)。 link: https://github.com/macrozheng/mall-admin-web - title: mall-swarm icon: info details: mall-swarm是一套微服務(wù)商城系統(tǒng)，采用了 Spring Cloud Hoxton & Alibaba、Spring Boot 2.3、Docker、Kubernetes等核心技術(shù)。 link: https://github.com/macrozheng/mall-swarm - title: mall-tiny icon: blog details: mall-tiny是一款基于SpringBoot+MyBatis-Plus的快速開發(fā)腳手架，擁有完整的權(quán)限管理功能，可對(duì)接Vue前端，開箱即用。 link: https://github.com/macrozheng/mall-tiny copyright: false footer: MIT Licensed | Copyright ? 2019-present macrozheng ---

博客首頁

• vuepress-theme-hope主題不僅可以做項(xiàng)目文檔網(wǎng)站，也可以做博客網(wǎng)站，我們先來看下它生成的博客首頁樣式；

?

編輯切換為居中

添加圖片注釋，不超過 140 字（可選）

分類及標(biāo)簽

--- home: true layout: Blog icon: home title: 主頁 heroImage: /logo.png heroText: macrozheng的個(gè)人博客 heroFullScreen: true tagline: 這家伙很懶，什么都沒寫... projects: - icon: project name: mall desc: mall項(xiàng)目是一套電商系統(tǒng)，包括前臺(tái)商城系統(tǒng)及后臺(tái)管理系統(tǒng)，基于SpringBoot+MyBatis實(shí)現(xiàn)，采用Docker容器化部署。 link: https://github.com/macrozheng/mall - icon: link name: mall-admin-web desc: mall-admin-web是一個(gè)電商后臺(tái)管理系統(tǒng)的前端項(xiàng)目，基于Vue+Element實(shí)現(xiàn)。 link: https://github.com/macrozheng/mall-admin-web - icon: book name: mall-swarm desc: mall-swarm是一套微服務(wù)商城系統(tǒng)，采用了 Spring Cloud Hoxton & Alibaba、Spring Boot 2.3、Docker、Kubernetes等核心技術(shù)。 link: https://github.com/macrozheng/mall-swarm - icon: article name: mall-tiny desc: mall-tiny是一款基于SpringBoot+MyBatis-Plus的快速開發(fā)腳手架，擁有完整的權(quán)限管理功能，可對(duì)接Vue前端，開箱即用。 link: https://github.com/macrozheng/mall-tiny footer: 自定義你的頁腳文字 ---

代碼樣式

• 當(dāng)然如果你覺得vuepress-theme-hope默認(rèn)的代碼主題不夠炫酷，也可以自定義一下，默認(rèn)是one-light和one-dark主題，還有多達(dá)十幾種深淺色主題可供選擇；

?

編輯切換為居中

添加圖片注釋，不超過 140 字（可選）

• 需要修改下config.scss文件，這里改為了material系列的主題；

$codeLightTheme: material-light; $codeDarkTheme: material-dark;

• 淺色模式下代碼樣式如下；

?

編輯切換為居中

添加圖片注釋，不超過 140 字（可選）

• 深色模式下代碼樣式如下，還是挺炫酷的！

?

編輯切換為居中

添加圖片注釋，不超過 140 字（可選）

分類及標(biāo)簽

• vuepress-theme-hope內(nèi)置了分類和標(biāo)簽功能，可以讓我們的項(xiàng)目文檔更加結(jié)構(gòu)化，查看內(nèi)容也更方便，直接在文章頂部添加category和tag即可實(shí)現(xiàn)；

--- title: mall整合SpringBoot+MyBatis搭建基本骨架 date: 2021-08-19 16:30:11 category: - mall學(xué)習(xí)教程 - 架構(gòu)篇 tag: - SpringBoot - MyBatis ---

• 添加成功后我們的文章標(biāo)題下方會(huì)出現(xiàn)分類和標(biāo)簽；

?

編輯切換為居中

添加圖片注釋，不超過 140 字（可選）

• 點(diǎn)擊分類可以查看該分類下所有文章；

?

編輯切換為居中

添加圖片注釋，不超過 140 字（可選）

• 點(diǎn)擊標(biāo)簽可以查看所有相關(guān)文章，比起Docsify查找文章效率大大提高了！

?

編輯切換為居中

添加圖片注釋，不超過 140 字（可選）

總結(jié)

vuepress-theme-hope確實(shí)是一款好用的工具，用來搭建項(xiàng)目文檔網(wǎng)站和博客網(wǎng)站正合適！尤其是它的分類、標(biāo)簽功能，讓我們的文檔能夠更加結(jié)構(gòu)化，查找也更加方便！

項(xiàng)目地址

https://github.com/vuepress-theme-hope/vuepress-theme-hope

???????????????????????資源獲取：

大家點(diǎn)贊、收藏、關(guān)注、評(píng)論啦 、查看👇🏻👇🏻👇🏻微信公眾號(hào)獲取聯(lián)系方式👇🏻👇🏻👇🏻

?精彩專欄推薦訂閱：在下方專欄👇🏻👇🏻👇🏻👇🏻

每天學(xué)四小時(shí)：Java+Spring+JVM+分布式高并發(fā)，架構(gòu)師指日可待

總結(jié)

以上是生活随笔為你收集整理的秒建炫酷的开源项目文档，这款神器用起来够优雅的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。