139 lines
2.7 KiB
Markdown
139 lines
2.7 KiB
Markdown
---
|
|
title: 布局插槽
|
|
icon: ph:layout-duotone
|
|
author: Plume Theme
|
|
createTime: 2024/06/17 16:19:43
|
|
permalink: /guide/layout-slots/
|
|
---
|
|
|
|
## 概述
|
|
|
|
主题通过 `<Layout />` 和 `<NotFound />` 提供了 丰富的 布局插槽，可以通过这些插槽，在 页面 的不同位置注入内容。
|
|
以便用户可以个性化的使用主题。
|
|
|
|
## 使用
|
|
|
|
以 `<Layout />` 为例，首先，需要创建一个 客户端配置文件： `.vuepress/client.ts`:
|
|
|
|
```ts
|
|
import { defineClientConfig } from 'vuepress/client'
|
|
import Layout from './layouts/Layout.vue'
|
|
|
|
export default defineClientConfig({
|
|
layouts: {
|
|
Layout,
|
|
},
|
|
})
|
|
```
|
|
|
|
然后，创建一个 `.vuepress/layouts/Layout.vue`，作为布局插槽的默认组件，在该组件中引入 当前主题的 `<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` 中：
|
|
|
|
```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),
|
|
}),
|
|
},
|
|
})
|
|
```
|
|
|
|
## 插槽
|
|
|
|
### `<Layout />` 插槽
|
|
|
|
- 当 `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`
|
|
|
|
- 在 博客分类页 中：
|
|
|
|
- `blog-categories-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-screen-content-before`
|
|
- `nav-screen-content-after`
|