180 lines
3.8 KiB
Markdown
180 lines
3.8 KiB
Markdown
---
|
|
title: Layout Slots
|
|
icon: ph:layout-duotone
|
|
createTime: 2025/10/08 16:19:43
|
|
permalink: /en/guide/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`:
|
|
|
|
```ts title=".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.
|
|
|
|
```vue {7-11} title=".vuepress/layouts/Layout.vue"
|
|
<script setup>
|
|
import { Layout } from 'vuepress-theme-plume/client' // [!code hl]
|
|
</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`:
|
|
|
|
::: code-tabs
|
|
@tab .vuepress/client.ts
|
|
|
|
```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),
|
|
}),
|
|
},
|
|
})
|
|
```
|
|
|
|
@tab .vuepress/components/CustomContent.vue
|
|
|
|
```vue
|
|
<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-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`
|
|
|
|
- When `pageLayout: page`:
|
|
|
|
- `page-top`
|
|
- `page-bottom`
|
|
|
|
- In post collection related pages (applicable to post list pages, tags pages, and archives pages):
|
|
|
|
- `posts-top`
|
|
- `posts-bottom`
|
|
- `posts-aside-top`
|
|
- `posts-aside-bottom`
|
|
- `posts-extract-before`
|
|
- `posts-extract-after`
|
|
|
|
- In post list pages:
|
|
|
|
- `posts-post-list-before`
|
|
- `posts-post-list-after`
|
|
- `posts-post-list-pagination-after`
|
|
|
|
- In tags pages:
|
|
|
|
- `posts-tags-before`
|
|
- `posts-tags-title-after`
|
|
- `posts-tags-content-before`
|
|
- `posts-tags-after`
|
|
|
|
- In archives pages:
|
|
|
|
- `posts-archives-before`
|
|
- `posts-archives-after`
|
|
|
|
- In categories pages:
|
|
|
|
- `posts-categories-before`
|
|
- `posts-categories-content-before`
|
|
- `posts-categories-after`
|
|
|
|
### `<NotFound />` Slots
|
|
|
|
- `not-found`
|
|
|
|
### Common Slots
|
|
|
|
The following slots are supported in both `<Layout />` and `<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`
|