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 plugin.autoCatalog to false.

You can control this via plugin.autoCatalog in the theme options, for example:

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

For detailed configuration, see Auto Catalog plugin docs.

Catalog Component

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

Homepage Catalog Demo

Catalog

• Changelog

• Config

  • Config Intro
  • I18n
  • Style config
  • Theme Config
    Theme Basic OptionsTheme Feature OptionsTheme Layout OptionsTheme Appearance OptionsTheme I18n OptionsTheme Behavior Options
  • Plugin Config
    Theme PluginsBlog Plugin ConfigComment Plugin ConfigCopyright Plugin ConfigFeed Plugin ConfigMdEnhance Plugin ConfigPWA Plugin ConfigOther Plugin Config
  • Frontmatter Config
    Info Frontmatter ConfigLayout Frontmatter ConfigPlugin Frontmatter ConfigHome Frontmatter ConfigBlog Home Frontmatter Config

• Cookbook

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

• Demos

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

• FAQ

  • Common Errors
  • Safari FAQ
  • Troubleshooting
  • Vite FAQ

• Get Started

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

• Contribution Guide

• Guide

  • Get Started
    Theme introInstall / UsageMarkdown
  • Interface
    DarkmodeTheme ColorIcon supportCode ThemesResponsive LayoutOther featuresPure ModeA11y
  • Markdown Enhance
    Enable EnhanceCode TabsOthersExternal importAttrs supportChart.jsCode DemoComponentComponentsCustom alignmentEChartsFlowchartFootnoteGFM alertHint boxImageInclude FilesMarkupMermaidPlaygroundPresentationStylizeSuperscript and SubscriptTabsTask listTeXVue Playground
  • Layout
    NavBarSidebarPath NavigationFooterPageHome PageSlide
  • Features
    SearchCatalog PageCode CopyComment ServiceCopyrightEncryptionImage PreviewPage informationPage Meta
  • Blog
    Blog IntroBlogger InfoArticle ListCategory and tagsTimelineBlog homepageBlog Page Path
  • Customize
    Customize colorCustomizing FontsCustomize EffectsUsing ComponentsCustomize LayoutsTheme PresetsExternal Scripts and Styles
  • Advanced
    SEOSitemapPWAFeed SupportClient Config fileReplace ComponentsTheme Extending

• Related Plugins

• V2 Migration

  • Config Migration Guide
  • Page Migration Guide
  • Style Migration Guide
  • V2 Highlights

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