vuepress-theme-plume

中文 | English

Introduction

vuepress-theme-plume is a modern theme built on VuePress 2, designed for creating technical blogs, personal notes, product documentation, knowledge bases, and tutorial series.

The theme focuses on content presentation and user experience, providing rich Markdown extensions to make your documentation more beautiful, professional, and expressive.

Features

• 💻 Responsive Design - Perfectly adapts to mobile, tablet, and desktop devices
• 📖 Collection System - Create blogs, columns, product docs, technical docs, knowledge bases, and more through collections
• 🔗 Permanent Links - Auto-generate permanent article links
• ⚖ Multi-language Support - Built-in support for 7+ languages including English and Chinese
• 👀 Search & Comments - Supports local search, Algolia search, and multiple comment systems (Giscus, Waline, Twikoo, Artalk)
• 👨‍💻 Dual Theme Mode - Light/dark theme support including code highlighting
• 📠 Markdown Enhancement - Tip containers, task lists, math formulas, code demos, file trees, code trees, timelines, collapsible panels, and more
• 🧀 Enhanced Code Blocks - Code grouping, folding, focusing, line highlighting, word highlighting, twoslash, and more
• 😀 Icon System - Built-in Iconify with 200,000+ icons, supports IconFont and FontAwesome
• 📚 Code Demo Embedding - Supports CodePen, JSFiddle, CodeSandbox, Replit, and more
• 📊 Chart Support - Chart.js, ECharts, Mermaid, Flowchart, PlantUML, Markmap
• 🎛 Media Embedding - PDF, Bilibili, YouTube, local videos, audio, and more
• 🪞 Watermark - Full-site watermark and partial content watermark support
• 🔑 Content Encryption - Full-site encryption and partial encryption (directory encryption, article encryption)
• ⚡ Performance Optimization - Compilation caching mechanism significantly improves build speed
• 🔥 Hot Reload Configuration - Theme configuration changes take effect without restarting

Quick Start

Environment Requirements

• Node.js: ^20.19.0 or >= 22.0.0
• Package Manager: npm 8+, pnpm 8+, or Yarn 2+

Installation

Use the CLI tool to quickly create a project:

npm create vuepress-theme-plume@latest

Or install manually:

# Create project directory
mkdir my-blog && cd my-blog

# Initialize project
npm init

# Install dependencies
npm i -D vuepress@next vue
npm i -D vuepress-theme-plume @vuepress/bundler-vite@next

# Add scripts to package.json
{
  "scripts": {
    "docs:dev": "vuepress dev docs",
    "docs:build": "vuepress build docs"
  }
}

Configuration

Create the docs/.vuepress/config.ts configuration file:

import { viteBundler } from '@vuepress/bundler-vite'
import { defineUserConfig } from 'vuepress'
import { plumeTheme } from 'vuepress-theme-plume'

export default defineUserConfig({
  lang: 'en-US',
  title: 'My Blog',
  description: 'Welcome to my blog',
  bundler: viteBundler(),
  theme: plumeTheme({
    // Theme configuration
  }),
})

Start Development

npm run docs:dev

Visit http://localhost:8080 to view your site.

Documentation

For detailed documentation, visit: https://theme-plume.vuejs.press

Key Documentation

• Installation & Usage - Complete installation guide
• Theme Configuration - Configuration options explained
• Collections - Create blog and documentation columns
• Markdown Enhancement - Rich Markdown syntax
• Code Enhancement - Code block features
• Components - Built-in component usage
• Features - Comments, search, encryption, and more
• Deployment - Deploy to various platforms

Examples

• Author's Blog

View more examples

Community & Support

• QQ Group: 792882761
• Issue Tracker: GitHub Issues
• Discussions: GitHub Discussions

FAQ

How to update the theme?

npx vp-update

Out of memory during build?

export NODE_OPTIONS="--max_old_space_size=8192"
npm run docs:build

For more FAQs, please check the FAQ documentation.

Contribution Guide

Contributions are welcome! Please read the Contribution Guide first.

Development requirements:

• Node.js 20.19.0+
• pnpm 9+

Local development:

# Clone the repository
git clone https://github.com/pengzhanbo/vuepress-theme-plume.git

# Install dependencies
pnpm install

# Build the project
pnpm build

# Start development server
pnpm dev

Changelog

For detailed changelog, please refer to Changelog.

Contributors

Thank you to all contributors!

License

MIT

---