Build a Powerful Documentation Site with VuePress Hope Theme

VuePress Hope Theme Overview

VuePress Hope is a powerful VuePress theme that adds classification, tags, SEO, and many plugins, suitable for building project documentation and blog sites.

Demo

Demo screenshot of a site built with VuePress Hope.

Installation

Initialize the docs directory and run the following command:

<code>npm init vuepress-theme-hope@next docs</code>

After dependencies are installed, start the development server:

<code>npm run docs:dev</code>

Access the site at

http://localhost:8080/

.

Configuration

Navbar

Modify

navbar.ts

to customize the top navigation bar, supporting sub‑menus and external links.

<code>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" }
        ]
    }
]);</code>

Sidebar

Adjust

sidebar.ts

to set different sidebars for each path.

<code>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"]
});</code>

Icons

The theme uses iconfont; set

iconPrefix

in

themeConfig.ts

and omit the

icon-

prefix when referencing icons.

<code>export default defineThemeConfig({
  iconPrefix: "iconfont icon-"
});</code>

Site Information

Customize author, logo, repository, and other site details in

themeConfig.ts

.

<code>export default defineThemeConfig({
  hostname: "http://www.macrozheng.com",
  author: { name: "macrozheng", url: "http://www.macrozheng.com" },
  logo: "/logo.png",
  repo: "https://github.com/macrozheng",
  docsDir: "demo/src",
  navbar: navbar,
  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"
    }
  }
});</code>

Home Page

Edit

home.md

to define hero image, tagline, actions, and feature cards.

<code>---
home: true
icon: home
title: mall学习教程
heroImage: /logo.png
heroText: mall学习教程
tagline: mall学习教程，架构、业务、技术要点全方位解析。
actions:
  - text: 使用指南 💡
    link: /mall/foreword/mall_foreword_01
  - text: SpringCloud系列 🏠
    link: /springcloud/springcloud
    type: secondary
features:
  - title: mall学习教程
    icon: markdown
    details: mall学习教程，架构、业务、技术要点全方位解析。
    link: /mall/foreword/mall_foreword_01
  - title: SpringCloud学习教程
    icon: slides
    details: 包含 Spring Cloud Alibaba、Seata 等核心组件的实战教程。
    link: /springcloud/springcloud
  - title: K8S系列教程
    icon: layout
    details: 实用的 Kubernetes 实战教程，配套微服务项目 mall-swarm。
    link: https://juejin.cn/column/6962026171823292452
---</code>

Blog Home

Set layout to

Blog

in

README.md

and list projects.

<code>---
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: 前端项目，基于 Vue+Element 实现。
    link: https://github.com/macrozheng/mall-admin-web
  - icon: book
    name: mall-swarm
    desc: 微服务商城系统，使用 Spring Cloud Hoxton & Alibaba、Docker、Kubernetes 等技术。
    link: https://github.com/macrozheng/mall-swarm
  - icon: article
    name: mall-tiny
    desc: 基于 SpringBoot+MyBatis-Plus 的快速开发脚手架，提供完整权限管理。
    link: https://github.com/macrozheng/mall-tiny
---</code>

Code Highlighting

Change the code theme in

config.scss

to material‑light/dark.

<code>$codeLightTheme: material-light;
$codeDarkTheme: material-dark;</code>

Categories and Tags

Add front‑matter

category

and

tag

fields to enable classification.

<code>---
title: mall整合SpringBoot+MyBatis搭建基本骨架
date: 2021-08-19 16:30:11
category:
  - mall学习教程
  - 架构篇
tag:
  - SpringBoot
  - MyBatis
---</code>

Conclusion

VuePress Hope is an excellent tool for building documentation and blog sites, especially with its built‑in classification and tagging features that make content more structured and searchable.

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