vuepress-theme-plume/docs/notes/theme/guide/布局插槽.md

title, icon, author, createTime, permalink

title	icon	author	createTime	permalink
布局插槽	ph:layout-duotone	Plume Theme	2024/06/17 16:19:43	/guide/layout-slots/

概述

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

使用

首先，需要创建一个 客户端配置文件： .vuepress/client.ts:

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

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

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

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

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

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

插槽

主题支持以下插槽：

• 当 pageLayout: doc 时：

  • doc-top
  • doc-bottom
  • doc-footer-before
  • doc-before
  • doc-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-after

• 在 博客归档页 中：

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

• 总是启用：

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