增加定制 Layout

VitePress 缺省主题支持的 Layout 有 Home、Doc、Page 等，我们可以进一步扩展。参考文档：https://vitepress.dev/reference/default-theme-layout#custom-layout

创建并注册一个 Layout

1. 新建blog.vue

<!-- .vitepress/theme/layouts/Blog.vue -->
<template>
  <h1>Custom Blog Layout</h1>

  <Content />
</template>

2. 注册 blog layout

import DocHero from './components/DocHero.vue'
import Blog from './layouts/Blog.vue'

export default {
  extends: DefaultTheme,
  enhanceApp({ app, router, siteData }) {
      app.component("DocHero", DocHero );
      app.component("blog", Blog );
  }
} satisfies Theme

注意，我们将这个 Layout 命名为 blog。

3. 使用 blog layout

---
layout: blog
---


# blog layout

This is a blog layout test page.

扩展现有模板

在这个讨论中，brd-dd 提及了扩展现有模板的方法link：

// .vitepress/theme/index.ts

import DefaultTheme from 'vitepress/theme'
import Layout from './Layout.vue'

export default {
  extends: DefaultTheme,
  Layout
}

Inside .vitepress/theme/Layout.vue:

<script setup lang="ts">
import DefaultTheme from 'vitepress/theme'

// ... your rest of key handling logic ...
</script>

<template>
  <DefaultTheme.Layout />
</template>

另一个相关讨论：https://github.com/vuejs/vitepress/discussions/2008