VitePress 是一款基于 Vite 和 Vue 3 的静态网站生成器，专为文档编写而设计。VitePress 的默认主题提供了丰富的布局插槽，允许开发者在页面的特定位置注入自定义内容。本文将详细介绍如何使用这些布局插槽来自定义 VitePress 站点。
一、布局插槽概述
VitePress 的 <Layout/> 组件内置了多个插槽，这些插槽允许你在页面的不同区域插入自定义组件或内容。通过利用这些插槽，你可以轻松实现页面布局的个性化定制。
二、使用插槽的两种方式
1. 通过 Vue 模板插入插槽
你可以创建一个自定义的 Vue 组件，并在其中使用 VitePress 的默认 <Layout/> 组件，然后通过 Vue 的 <template> 标签插入插槽内容。
示例代码：
首先，在你的 VitePress 项目中创建一个自定义布局组件 MyLayout.vue：
<!-- .vitepress/theme/MyLayout.vue -->
<script setup>
import DefaultTheme from 'vitepress/theme';
const DefaultLayout=DefaultTheme .Layout
</script>
<template>
<DefaultLayout>
<!-- 在侧边栏大纲之前插入自定义内容 -->
<template #aside-outline-before>
<div>My custom sidebar top content</div>
</template>
</DefaultLayout>
</template>
然后，在你的自定义主题入口文件 .vitepress/theme/index.js 中使用这个自定义布局组件：
// .vitepress/theme/index.js
import DefaultTheme from 'vitepress/theme'
import MyLayout from './MyLayout.vue'
export default {
extends: DefaultTheme,
Layout: MyLayout
}
2. 通过 Vue 的 render 函数插入插槽
除了使用 Vue 模板外，你还可以通过 Vue 的 render 函数来插入插槽内容。这种方式更加灵活，特别是在你需要动态生成内容或进行复杂逻辑处理时。
示例代码：
修改 .vitepress/theme/index.js，使用 render 函数来定义 Layout：
// .vitepress/theme/index.js
import { h } from 'vue'
import DefaultTheme from 'vitepress/theme'
import MyComponent from './MyComponent.vue'
export default {
extends: DefaultTheme,
Layout() {
return h(DefaultTheme.Layout, null, {
'aside-outline-before': () => h(MyComponent)
})
}
}
在这个例子中，MyComponent 是你自定义的 Vue 组件，它将被插入到侧边栏大纲之前的位置。
三、可用插槽列表
VitePress 的默认主题提供了多个插槽，根据页面布局的不同，可用的插槽也会有所不同。
文档布局（layout: 'doc'）
doc-topdoc-bottomdoc-footer-beforedoc-beforedoc-aftersidebar-nav-beforesidebar-nav-afteraside-topaside-bottomaside-outline-beforeaside-outline-afteraside-ads-beforeaside-ads-after
首页布局（layout: 'home'）
home-hero-beforehome-hero-info-beforehome-hero-infohome-hero-info-afterhome-hero-actions-afterhome-hero-imagehome-hero-afterhome-features-beforehome-features-after
页面布局（layout: 'page'）
page-toppage-bottom
404 页面
not-found
全局可用插槽
layout-toplayout-bottomnav-bar-title-beforenav-bar-title-afternav-bar-content-beforenav-bar-content-afternav-screen-content-beforenav-screen-content-after
四、总结
通过利用 VitePress 提供的布局插槽，你可以轻松地自定义页面的布局和内容。无论是通过 Vue 模板还是 render 函数，都能实现灵活的内容插入和布局调整。希望本文能帮助你更好地理解和使用 VitePress 的布局插槽功能。
