通过内部提供的插槽可以很轻松的扩展主题界面
使用
-> .vitepress/theme/index.ts
ts
import { h } from 'vue'
import Theme from 'vitepress-theme-ououe'
import PwaPopup from '../components/PwaPopup.vue'
import './index.css'
export default {
Layout() {
return h(Theme.Layout!, null, {
'footer-after': () => h(PwaPopup),
})
},
}全部插槽
- header-before
- header-left
- header-logo-after
- header-search-before
- header-right
- header-after
- not-found-top
- not-found-bottom
- page-top
- page-pagination-before
- page-bottom
- article-item-top
- article-item-bottom
- tag-top
- tag-after
- tag-bottom
- tag-item
- article-top
- article-content-before
- article-content-after
- article-pagination-before
- article-bottom
- article-item-top
- article-item-bottom
- footer-before
- footer-after
类型声明
ts
/* eslint-disable @typescript-eslint/no-explicit-any */
import type { PostsItem } from './index'
type Frontmatter = Record<string, any>
export interface ArticleListSlots {
'article-item-top'?: (props: { item: PostsItem }) => any
'article-item-bottom'?: (props: { item: PostsItem }) => any
}
export interface TagListSlots {
'tag-item'?: (props: { tag: string; count: number }) => any
}
export interface HeaderSlots {
'header-left'?: () => any
'header-logo-after'?: () => any
'header-search-before'?: () => any
'header-right'?: () => any
}
export interface ArticleSlots extends ArticleListSlots {
'article-top'?: (props: { frontmatter: Frontmatter }) => any
'article-content-before'?: (props: { frontmatter: Frontmatter }) => any
'article-content-after'?: (props: { frontmatter: Frontmatter }) => any
'article-pagination-before'?: (props: { frontmatter: Frontmatter }) => any
'article-bottom'?: (props: { frontmatter: Frontmatter }) => any
}
export interface PageSlots extends ArticleListSlots {
'page-top'?: () => any
'page-pagination-before'?: () => any
'page-bottom'?: () => any
}
export interface TagSlots extends TagListSlots {
'tag-top'?: () => any
'tag-after'?: () => any
'tag-bottom'?: () => any
}
export interface NotFoundSlots {
'not-found-top'?: () => any
'not-found-bottom'?: () => any
}
export interface LayoutsSlots
extends ArticleSlots,
PageSlots,
TagSlots,
HeaderSlots,
NotFoundSlots {
'header-before'?: () => any
'header-after'?: () => any
'footer-before'?: () => any
'footer-after'?: () => any
}