Skip to content

VuePress theme configuration

VuePress theme configuration refers to the settings defined within the themeConfig object of the site's configuration file (typically config.js). This section controls the visual presentation, navigation, and metadata of the blog^[600-developer-blog-vuepress-blog-vuepress-init.md].

Core Configuration

To apply a specific theme, the configuration file must export a theme property^[600-developer-blog-vuepress-blog-vuepress-init.md]. A commonly used theme is 'reco', which is tailored for blogging^[600-developer-blog-vuepress-blog-vuepress-init.md].

Basic site metadata, such as the site title and description, are defined at the root level but influence the theme's display^[600-developer-blog-vuepress-blog-vuepress-init.md]. The output directory for the generated static site is specified by the dest property^[600-developer-blog-vuepress-blog-vuepress-init.md].

Theme Config Options

The themeConfig object accepts a variety of options to customize the site's functionality and appearance^[600-developer-blog-vuepress-blog-vuepress-init.md].

  • Navigation (nav): Defines the top navigation bar links. This can be imported from a separate file (e.g., "./nav")^[600-developer-blog-vuepress-blog-vuepress-init.md].
  • Logo: Specifies the path to the logo image (e.g., '/logo.png')^[600-developer-blog-vuepress-blog-vuepress-init.md].
  • Sidebar (sidebar): Configures the side navigation bar. This can be set to 'auto', which automatically generates the sidebar based on the file structure, or configured manually via an imported file^[600-developer-blog-vuepress-blog-vuepress-init.md].

Blog Settings

  • Type: Setting type: 'blog' enables blog-specific features^[600-developer-blog-vuepress-blog-vuepress-init.md].
  • Blog Config: Detailed blog settings are often modularized into a separate configuration file imported via the blogConfig property^[600-developer-blog-vuepress-blog-vuepress-init.md].

Author Information

  • Author: The author's name is set using the author property^[600-developer-blog-vuepress-blog-vuepress-init.md].
  • Avatar: The authorAvatar property sets the path to the author's profile picture^[600-developer-blog-vuepress-blog-vuepress-init.md].

Search and Metadata

  • Search: Local search functionality can be toggled using the search boolean^[600-developer-blog-vuepress-blog-vuepress-init.md]. The searchMaxSuggestions option limits the number of search results displayed^[600-developer-blog-vuepress-blog-vuepress-init.md].
  • Last Updated: Displays the last updated time for pages^[600-developer-blog-vuepress-blog-vuepress-init.md].
  • Start Year: Indicates the starting year of the project, often used in copyright information^[600-developer-blog-vuepress-blog-vuepress-init.md].

Sources

^[600-developer-blog-vuepress-blog-vuepress-init.md]