VitePress 极简主题：完整示例

为了启用主题的所有功能（加密、草稿、隐藏、描述、信息等），还需要做一些配置。

config.ts

.vitepress/config.ts

import { defineConfig } from 'vitepress';
import { usePosts } from '../src/composables/usePosts.ts';
import { themeTransformPageData } from '../src/utils/themeTransformPageData.ts';
import { themeMdPlugin } from '../src/utils/themeMdPlugin.ts';
import type { ThemeConfig } from '../src/types.ts';

const { posts, hiddenPosts, excludePosts, rewrites } = await usePosts({
  pageSize: 6,
  folder: [
    { input: 'posts', index: false },
    { input: 'essays', name: '散文' }
  ],
  excerpt: 150
});

export default defineConfig<ThemeConfig>({
  rewrites,
  lastUpdated: true,
  // 在 sitemap 中移除隐藏文章
  sitemap: {
    hostname: 'https://example.com',
    transformItems: (items) => {
      return items.filter((item) => !hiddenPosts.has(item.url.replace(/\.html$/, '')));
    }
  },
  transformPageData(pageData, ctx) {
    themeTransformPageData(pageData, ctx);
  },
  themeConfig: {
    posts,
    slots: {
      docAfter: 'DocAfterAd',
    },
    page: {
      max: 5
    },
    transition: true
  },
  markdown: {
    lineNumbers: true,
    config: (md) => {
      md.use(themeMdPlugin);
    }
  },
  // 草稿
  srcExclude: [...excludePosts]
});

ThemeLayout.vue

.vitepress/theme/ThemeLayout.vue

<template>
  <Layout>
    <template #aside-outline-before>
      <ShareItem />
    </template>
    <template #doc-footer-before>
      <Copyright />
    </template>
    <template #doc-after>
      <PrevNext />
      <AdItem :custom="ads" type="doc" />
      <AdItem :adsense="adsense" type="doc" />
      <CommentItem />
    </template>
  </Layout>

</template>

<script lang="ts" setup>
import DefaultTheme from 'vitepress/theme';
import type { IAdsense } from '../../src/types.ts';
import PrevNext from '../../src/components/PrevNext.vue';
import Copyright from '../../src/components/Copyright.vue';
import AdItem from '../../src/components/AdItem.vue';
import ShareItem from '../../src/components/ShareItem.vue';
import CommentItem from './components/CommentItem.vue';
import { ads } from './ads.ts';

const adsense: IAdsense = {
  client: 'XXXX',
  slot: 'XXXX'
};
const { Layout } = DefaultTheme;
</script>