跳至主要內容

Theme Reco 主题配置指南

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

Theme Reco 主题配置指南

vuepress-theme-reco 是一个简洁优雅的博客主题，采用 Tailwind CSS 构建。

1. 主题特点

  • 🎨 Tailwind CSS: 使用 Tailwind CSS 构建，样式灵活
  • 📝 博客优先: 专为博客而设计
  • 🌓 深色模式: 支持深色/浅色主题切换
  • 📱 响应式设计: 完美适配移动端
  • 🔌 模块化: 高度模块化的设计
  • ⚡ 轻量级: 简洁高效

2. 安装步骤

2.1 快速创建

推荐使用官方命令创建新项目：

npx @vuepress-reco/theme-cli init

执行后根据提示选择：

  • 项目名称
  • 版本选择：2.x (选择 v2 版本)
  • 包管理器：npm/yarn/pnpm

2.2 现有项目安装

在现有项目中手动安装：

# 安装主题和依赖
npm install -D vuepress@next vuepress-theme-reco@next

# 如果使用 pnpm，需要额外安装 vue
pnpm install -D vue

2.3 配置主题

编辑 docs/.vuepress/config.js：

import { viteBundler } from '@vuepress/bundler-vite'
import { recoTheme } from 'vuepress-theme-reco'
import { defineUserConfig } from 'vuepress'

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

  bundler: viteBundler(),

  theme: recoTheme({
    // 样式配置
    style: '@vuepress-reco/style-default',

    // Logo
    logo: '/logo.png',

    // 作者信息
    author: '你的名字',

    // 导航栏
    navbar: [
      { text: '首页', link: '/' },
      { text: '分类', link: '/categories/guide/1.html' },
      { text: '标签', link: '/tags/tag1/1.html' },
      { text: '时间轴', link: '/timeline.html' },
    ],

    // 自动设置分类
    autoSetBlogCategories: true,

    // 自动设置系列
    autoSetSeries: true,
  }),
})

3. 博客功能

3.1 文章配置

在文章的 Frontmatter 中配置：

---
title: 文章标题
date: 2026/02/01
categories:
  - 前端
tags:
  - Vue
  - VuePress
---

3.2 首页配置

编辑 docs/README.md：

---
home: true
modules:
  - BannerBrand
  - Blog
  - MdContent
  - Footer
isShowTitleInHome: true
---

## 欢迎来到我的博客

这里是首页内容...

3.3 系列文章

Reco 支持自动根据目录结构生成系列文章：

docs/
  series/
    frontend/
      vue/
        01-intro.md
        02-component.md

配置：

autoSetSeries: true

4. 主题配置

4.1 站点信息

theme: recoTheme({
  // 站点信息
  author: '作者名',
  authorAvatar: '/avatar.jpg',
  
  // 备案信息
  record: '备案号',
  recordLink: '备案链接',
  
  // 友情链接
  friendshipLinks: [
    {
      title: '友链名称',
      logo: '图片地址',
      link: '链接地址',
    },
  ],
})

4.2 深色模式

Reco 默认支持深色模式，用户可以通过导航栏切换。

4.3 评论系统

theme: recoTheme({
  commentConfig: {
    type: 'valine',
    options: {
      appId: '...',
      appKey: '...',
      placeholder: '填写邮箱可以收到回复提醒哦！',
    },
  },
})

5. 高级功能

5.1 自定义样式

创建 docs/.vuepress/styles/index.css：

:root {
  --vp-c-brand: #3eaf7c;
  --vp-c-brand-light: #4abf8a;
}

5.2 公告板

可以在首页配置公告板模块：

bulletin: {
  title: '公告',
  body: [
    {
      type: 'text',
      content: '欢迎来到我的博客！',
    },
  ],
}

5.3 时间轴

Reco 会自动根据文章日期生成时间轴页面，访问 /timeline.html。

6. 从其他主题迁移

6.1 从 Reco 1.x 迁移

Reco 2.x 与 1.x 配置不兼容，需要手动迁移。主要变化：

  • 配置结构变化
  • 使用 Tailwind CSS
  • 模块化设计

详见官方迁移指南。

6.2 从其他主题切换

只需修改 config.js 中的 theme 配置即可。

7. 常见问题

Q: Yarn 2+ 用户需要注意什么？

A: 需要在 .yarnrc.yml 中设置 nodeLinker: 'node-modules'。

Q: 如何添加自定义页面？

A: 在 docs 目录下创建 .md 文件，Frontmatter 中设置 home: false。

Q: 如何自定义主题颜色？

A: Reco 使用 Tailwind CSS，可以通过 CSS 变量或 Tailwind 配置文件自定义。

8. 更多资源