跳至主要內容

Theme Plume 主题配置指南

2026/2/1GuideVuePressTheme大约 2 分钟...

Theme Plume 主题配置指南

vuepress-theme-plume 是一个响应式布局的 VuePress 主题，兼顾博客和文档两种模式。

1. 主题特点

  • 📱 响应式布局: 完美适配各种设备
  • 📚 博客 & 文档: 同时支持两种模式
  • 🎨 双色主题: 支持深色和浅色模式
  • 🔍 搜索功能: 内置搜索支持
  • 💬 评论系统: 集成评论功能
  • 🔐 内容加密: 支持文章加密
  • ✨ Markdown 增强: 丰富的 Markdown 扩展

2. 快速开始

2.1 新项目创建

如果你要创建新项目，可以使用官方脚手架：

# 使用 pnpm
pnpm create vuepress-theme-plume@latest

# 使用 npm
npm create vuepress-theme-plume@latest

# 使用 yarn
yarn create vuepress-theme-plume@latest

2.2 现有项目安装

在现有 VuePress 项目中执行：

npm install -D vuepress@next vue vuepress-theme-plume @vuepress/bundler-vite@next

2.3 配置主题

编辑 docs/.vuepress/config.js：

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

export default defineUserConfig({
  lang: 'zh-CN',
  title: '你的博客',
  description: '你的博客描述',

  bundler: viteBundler(),

  theme: plumeTheme({
    // 主页配置
    home: {
      hero: {
        name: '你的博客名称',
        tagline: '欢迎来到我的博客',
      },
    },

    // 导航栏
    navbar: [
      { text: '首页', link: '/' },
      { text: '博客', link: '/blog/' },
      { text: '分类', link: '/category/' },
      { text: '标签', link: '/tag/' },
    ],

    // 侧边栏 (可选)
    notes: {
      // 文档笔记配置
      dir: 'notes',
      link: '/notes/',
    },
  }),
})

3. 博客功能

3.1 撰写博客

在文章的 Frontmatter 中添加博客相关配置：

---
title: 文章标题
createTime: 2026-02-01
tags:
  - 标签1
  - 标签2
category:
  - 分类
---

3.2 博主信息

配置博主信息：

theme: plumeTheme({
  profile: {
    name: '你的名字',
    description: '简介',
    avatar: '/avatar.jpg',
  },
})

3.3 分类和标签

主题会自动根据 Frontmatter 中的 category 和 tags 生成分类和标签页面。

4. 文档功能

4.1 文档笔记

Theme Plume 支持将文档归纳到不同目录：

notes: {
  dir: 'notes',
  link: '/notes/',
  notes: [
    {
      dir: 'javascript',
      link: '/javascript/',
      sidebar: 'auto',
    },
    {
      dir: 'vue',
      link: '/vue/',
      sidebar: 'auto',
    },
  ],
}

4.2 侧边栏

支持自动生成和手动配置：

// 自动生成
sidebar: 'auto'

// 手动配置
sidebar: [
  {
    text: '指南',
    items: [
      '/guide/README.md',
      '/guide/getting-started.md',
    ],
  },
]

5. 主题功能

5.1 搜索

内置本地搜索，无需额外配置。

5.2 评论

支持多种评论系统：

comment: {
  provider: 'Giscus', // 或 'Waline', 'Twikoo' 等
  // 具体配置...
}

5.3 内容加密

在 Frontmatter 中添加：

---
title: 加密文章
encrypt: true
---

6. 常见问题

Q: 如何自定义主题样式？

A: 创建 docs/.vuepress/styles/index.css 文件，添加自定义 CSS。

Q: 如何部署？

A: 与标准 VuePress 部署流程相同，运行 npm run build 后将 docs/.vuepress/dist 目录部署即可。

Q: 如何切换主题？

A: 只需在 config.js 中修改 theme 配置，从 plumeTheme() 改为其他主题即可。

7. 更多资源