Catalog Page

VuePress Theme Hope provides catalog component and auto catalog generation using @vuepress/plugin-catalog.

Introduction

This feature is enabled by default. If there is no README.md in the folder, the theme will automatically generate a directory page for it. To disable, set plugins.catalog to false.

.vuepress/theme.ts

import { 
hopeTheme
 } from "vuepress-theme-hope";

export default 
hopeTheme
({
  
plugins
: {
    
catalog
: false,
  },
});

You can control catalog behavior via plugins.catalog in the theme options, for example:

• Exclude some folders from catalog generation via plugins.catalog.exclude
• Control frontmatter generation through plugins.catalog.frontmatter.

.vuepress/theme.ts

import { 
hopeTheme
 } from "vuepress-theme-hope";

export default 
hopeTheme
({
  
plugins
: {
    
catalog
: {
      
frontmatter
: (
path
) => {
        if (
path
.
startsWith
("/zh/")) return { 
title
: "目录" };

        return { 
title
: "Catalog" };
      },
      
exclude
: ["/api/", "/zh/api/"],
    },
  },
});

For detailed configuration, see Catalog plugin docs.

Catalog Component

You can use the <Catalog> component directly in Markdown to display the catalog.

Homepage Catalog Demo

Catalog

• Changelog

• Config

  • Config Intro
  • I18n
  • Theme Config
    Theme Basic OptionsTheme Feature OptionsTheme Layout OptionsTheme Appearance OptionsTheme I18n OptionsTheme Behavior Options
  • Markdown Config
    Markdown Behavior ConfigMarkdown Grammar ConfigMarkdown Stylize ConfigMarkdown Chart ConfigMarkdown Code Config
  • Plugin Config
    Theme PluginsIcon Plugin ConfigSearch Plugin ConfigBlog Plugin ConfigComment Plugin ConfigCopyright Plugin ConfigFeed Plugin ConfigOther Plugin Config
  • Style config
  • Frontmatter Config
    Info Frontmatter ConfigLayout Frontmatter ConfigPlugin Frontmatter ConfigProject Home Frontmatter ConfigPortfolio Frontmatter ConfigBlog Home Frontmatter Config

• Contribution Guide

• Cookbook

  • Markdown Introduction
    Markdown DEMOEmoji List
  • About VuePress
    VuePress PageBuiltin Markdown featuresFile StructureVuePress ConfigPluginsTheme Config

• Demos

  • Real Projects
  • Blog Home
  • Customized Blog Home
  • Encryption Article (Password: 1234)
  • Portfolio Home
  • Project Home with features
  • Slot Demo

• FAQ

  • Common question
  • Vite FAQ
  • Troubleshooting
  • Common Errors

• Get Started

  • Runtime Setup
  • Create Project
  • Project Content
  • Project Config
  • Project Command
  • Project Structure
  • Project Deployment

• Guide

  • Theme Intro
    Theme introInstall / UsageMarkdown
  • Interface
    Dark modeTheme ColorIcon supportResponsive LayoutOther features
  • Component
    Markdown to Vue SFCGlobal ComponentsComponentBuilt-in Components
  • Markdown
    Markdown IntroGrammarContentStylizeChartCodeOthersExternal import
  • Layout
    NavBarSidebarHome PagePageFooterPortfolio PageSlide
  • Features
    Catalog PageComment ServiceCopyrightEncryptionImage PreviewNoticePage informationPage MetaSearchWatermark
  • Blog
    Blog IntroBlogger InfoArticle ListCategory and tagsTimelineBlog homepageBlog Page Path
  • Customize
    Customize colorsCustomizing FontsCustomize EffectsCustomize LayoutsTheme PresetsExternal Scripts and Styles
  • Advanced
    SEOSitemapPWAFeed SupportClient Config fileReplace ComponentsTheme Extending

<!-- Used to limit height -->
<div class="catalog-display-container">
  <Catalog base='/' />
</div>