學習過我的開源專案mall的朋友應該知道，我有一個使用Docsify搭建的專案文件網站。使用Docsify搭建文件網站雖然簡單，但是缺少分類、標籤、SEO這類功能，隨著文件越來越多，查詢起來有點不方便！今天給大家推薦一個炫酷的文件主題vuepress-theme-hope，用來搭建專案文件網站正合適！SpringBoot實戰電商專案mall（50k+star）地址：https://github.com/macrozheng/mall
vuepress-theme-hope 簡介
vuepress-theme-hope是一個具有強大功能的VuePress主題，為Markdown新增了更多增強語法，可用於搭建專案文件和部落格網站。支援分類和標籤功能，可以讓你的文件更加結構化！內建多種外掛，功能強大，值得一試！
演示效果
我們先來看下使用vuepress-theme-hope搭建的網站演示效果，還是挺炫酷的！
安裝
使用vuepress-theme-hope搭建文件網站非常簡單，基本就是開箱即用，我們先來安裝它。- 首先在安裝目錄下建立
docs目錄，然後使用如下命令初始化專案；
npm init vuepress-theme-hope@next docs- 初始化過程中會安裝所有依賴，還需要對專案進行一些設定，具體參考下圖；
- 安裝完成後可以選擇立刻啟動，也可以使用如下命令啟動；
npm run docs:dev- 啟動成功後即可訪問，下面是我已經配置完成的效果圖，訪問地址：http://localhost:8080/
- 我們可以發現該主題不僅支援多種主題色的切換，還支援深色模式和淺色模式，還是挺炫酷的！
使用
接下來介紹下vuepress-theme-hope主題的使用，主要是一些介面元件的使用和自定義配置。目錄結構
首先我們來了解下專案的整體目錄結構，這對我們之後使用該主題會有很大幫助。
這裡需要注意的是，如果執行過程中出現錯誤，可以嘗試刪除.cache和.temp兩個臨時資料夾。
導航欄
- 一般來說我們都有修改頂部導航欄的需求，例如我們想要按如下樣式定製下導航欄；
- 可以修改
navbar.ts檔案，修改內容如下，修改後的導航欄可支援子級目錄，既可以導航到本站，也可以導航到外部連結。
export default defineNavbarConfig([
"/",
"/home",
{
text: "mall學習教程",
icon: "launch",
prefix: "/mall/",
children: [
{
text: "序章",
icon: "note",
link: "foreword/mall_foreword_01",
},
{
text: "架構篇",
icon: "note",
link: "architect/mall_arch_01",
},
{
text: "業務篇",
icon: "note",
link: "database/mall_database_overview",
},
{
text: "技術要點篇",
icon: "note",
link: "technology/mybatis_mapper",
},
{
text: "部署篇",
icon: "note",
link: "deploy/mall_deploy_windows",
}
],
},
{
text: "SpringCloud學習教程",
icon: "hot",
link: "/springcloud/springcloud",
},
{
text: "專案地址",
icon: "stack",
children: [
{
text: "後臺專案",
link: "https://github.com/macrozheng/mall",
},
{
text: "前端專案",
link: "https://github.com/macrozheng/mall-admin-web",
},
{
text: "學習教程",
link: "https://github.com/macrozheng/mall-learning",
},
{
text: "專案骨架",
link: "https://github.com/macrozheng/mall-tiny",
}
],
},
]);側邊欄
- 修改側邊欄也是個常見需求，例如給專案文件配置下目錄，方便檢視，比如我的mall學習教程的側邊欄；
- 實現上面的效果需要修改
sidebar.ts檔案，值得一提的是vuepress-theme-hope支援針對不同路徑實現不同的側邊欄，這樣就不用把所有文件側邊欄糅合在一起了；
export default defineSidebarConfig({
"/mall/":[
{
text: "序章",
icon: "note",
collapsable: true,
prefix: "foreword/",
children: ["mall_foreword_01", "mall_foreword_02"],
},
{
text: "架構篇",
icon: "note",
collapsable: true,
prefix: "architect/",
children: ["mall_arch_01", "mall_arch_02","mall_arch_03"],
},
{
text: "業務篇",
icon: "note",
collapsable: true,
prefix: "database/",
children: ["mall_database_overview", "mall_pms_01","mall_pms_02"],
},
{
text: "技術要點篇",
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學習教程的側邊欄，和mall學習教程的是分開的，結構更加清晰的了，這是使用Docsify無法做到的。
圖示
vuepress-theme-hope主題預設支援使用iconfont上的圖示，我們可以在專案文件中直接使用，以下是一些精選圖示；
- 由於在
themeConfig.ts中配置了圖示字首，在使用時需要去除icon-字首。
export default defineThemeConfig({
iconPrefix: "iconfont icon-",
})資訊定製
在使用vuepress-theme-hope搭建自己的專案文件網站時，需要定製一些自己的資訊，比如作者名稱、文件連結、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: "預設頁尾",
displayFooter: true,
blog: {
description: "SpringBoot實戰電商專案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中進行修改，比如下面樣式的專案文件首頁：
- 修改內容如下，支援在首頁上新增多個自定義模組。
---
home: true
icon: home
title: mall學習教程
heroImage: /logo.png
heroText: mall學習教程
tagline: mall學習教程，架構、業務、技術要點全方位解析。mall專案（50k+star）是一套電商系統，使用現階段主流技術實現。
actions:
- text: 使用指南 ?
link: /mall/foreword/mall_foreword_01
- text: SpringCloud系列 ?
link: /springcloud/springcloud
type: secondary
features:
- title: mall學習教程
icon: markdown
details: mall學習教程，架構、業務、技術要點全方位解析。mall專案（50k+star）是一套電商系統，使用現階段主流技術實現。
link: /mall/foreword/mall_foreword_01
- title: SpringCloud學習教程
icon: slides
details: 一套涵蓋大部分核心元件使用的Spring Cloud教程，包括Spring Cloud Alibaba及分散式事務Seata，基於Spring Cloud Greenwich及SpringBoot 2.1.7。
link: /springcloud/springcloud
- title: K8S系列教程
icon: layout
details: 實實在在的K8S實戰教程，專為Java方向人群打造！只講實用的，拋棄那些用不到又難懂的玩意！同時還有配套的微服務實戰專案mall-swarm，很好很強大！
link: https://juejin.cn/column/6962026171823292452
- title: mall
icon: markdown
details: mall專案是一套電商系統，包括前臺商城系統及後臺管理系統，基於SpringBoot+MyBatis實現，採用Docker容器化部署。
link: https://github.com/macrozheng/mall
- title: mall-admin-web
icon: comment
details: mall-admin-web是一個電商後臺管理系統的前端專案，基於Vue+Element實現。
link: https://github.com/macrozheng/mall-admin-web
- title: mall-swarm
icon: info
details: mall-swarm是一套微服務商城系統，採用了 Spring Cloud Hoxton & Alibaba、Spring Boot 2.3、Docker、Kubernetes等核心技術。
link: https://github.com/macrozheng/mall-swarm
- title: mall-tiny
icon: blog
details: mall-tiny是一款基於SpringBoot+MyBatis-Plus的快速開發腳手架，擁有完整的許可權管理功能，可對接Vue前端，開箱即用。
link: https://github.com/macrozheng/mall-tiny
copyright: false
footer: MIT Licensed | Copyright © 2019-present macrozheng
---部落格首頁
vuepress-theme-hope主題不僅可以做專案文件網站，也可以做部落格網站，我們先來看下它生成的部落格首頁樣式；
- 要實現上面的樣式，修改
README.md檔案即可，修改內容如下。
---
home: true
layout: Blog
icon: home
title: 主頁
heroImage: /logo.png
heroText: macrozheng的個人部落格
heroFullScreen: true
tagline: 這傢伙很懶，什麼都沒寫...
projects:
- icon: project
name: mall
desc: mall專案是一套電商系統，包括前臺商城系統及後臺管理系統，基於SpringBoot+MyBatis實現，採用Docker容器化部署。
link: https://github.com/macrozheng/mall
- icon: link
name: mall-admin-web
desc: mall-admin-web是一個電商後臺管理系統的前端專案，基於Vue+Element實現。
link: https://github.com/macrozheng/mall-admin-web
- icon: book
name: mall-swarm
desc: mall-swarm是一套微服務商城系統，採用了 Spring Cloud Hoxton & Alibaba、Spring Boot 2.3、Docker、Kubernetes等核心技術。
link: https://github.com/macrozheng/mall-swarm
- icon: article
name: mall-tiny
desc: mall-tiny是一款基於SpringBoot+MyBatis-Plus的快速開發腳手架，擁有完整的許可權管理功能，可對接Vue前端，開箱即用。
link: https://github.com/macrozheng/mall-tiny
footer: 自定義你的頁尾文字
---程式碼樣式
- 當然如果你覺得
vuepress-theme-hope預設的程式碼主題不夠炫酷，也可以自定義一下，預設是one-light和one-dark主題，還有多達十幾種深淺色主題可供選擇；
- 需要修改下
config.scss檔案，這裡改為了material系列的主題；
$codeLightTheme: material-light;
$codeDarkTheme: material-dark;- 淺色模式下程式碼樣式如下；
- 深色模式下程式碼樣式如下，還是挺炫酷的！
分類及標籤
vuepress-theme-hope內建了分類和標籤功能，可以讓我們的專案文件更加結構化，檢視內容也更方便，直接在文章頂部新增category和tag即可實現；
---
title: mall整合SpringBoot+MyBatis搭建基本骨架
date: 2021-08-19 16:30:11
category:
- mall學習教程
- 架構篇
tag:
- SpringBoot
- MyBatis
---- 新增成功後我們的文章標題下方會出現分類和標籤；
- 點選分類可以檢視該分類下所有文章；
- 點選標籤可以檢視所有相關文章，比起Docsify查詢文章效率大大提高了！
總結
vuepress-theme-hope確實是一款好用的工具，用來搭建專案文件網站和部落格網站正合適！尤其是它的分類、標籤功能，讓我們的文件能夠更加結構化，查詢也更加方便！