yuany3721/vuepress-theme-plume
1
0
Fork 0
forked from gitea-yuany3721/vuepress-theme-plume
Code Pull Requests Activity

docs: update readme

Browse Source
This commit is contained in:
pengzhanbo 2026-02-14 14:48:01 +08:00
parent dc160b3db4
commit 9c3899135b
2 changed files with 316 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

186
readme.en-US.md
View File

@ -23,48 +23,172 @@
<a href="/readme.md">中文</a> | English
</p>
A simple, clean, and easy-to-use VuePress theme for blogs、columns and documentation.
## Introduction
Ready to use out-of-the-box with minimal configuration,
allowing you to focus more on content creation and better express your ideas to form your knowledge notes.
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**.
It includes a rich set of powerful features designed to make content more expressive.
The theme focuses on content presentation and user experience,
providing rich Markdown extensions to make your documentation more beautiful, professional, and expressive.
## Features
- 💻 Responsive layout, adapts to different screen sizes
- 📖 Collection: you can simultaneously implement blogs, columns, product documentation, technical documentation, knowledge bases, and more.
- 🔗 Automatically generates article permanent links
- ⚖ Supports multiple languages
- 🔑 Supports full-site encryption and partial encryption
- 👀 Supports search and article comments
- 👨‍💻 Supports light/dark themes (including code highlighting)
- 📠 Markdown enhancement, supports, hint containers, task lists, mathematical formulas, code demonstrations, file trees, timeline and more.
- 🧀 Enhanced code blocks, support for grouping, folding, focusing, line highlighting, word highlighting, twoslash, and more.
- 📚 Embedded code demonstrations, supports CodePen, JSFiddle, CodeSandbox, etc.
- 📊 Embedded charts, supports chart.js, Echarts, Mermaid, flowchart，plantUML
- 🎛 Resource embedding, supports PDF, Bilibili videos, YouTube videos, local videos, audio, etc.
- 🪞 Supports full-site watermark and partial content watermark
- **💻 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
## [Documentation](https://theme-plume.vuejs.press)
## Quick Start
QQ communication group：[792882761](https://qm.qq.com/q/O3HNy4rxYc)
### 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 <http://localhost:8080> to view your site.
## Documentation
For detailed documentation, visit: [https://theme-plume.vuejs.press](https://theme-plume.vuejs.press)
### Key Documentation
- [Installation & Usage](https://theme-plume.vuejs.press/en/guide/usage/) - Complete installation guide
- [Theme Configuration](https://theme-plume.vuejs.press/en/config/intro/) - Configuration options explained
- [Collections](https://theme-plume.vuejs.press/en/guide/quick-start/collection/) - Create blog and documentation columns
- [Markdown Enhancement](https://theme-plume.vuejs.press/en/guide/markdown/basic/) - Rich Markdown syntax
- [Code Enhancement](https://theme-plume.vuejs.press/en/guide/code/intro/) - Code block features
- [Components](https://theme-plume.vuejs.press/en/guide/components/badge/) - Built-in component usage
- [Features](https://theme-plume.vuejs.press/en/guide/features/comments/) - Comments, search, encryption, and more
- [Deployment](https://theme-plume.vuejs.press/en/guide/quick-start/deployment/) - Deploy to various platforms
## Examples
- [My Personal Blog](https://pengzhanbo.cn/)
- [Author's Blog](https://pengzhanbo.cn/)
View [more examples](https://theme-plume.vuejs.press/demos/)
[View more examples](https://theme-plume.vuejs.press/demos/)
### Note
## FAQ
This theme is based on `vuepress 2` and is in the RC stage.
### How to update the theme?
This means that the functionality is relatively stable, but there is still a small probability of breaking changes in the future.
```bash
npx vp-update
```
### New features not working after update?
Due to the caching mechanism, you need to clear the cache after updating the theme:
```bash
vuepress dev docs --clean-cache
```
### Out of memory during build?
```bash
export NODE_OPTIONS="--max_old_space_size=8192"
npm run docs:build
```
For more FAQs, please check the [FAQ documentation](https://theme-plume.vuejs.press/en/faq/).
## Contribution Guide
View the [[Contribution Guide]](/CONTRIBUTING_EN.md) for more information
Contributions are welcome! Please read the [Contribution Guide](./CONTRIBUTING.md) first.
Development requirements:
- Node.js 20.19.0+
- pnpm 9+
Local development:
```bash
# 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](./CHANGELOG.md).
## Contributors
@ -74,8 +198,16 @@ Thank you to all contributors!
[![contributors](https://contrib.rocks/image?repo=pengzhanbo/vuepress-theme-plume)](https://github.com/pengzhanbo/vuepress-theme-plume/graphs/contributors)
![Repo beats](https://repobeats.axiom.co/api/embed/b3e16e8802010e72e933f64864a8047e3163e927.svg "Repo Beats analytics image")
## Community & Support
- QQ Group: [792882761](https://qm.qq.com/q/O3HNy4rxYc)
- Issue Tracker: [GitHub Issues](https://github.com/pengzhanbo/vuepress-theme-plume/issues)
- Discussions: [GitHub Discussions](https://github.com/pengzhanbo/vuepress-theme-plume/discussions)
## License
[MIT](/LICENSE)
[MIT](./LICENSE)
---
![Star History Chart](https://api.star-history.com/svg?repos=pengzhanbo/vuepress-theme-plume&type=Date)

186
readme.md
View File

@ -23,61 +23,189 @@
中文 | <a href="/readme.en-US.md">English</a>
</p>
一个简约的，干净的，容易上手的 vuepress 主题，适用于博客、专栏 和 文档。
## 项目简介
开箱即用，仅需少量配置即可使用，让您更专注于 内容的创作，更好的表达你的想法，形成你的知识笔记。
vuepress-theme-plume 是一个基于 VuePress 2 的现代化主题，专为创建**技术博客**、**生活随笔**、**产品文档**、**知识库**和**系列教程**而设计。
内置了丰富的强大的功能，旨在让内容更具有表现力。
主题注重内容表达和用户体验，提供丰富的 Markdown 扩展功能，让您的文档更加美观、专业且富有表现力。
## 特性
- 💻 响应式布局，适配不同的屏幕尺寸
- 📖 集合：通过集合，可同时实现 博客、专栏、 产品文档、技术文档、知识库等
- 🔗 自动生成文章永久链接
- ⚖ 支持多语言
- 👀 支持 搜索、文章评论
- 👨‍💻‍ 支持 浅色/深色 主题 （包括代码高亮）
- 📠 markdown 增强，支持提示容器、任务列表、数学公式、代码演示、文件树、代码树、时间轴 等
- 🧀 代码块增强，支持 分组、折叠、聚焦、 行高亮、词高亮、twoslash 等
- 😀 内置支持 `iconify` 200k+ 图标，支持可选的 `iconfont` / `fontawesome` 图标。
- 📚 嵌入代码演示，支持 CodePen, JSFiddle, CodeSandbox 等
- 📊 嵌入图表，支持 chart.js，Echarts，Mermaid，flowchart, plantUML
- 🎛 资源嵌入，支持 PDF, bilibili视频，youtube视频、本地视频、音频等
- 🪞 支持全站水印、部分内容水印
- 🔑 支持 全站加密、部分加密
- **💻 响应式设计** - 完美适配移动端、平板和桌面设备
- **📖 集合系统** - 通过集合可同时实现博客、专栏、产品文档、技术文档、知识库等多种内容类型
- **🔗 永久链接** - 自动生成文章永久链接
- **⚖ 多语言支持** - 内置中文、英文等 7+ 种语言支持
- **👀 搜索与评论** - 支持本地搜索、Algolia 搜索，以及多种评论系统（Giscus、Waline、Twikoo、Artalk）
- **👨‍💻 双主题模式** - 支持浅色/深色主题，包括代码高亮
- **📠 Markdown 增强** - 提示容器、任务列表、数学公式、代码演示、文件树、代码树、时间轴、折叠面板等
- **🧀 代码块增强** - 代码分组、折叠、聚焦、行高亮、词高亮、twoslash 等
- **😀 图标系统** - 内置 Iconify 200,000+ 图标，支持 IconFont、FontAwesome
- **📚 代码演示嵌入** - 支持 CodePen、JSFiddle、CodeSandbox、Replit 等
- **📊 图表支持** - Chart.js、ECharts、Mermaid、Flowchart、PlantUML、Markmap
- **🎛 媒体嵌入** - PDF、Bilibili、YouTube、本地视频、音频等
- **🪞 水印功能** - 支持全站水印和部分内容水印
- **🔑 内容加密** - 支持全站加密和部分加密（目录加密、文章加密）
- **⚡ 性能优化** - 编译缓存机制，大幅提升构建速度
- **🔥 热更新配置** - 修改主题配置无需重启服务
## [使用文档](https://theme-plume.vuejs.press)
## 快速开始
QQ 交流群：[792882761](https://qm.qq.com/q/O3HNy4rxYc)
### 环境要求
- **Node.js**: ^20.19.0 或 >= 22.0.0
- **包管理器**: npm 8+、pnpm 8+ 或 Yarn 2+
### 安装
使用命令行工具快速创建项目：
```bash
npm create vuepress-theme-plume@latest
```
或手动安装：
```bash
# 创建项目目录
mkdir my-blog && cd my-blog
# 初始化项目
npm init
# 安装依赖
npm i -D vuepress@next vue
npm i -D vuepress-theme-plume @vuepress/bundler-vite@next
# 添加脚本到 package.json
{
"scripts": {
"docs:dev": "vuepress dev docs",
"docs:build": "vuepress build docs"
}
}
```
### 配置
创建 `docs/.vuepress/config.ts` 配置文件：
```ts
import { viteBundler } from '@vuepress/bundler-vite'
import { defineUserConfig } from 'vuepress'
import { plumeTheme } from 'vuepress-theme-plume'
export default defineUserConfig({
lang: 'zh-CN',
title: '我的博客',
description: '欢迎来到我的博客',
bundler: viteBundler(),
theme: plumeTheme({
// 主题配置
}),
})
```
### 启动
```bash
npm run docs:dev
```
访问 <http://localhost:8080> 查看您的站点。
## 文档
详细文档请访问：[https://theme-plume.vuejs.press](https://theme-plume.vuejs.press)
### 主要文档
- [安装与使用](https://theme-plume.vuejs.press/guide/usage/) - 完整的安装指南
- [主题配置](https://theme-plume.vuejs.press/config/intro/) - 配置选项详解
- [集合](https://theme-plume.vuejs.press/guide/quick-start/collection/) - 创建博客、文档专栏
- [Markdown 增强](https://theme-plume.vuejs.press/guide/markdown/basic/) - 丰富的 Markdown 语法
- [代码增强](https://theme-plume.vuejs.press/guide/code/intro/) - 代码块功能
- [组件](https://theme-plume.vuejs.press/guide/components/badge/) - 内置组件使用
- [功能特性](https://theme-plume.vuejs.press/guide/features/comments/) - 评论、搜索、加密等
- [部署指南](https://theme-plume.vuejs.press/guide/quick-start/deployment/) - 部署到各种平台
## 案例
- [我的个人博客](https://pengzhanbo.cn/)
- [作者个人博客](https://pengzhanbo.cn/)
查看 [更多案例](https://theme-plume.vuejs.press/demos/)
[查看更多案例](https://theme-plume.vuejs.press/demos/)
### 注意
## 常见问题
本主题基于 `vuepress 2` ，处于 RC 阶段。
### 如何更新主题？
这意味着功能已趋于稳定，但在未来仍有小概率发生破坏性更改。
```bash
npx vp-update
```
### 更新后新功能未生效？
由于缓存机制，更新主题后需要清除缓存：
```bash
vuepress dev docs --clean-cache
```
### 构建时内存溢出？
```bash
export NODE_OPTIONS="--max_old_space_size=8192"
npm run docs:build
```
更多常见问题，请查阅 [常见问题文档](https://theme-plume.vuejs.press/faq/)。
## 贡献指南
查看 [[贡献指南]](/CONTRIBUTING.md) 了解更多
欢迎贡献代码！请先阅读 [贡献指南](./CONTRIBUTING.md)。
开发要求：
- Node.js 20.19.0+
- pnpm 9+
本地开发：
```bash
# 克隆仓库
git clone https://github.com/pengzhanbo/vuepress-theme-plume.git
# 安装依赖
pnpm install
# 构建项目
pnpm build
# 启动开发服务
pnpm dev
```
## 更新日志
详细更新内容请查阅 [Changelog](./CHANGELOG.md)。
## 贡献者
感谢所有的贡献者！
感谢所有贡献者的付出！
![GitHub contributors](https://img.shields.io/github/contributors/pengzhanbo/vuepress-theme-plume?color=32A9C3&labelColor=1B3C4A&logo=contributorcovenant)
[![contributors](https://contrib.rocks/image?repo=pengzhanbo/vuepress-theme-plume)](https://github.com/pengzhanbo/vuepress-theme-plume/graphs/contributors)
![Repo beats](https://repobeats.axiom.co/api/embed/b3e16e8802010e72e933f64864a8047e3163e927.svg "Repo Beats analytics image")
## 交流与支持
![Star History Chart](https://api.star-history.com/svg?repos=pengzhanbo/vuepress-theme-plume&type=Date)
- QQ 交流群：[792882761](https://qm.qq.com/q/O3HNy4rxYc)
- 问题反馈：[GitHub Issues](https://github.com/pengzhanbo/vuepress-theme-plume/issues)
- 讨论交流：[GitHub Discussions](https://github.com/pengzhanbo/vuepress-theme-plume/discussions)
## License
[MIT](/LICENSE)
[MIT](./LICENSE)
---
![Star History Chart](https://api.star-history.com/svg?repos=pengzhanbo/vuepress-theme-plume&type=Date)