diff --git a/readme.en-US.md b/readme.en-US.md index 82afdb81..d6d9e6d2 100644 --- a/readme.en-US.md +++ b/readme.en-US.md @@ -23,48 +23,172 @@ 中文 | English

-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 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) diff --git a/readme.md b/readme.md index 2a99e749..8ca56a17 100644 --- a/readme.md +++ b/readme.md @@ -23,61 +23,189 @@ 中文 | English

-一个简约的,干净的,容易上手的 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 +``` + +访问 查看您的站点。 + +## 文档 + +详细文档请访问:[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)