2025/8/14
通过插槽自定义布局
在 vuepress-theme-hope 中，插槽（Slots）是扩展和自定义主题布局的重要方式，允许你在主题预设的位置插入自定义内容。以下是关于其插槽使用的详细说明和示例：
一、插槽的基本概念
主题将页面结构划分为多个预设区域（如头部、侧边栏、页脚等），每个区域对应一个插槽。你可以通过在 .vuepress/components 目录下创建特定组件，向这些插槽注入内容。
即：
在
.vuepress/components目录下创建特定组件，用于插入插槽。
注：components这个目录名可以自定义。通过 客户端配置文件（client.ts） 中的 layouts 选项添加新布局或覆盖现有布局。
你可以在在.vuepress/layouts目录下，存放自定义布局的文件。
主题布局
主题提供了以下布局：
- Layout: 基础布局
- NotFound: 404 页面布局
- Slides（仅在启用 reveal.js 时可用）
- Blog（仅在启用 blog 时可用）
你可以在以上基础布局中进行修改，达到自定义布局的目的。
官方例子解释
定义一个主页布局
开头导入了 Layout 布局。
然后，通过对指定插槽进行自定义，以达到对 Layout 布局 进行自定义的目的。
<script setup lang="ts">
import { Layout } from "vuepress-theme-hope/client";
</script>
<template>
<Layout>
<!-- 覆盖默认 Hero 标志 -->
<template #heroLogo>
<div>一个 3D 标志</div>
</template>
</Layout>
</template>自定义布局
<script setup lang="ts">
import { Layout } from "vuepress-theme-hope/client";
</script>
<template>
<Layout>
<!-- 通过 contentBefore 插槽在 Markdown 内容前添加广告 -->
<template #contentBefore>
<div>广告内容</div>
</template>
<!-- 使用 pageBottom 插槽引入评论组件 -->
<template #pageBottom>
<CommentService />
</template>
</Layout>
</template>在客户端配置文件中使用自定义布局
import { defineClientConfig } from "vuepress/client";
import Changelog from "./layouts/Changelog.vue";
import Home from "./layouts/Home.vue";
import Layout from "./layouts/Layout.vue";
export default defineClientConfig({
// 你可以在这里添加或覆盖布局
layouts: {
// 一个主页布局，带有自定义的 Hero 标志
Home,
// 例如，在这里我们将 vuepress-theme-hope 的默认布局更改为 layouts/Layout.vue
Layout,
// 我们还添加了一个 Changelog 布局
Changelog,
},
});二、常用插槽及使用方法
常用插槽位置示例，详见:
Layout布局中的插槽
1. 在所有布局中可用的插槽
2. 在内容页面中可用的插槽
3. 主页中可用的插槽
NotFound布局中的插槽
略