VitePress 极简主题：主题配置

提示

部分组件需要放置到 ThemeLayout.vue 的插槽中才会生效，具体参考 完整示例 - ThemeLayout.vue

配置

在 themeConfig 对象中进行主题的配置。其中 posts 的配置项是必须的，该项由 usePosts 返回。

• posts：文章列表，由 usePosts 函数生成
• transition：页面切换动画 [可选，默认开启]
• page：文章列表配置项
  • max：分页器最大页数，超出后显示首页与尾页按钮，[可选，默认为 5]
  • pinned：置顶文章文本描述，默认为 HOT
• slots：页面插槽配置 [可选]
  • docBefore：正文内容上方插槽
  • docAfter：正文内容下方插槽
  • asideLeft：左侧边栏插槽
  • asideRight：右侧边栏插槽

插槽

插槽支持在文章列表（page）、分类（category）、标签（tags）、归档（archives）页面中挂载自定义组件。

支持配置为组件名称字符串（全页面生效），或传入对象按页面精细化分发（支持 default 兜底）

自定义组件注册

自定义插槽组件需在 .vitepress/theme/index.ts 中通过 enhanceApp({ app }) { app.component('DocAfterAd', DocAfterAd) } 进行全局注册。

示例

.vitepress/config.ts

interface IPage {
  max?: number;
  pinned?: string;
}

export type PageTarget = 'page' | 'category' | 'tags' | 'archives';
export type SlotBinding = string | ({ default?: string } & Partial<Record<PageTarget, string>>);

export interface ISlotsConfig {
  docBefore?: SlotBinding;
  docAfter?: SlotBinding;
  asideLeft?: SlotBinding;
  asideRight?: SlotBinding;
}

export interface ThemeConfig extends DefaultTheme.Config {
  posts?: IPost[];
  page?: IPage;
  slots?: ISlotsConfig;
  transition?: boolean;
}

export default defineConfig<ThemeConfig>({
  themeConfig: {
    posts,
    transition: true,
    page: {
      max: 5,
      pinned: '[置顶]'
    },
    slots: {
      // 简单模式：全页面生效
      docAfter: 'DocAfterAd',

      // 对象模式：按页面精准分发组件
      asideRight: {
        default: 'CommonAside',   // 默认兜底组件
        page: 'PageAside',        // 仅文章列表页生效
        category: 'CategoryAside' // 仅分类页生效
      }
    }
  }
});