VitePress如何自定义404页面的内容？

最近在Github)上，有人问VitePress如何自定义404页面的内容？自己去看了一下官方文档，发现可以根据官方提供的not-found插槽去配置即可，在自定义的theme/index.js文件中去配置就行。

import { h } from "vue";
import DefaultTheme from "vitepress/theme";
import NotFound from "./components/404.vue";

export default {
  // 自定义布局配置
  Layout: () => {
    const props = {};
    // 获取 frontmatter
    const { frontmatter } = useData();

    // 添加自定义 class
    if (frontmatter.value?.layoutClass) {
      props.class = frontmatter.value.layoutClass;
    }
    return h(DefaultTheme.Layout, props, {
      // 自定义文档底部
      "doc-after": () => h(siteFooter),
      // 自定义404页面内容
      "not-found": () => h(NotFound),
    });
  },
};

404.vue页面

<template>
  <div class="not-found">
    <h1>404</h1>
    <p>哎呀，您访问的页面不存在！</p>
    <a href="/index.html" target="_self">返回首页</a>
  </div>
</template>

这样就可以自定义VitePress的404页面内容了。