Plume 主题

简体中文

English

简体中文

English

外观

在 GitHub 上 Star遇到问题？喝杯奶茶

布局插槽

约 592 字

概述

主题通过 <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-content-after
    • doc-footer-before
    • doc-before
    • doc-after
    • doc-title-before
    • doc-title-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

  • 在 post 集合相关页面中 （包括文章列表页、标签页、归档页均适用）：

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

  • 在文章列表页中：

    • posts-post-list-before
    • posts-post-list-after
    • posts-post-list-pagination-after

  • 在标签页中：

    • posts-tags-before
    • posts-tags-title-after
    • posts-tags-content-before
    • posts-tags-after

  • 在归档页中：

    • posts-archives-before
    • posts-archives-after

  • 在分类页中：

    • posts-categories-before
    • posts-categories-content-before
    • posts-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

更新日志

2026/10/11 04:27
查看所有更新日志
  • 60619-docs: improve docs (#1069)于
  • 7f148-feat(theme): add doc-content-after slots (#950)于
  • 20728-feat(theme): add plugin-llms and <PageContextMenu /> component (#753)于
  • 38505-docs: update en docs (#708)于
  • 4d236-feat(theme)!: add collections support (#704)于
  • 9196d-docs: update layout slots doc于
  • 0bced-feat(theme): add layout slots (#558)于
  • 97f04-feat(theme): add doc-meta-before and doc-meta-after slots (#554)于
  • 0fd6c-refactor(theme): improve types and flat config (#524)于
  • 6e6f9-docs: improve docs (#509)于