Skip to content

VuePress Blog Theme Reco

VuePress Blog Theme Reco is a blog theme designed for VuePress 2.x, specifically tailored to support content creation workflows often originating from tools like [[Obsidian]].^[600-developer-blog-vuepress-blog-vuepress-init.md, 600-developer__blog__vuepress-blog__vuepress-init.md]

Initialization

To set up a project using this theme, the official theme-cli tool is used. The process involves a global installation followed by an initialization command where the user must select version 2.x^[600-developer-blog-vuepress-blog-vuepress-init.md, 600-developer__blog__vuepress-blog__vuepress-init.md].

npm install @vuepress-reco/theme-cli@1.0.7 -g
theme-cli init

Configuration

The theme is configured via the main config.js file. The base module exports set the theme to 'reco' and define standard metadata such as the site title and description^[600-developer-blog-vuepress-blog-vuepress-init.md, 600-developer__blog__vuepress-blog__vuepress-init.md].

A key aspect of the setup is the themeConfig object, which includes:

  • Navigation and Sidebar: Supports manual configuration (nav) or automatic generation (sidebar: 'auto')^[600-developer-blog-vuepress-blog-vuepress-init.md, 600-developer__blog__vuepress-blog__vuepress-init.md].
  • Blog Features: Activated by setting type: 'blog', allowing for specific blog configurations via a blogConfig module^[600-developer-blog-vuepress-blog-vuepress-init.md, 600-developer__blog__vuepress-blog__vuepress-init.md].
  • Search: Built-in search functionality is available, configurable via the search and searchMaxSuggestions options^[600-developer-blog-vuepress-blog-vuepress-init.md, 600-developer__blog__vuepress-blog__uepress-init.md].
  • Authoring: Fields for author, authorAvatar, and startYear are supported to personalize the blog footer and sidebar^[600-developer-blog-vuepress-blog-vuepress-init.md, 600-developer__blog__vuepress-blog__vuepress-init.md].

Deployment

The theme documentation outlines a deployment strategy using GitHub Actions. The workflow is designed to trigger on pushes to the main branch or manually via workflow_dispatch^[600-developer-blog-vuepress-blog-vuepress-init.md, 600-developer__blog__vuepress-blog__vuepress-init.md].

Key steps in the deployment process include:

  • Git History: The checkout step uses fetch-depth: 0 to ensure full git history is retrieved, which is necessary for features like "Last Updated" to function correctly^[600-developer-blog-vuepress-blog-vuepress-init.md, 600-developer__blog__vuepress-blog__vuepress-init.md].
  • Build: A dedicated action (e.g., jenkey2011/vuepress-deploy) is used to build the site and push it to a target repository (often GitHub Pages)^[600-developer-blog-vuepress-blog-vuepress-init.md, 600-developer__blog__vuepress-blog__vuepress-init.md].

Content Structure and Constraints

When managing content for this theme, specific structural constraints must be observed to ensure compatibility:

  • File Paths: The file paths must not contain Chinese characters^[600-developer-blog-vuepress-blog-vuepress-init.md, 600-developer__blog__vuepress-blog__vuepress-init.md].
  • Image Links: Images should utilize relative paths. For users managing content in [[Obsidian]], it is recommended to use plugins such as obsidian-consistent-attachments-and-links to handle relative linking correctly, potentially requiring adjustments to Obsidian's basic settings regarding attachment paths^[600-developer-blog-vuepress-blog-vuepress-init.md, 600-developer__blog__vuepress-blog__vuepress-init.md].

Sources

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