目录结构

...

- .vitepress
  # 主题
  - theme
    - index.ts
  # 配置文件
  - config.mts
    ...

配置文件

import { defineConfig } from "vitepress";

// https://vitepress.dev/reference/site-config
export default defineConfig({
  // 页面的标题
  title: "",
  // 自定义title格式
  titleTemplate: ":title",
  // 页面的描述
  description: "",
  // 添加网站图标
  head: [["link", { rel: "icon", href: "/favicon.png" }]],
  // 启用暗黑模式
  appearance: undefined, // dark
  // 更新时间
  lastUpdated: true,

  // 项目的构建输出位置
  outDir: "./dist",

  themeConfig: {
    // 网站标题
    siteTitle: "",
    // 徽标文件
    logo: "/favicon.png",
    // 社交链接
    socialLinks: [{ icon: "github", link: "https://github.com" }],
    // 页脚
    footer: {
      message: "",
      copyright: "Copyright © 2023",
    },
    // 搜索
    search: {
      provider: "algolia",
      options: {
        appId: "...",
        apiKey: "...",
        indexName: "...",
      },
    },
    // 下一个
    docFooter: {
      prev: "上一页",
      next: "下一页",
    },
    // 最后更新时间
    lastUpdated: {
      text: "最后更新于",
      formatOptions: {
        dateStyle: "short",
        timeStyle: "short",
      },
    },

    // 导航
    nav: [],

    // 侧边栏
    sidebar: {},
  },
});

主题

// https://vitepress.dev/guide/custom-theme
import Theme from "vitepress/theme";
import { h } from "vue";
import Comments from "../components/Comments.vue";
import "./style.css";

export default {
  extends: Theme,

  Layout: () => {
    return h(Theme.Layout, null, {
      // 这里加载评论模块
      "doc-after": () => h(Comments),
    });
  },
};