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.

You can control this 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.

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
  • #Plugin Config
    Theme PluginsMdEnhance Plugin ConfigBlog Plugin ConfigComment Plugin ConfigSearch 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

• #Related Plugins

• #Get Started

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

• #Guide

  • #Theme Intro
    Theme introInstall / UsageMarkdown
  • #Interface
    DarkmodeTheme ColorIcon supportResponsive LayoutOther features
  • #Component
    Markdown to Vue SFCGlobal ComponentsComponentBuilt-in Components
  • #Markdown Enhance
    Enable EnhanceGrammarContentStylizeChartCodeOthersExternal import
  • #Layout
    NavBarSidebarFooterPageHome PagePortfolio PageSlide
  • #Features
    Catalog PageCode BlockComment 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>