Layout Slots
Overview
The theme provides extensive layout slots through <Layout /> and <NotFound /> components, allowing content injection at different positions of the page. This enables users to personalize the theme according to their needs.
Usage
Taking <Layout /> as an example, first create a client configuration file: .vuepress/client.ts:
import { defineClientConfig } from 'vuepress/client'
import Layout from './layouts/Layout.vue'
export default defineClientConfig({
layouts: {
Layout,
},
})Info
The Layout name in layouts is fixed. This uses JavaScript shorthand syntax, essentially equivalent to Layout: Layout, which is crucial for implementing layout slots. The same rule applies to NotFound.
Other components passed that are not Layout/NotFound are considered custom layout components.
Then, create .vuepress/layouts/Layout.vue as the default component for layout slots, and import the current theme's <Layout /> component in this file.
<script setup>
import { Layout } from 'vuepress-theme-plume/client'
</script>
<template>
<Layout>
<template #page-bottom>
<div class="custom-content">
Custom Content
</div>
</template>
</Layout>
</template>
<style>
.custom-content {
width: 100%;
}
</style>Content injection can also be implemented using render functions in .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),
}),
},
})<template>
<div class="custom-content">
Custom Content
</div>
</template>Slots
Info
You can preview https://plume-layout-slots.netlify.app to see the positions of all available slots in the site.
<Layout /> Slots
When
pageLayout: doc:doc-topdoc-bottomdoc-content-beforedoc-content-afterdoc-footer-beforedoc-beforedoc-afterdoc-title-beforedoc-title-afterdoc-meta-topdoc-meta-bottomdoc-meta-beforedoc-meta-aftersidebar-nav-beforesidebar-nav-afteraside-topaside-bottomaside-outline-beforeaside-outline-after
When
pageLayout: page:page-toppage-bottom
In post collection related pages (applicable to post list pages, tags pages, and archives pages):
posts-topposts-bottomposts-aside-topposts-aside-bottomposts-extract-beforeposts-extract-after
In post list pages:
posts-post-list-beforeposts-post-list-afterposts-post-list-pagination-after
In tags pages:
posts-tags-beforeposts-tags-title-afterposts-tags-content-beforeposts-tags-after
In archives pages:
posts-archives-beforeposts-archives-after
In categories pages:
posts-categories-beforeposts-categories-content-beforeposts-categories-after
<NotFound /> Slots
not-found
Common Slots
The following slots are supported in both <Layout /> and <NotFound />:
layout-toplayout-bottomnav-bar-title-beforenav-bar-title-afternav-bar-content-beforenav-bar-content-afternav-bar-menu-beforenav-bar-menu-afternav-screen-content-beforenav-screen-content-afternav-screen-menu-beforenav-screen-menu-afterfooter-contentbulletin-content
