vuepress-theme-blue

介绍

一款简洁好用的 Vuepress 2.x 博客主题，Markdown 样式基于 github markdown css。

安装

方式一（推荐）

由于 vuepress 2.x 仍然在更新，而其中的依赖需要统一版本才能使用，因此我准备了一个模板项目，直接 Fork 使用即可：vuepress-theme-blue-init-project

具体项目使用可以查看 vuepress-theme-blue-init-project 的 README。

方式二

pnpm add vuepress-theme-blue

在配置文件中引入主题：

import { defineUserConfig } from 'vuepress'
import VuepressThemeBlue from 'vuepress-theme-blue'

export default defineUserConfig({
  // ...
  theme: VuepressThemeBlue({
    // ... 你的配置
  }),
})

配置

defineUserConfig({
  theme: VuepressThemeBlue({
    website: {
      name: 'Ruofee Blog', // 博客名称
      footers: ['备案号: xxx'], // 网页底部文案
      ensureAboutMe: true, // 是否开启“关于我”页面，如开启，请创建 about_me 文件夹
      hostname: 'http://ruofee.cn', // 域名，主要用于生成 sitemap
      baiduAnalytics: 'your baidu key', // 百度统计
    },
    user: {
      username: 'Ruofee', // 用户名
      description: '终不似, 少年游', // 用户描述
      avatar: 'http://img.ruofee.cn/headImage?imageslim', // 用户头像
      links: [
        {
          type: LinkType.Github,
          value: 'https://github.com/ruofee',
        },
      ], // 个人链接
    },
    home: {
      pageSize: 10, // 首页展示博客数目
    },
    comment: {
      enable: true, // 是否开启评论区，基于 giscus
      option: {
        repo: 'xxx',
        repoId: 'xxx',
        category: 'xxx',
        categoryId: 'xxx',
        theme: 'xxx',
        mapping: 'xxx',
        lang: 'xxx',
        loading: 'xxx',
        inputPosition: 'xxx',
        reactionsEnabled: 'xxx',
      }
    },
  }),
})

调试

pnpm dev:node

pnpm dev:client

pnpm dev:docs

路由

• 首页： /, /home/${page}
• 文章详情页：/blog/${blogId}
• 文章分类页：/category/${categoryId}/${page}
• 关于我：/about_me