δΈζ | 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: ```bash npm create vuepress-theme-plume@latest ``` Or install manually: ```bash # 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: ```ts 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 ```bash npm run docs:dev ``` Visit