vuepress通过插槽自定义布局

---

一、插槽的基本概念

1. 插槽（Slots）是什么

• 在 vuepress-theme-hope 中，插槽是一个机制，用来在主题预设的布局位置插入自定义内容。
• 插槽能让你在不修改主题核心的文件（或最小修改）的情况下，自定义页面部分内容。

2. 如何使用插槽：组件与布局

• 在 .vuepress/components 目录下创建自定义组件，用于插槽内容。
• 在客户端配置文件 client.ts 中，通过 layouts 选项添加或覆盖布局。
• 在 .vuepress/layouts/ 下存放你自己的布局文件，以覆盖或扩展默认主题的布局。

---

二、例子说明（关键段落示例）

下面是作者给出的两个示例（简化版）：

示例 1：覆盖默认 Hero 标志

<script setup lang="ts">
import { Layout } from "vuepress-theme-hope/client";
</script>

<template>
  <Layout>
    <!-- 覆盖默认 Hero 标志 -->
    <template #heroLogo>
      <div>一个 3D 标志</div>
    </template>
  </Layout>
</template>

示例 2：在内容前插入广告 + 在页面底部插入评论组件

<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>

示例 3：在客户端配置中使用自定义布局

在 client.ts 中配置自定义布局组件，比如：

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: {
    Home,
    Layout,
    Changelog,
  },
});

---

三、常用插槽 & 在不同布局中的可用性

作者列出了多个布局类型中，不同插槽的可用性，包括但可能不限于：

• Layout 布局
  • 所有布局里可用的插槽
  • 内容页面里可用的插槽
  • 主页里可用的插槽
• NotFound 布局
  • (404 页面的专用插槽)
• Blog 布局
  • 所有博客页面通用的插槽
  • 在主页、分类页、标签页中可用的插槽
  • 在博客主页中可用的插槽

---

四、小结 / 提示

• 插槽非常灵活，可以让你针对不同页面类型（如主页 vs 内容页 vs 分类页等）插入不同的内容。
• 要清楚每个插槽在哪个布局中可用，以及渲染顺序（比如内容前 / 内容后 / 页脚 etc.）。
• 自定义组件 + 覆盖布局文件 + 在 client.ts 中配置，是常见配合方式。