使用 themex 主题

引入 themex、自定义站点配置，并开启博客列表、文章封面和登录控制能力。

引入主题

把 themex 目录放到项目根目录，然后创建 .vitepress/theme/index.ts：

export { default } from '../../themex'

这样 VitePress 会使用 themex 作为当前站点主题。

配置 VitePress

创建或修改 .vitepress/config.ts：

import { defineConfig } from 'vitepress'
import { getPosts } from '../themex/serverUtils'
import { mockWechatPlugin } from '../themex/mockWechatPlugin'

export default defineConfig({
  title: 'my-site',
  base: '/',
  description: 'My personal website',
  ignoreDeadLinks: true,
  themeConfig: {
    posts: await getPosts('blog/posts/**.md'),
    siteTitle: 'my-site',
    website: 'https://example.com',
    avatar: '/assets/avatar-default-icon.png',
    postHeroDir: '/assets/post-hero',
    auth: {
      enabled: true,
      loginUrl: '/api/auth/wechat',
      meUrl: '/api/auth/me',
      logoutUrl: '/api/auth/logout'
    },
    nav: [
      { text: 'About', link: '/about/' },
      { text: 'Blog', link: '/blog/', activeMatch: '/blog/' }
    ],
    search: {
      provider: 'local'
    }
  },
  srcExclude: ['README.md', 'themex/README.md'],
  vite: {
    server: { port: 5173 },
    plugins: [mockWechatPlugin()]
  }
})

公开页面

如果某个页面不需要登录即可完整访问，在 frontmatter 中写：

auth: false

适合公开的页面通常包括：

• 首页
• About
• Blog 列表
• 文档入口页

没有写 auth: false 的内容页，会按主题的登录策略显示部分内容，登录后解锁完整内容。

常用主题字段

themeConfig: {
  posts: await getPosts('blog/posts/**.md'),
  siteTitle: 'my-site',
  website: 'https://example.com',
  copyrightYear: 2026,
  avatar: '/assets/avatar-default-icon.png',
  postHeroDir: '/assets/post-hero'
}

字段说明：

• posts：博客文章列表数据。
• siteTitle：导航栏站点名。
• website：页脚版权链接。
• avatar：右上角头像按钮图片。
• postHeroDir：文章 hero 图片目录。