概述

主题通过 <Layout /> 和 <NotFound /> 提供了 丰富的 布局插槽，可以通过这些插槽，在 页面 的不同位置注入内容。 以便用户可以个性化的使用主题。

使用

以 <Layout /> 为例，首先，需要创建一个 客户端配置文件： .vuepress/client.ts:

.vuepress/client.ts

import { defineClientConfig } from 'vuepress/client'
import Layout from './layouts/Layout.vue'

export default defineClientConfig({
  layouts: {
    Layout,
  },
})

相关信息

layouts 中的 Layout 名是固定的，这是 js 的简写语法， 实际上为 Layout: Layout，它是实现 布局插槽的关键。 NotFound 也是相同的规则。

你传入的其它非 Layout / NotFound 的组件，被认为是自定义布局组件。

然后，创建一个 .vuepress/layouts/Layout.vue，作为布局插槽的默认组件，在该组件中引入 当前主题的 <Layout /> 组件。

.vuepress/layouts/Layout.vue

<script setup>
import { Layout } from 'vuepress-theme-plume/client'
</script>

<template>
  <Layout>
    <template #page-bottom>
      <div class="custom-content">
        自定义内容
      </div>
    </template>
  </Layout>
</template>

<style>
.custom-content {
  width: 100%;
}
</style>

也可以使用 渲染函数 实现注入内容，在 .vuepress/client.ts 中：

.vuepress/client.ts

import { h } from 'vue'
import { Layout } from 'vuepress-theme-plume/client'
import { defineClientConfig } from 'vuepress/client'
import CustomContent from './components/CustomContent.vue'

export default defineClientConfig({
  layouts: {
    Layout: () => h(Layout, null, {
      'page-bottom': () => h(CustomContent),
    }),
  },
})

.vuepress/components/CustomContent.vue

<template>
  <div class="custom-content">
    Custom Content
  </div>
</template>

插槽

相关信息

您可以预览 https://plume-layout-slots.netlify.app 以查看所有可用的插槽在站点中的位置。

<Layout /> 插槽

• 当 pageLayout: doc 时：

  • doc-top
  • doc-bottom
  • doc-content-before
  • doc-footer-before
  • doc-before
  • doc-after
  • doc-meta-top
  • doc-meta-bottom
  • doc-meta-before
  • doc-meta-after
  • sidebar-nav-before
  • sidebar-nav-after
  • aside-top
  • aside-bottom
  • aside-outline-before
  • aside-outline-after

• 当 pageLayout: page 时：

  • page-top
  • page-bottom

• 在 博客页 中 （包括 文章列表页、标签页、归档页 均适用）：

  • blog-top
  • blog-bottom
  • blog-aside-top
  • blog-aside-bottom
  • blog-extract-before
  • blog-extract-after

• 在 博客文章列表页 中：

  • blog-post-list-before
  • blog-post-list-after
  • blog-post-list-pagination-after

• 在 博客标签页 中：

  • blog-tags-before
  • blog-tags-title-after
  • blog-tags-content-before
  • blog-tags-after

• 在 博客归档页 中：

  • blog-archives-before
  • blog-archives-after

• 在 博客分类页 中：

  • blog-categories-before
  • blog-categories-content-before
  • blog-categories-after

<NotFound /> 插槽

• not-found

通用插槽

以下插槽在 <Layout /> 和 <NotFound /> 中都支持：

• layout-top
• layout-bottom
• nav-bar-title-before
• nav-bar-title-after
• nav-bar-content-before
• nav-bar-content-after
• nav-bar-menu-before
• nav-bar-menu-after
• nav-screen-content-before
• nav-screen-content-after
• nav-screen-menu-before
• nav-screen-menu-after
• footer-content
• bulletin-content

贡献者

pengzhanbo

更新日志

2025/4/20 16:56

查看所有更新日志

• 9196d-docs: update layout slots doc于 2025/4/20
• 0bced-feat(theme): add layout slots (#558)于 2025/4/19
• 97f04-feat(theme): add doc-meta-before and doc-meta-after slots (#554)于 2025/4/14
• 0fd6c-refactor(theme): improve types and flat config (#524)于 2025/3/15
• 6e6f9-docs: improve docs (#509)于 2025/3/2
• 597a1-style: lint fix于 2024/11/29
• 0c53b-docs: improve docs (#332)于 2024/11/8
• 1bb31-docs: update docs于 2024/10/21
• b6d0f-docs: update docs于 2024/10/20
• 520dc-style: lint fix于 2024/9/10