gitea-yuany3721/vuepress-theme-plume
1
0
Fork 1
mirror of https://github.com/pengzhanbo/vuepress-theme-plume.git synced 2026-04-23 10:58:13 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(theme): add layout slots (#558)

Browse Source
This commit is contained in:
pengzhanbo 2025-04-19 11:39:57 +08:00 committed by GitHub
parent 337d9ab662
commit 0bceda590c
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
9 changed files with 76 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
docs/notes/theme/guide/custom/slots.md
View File

@ -96,9 +96,12 @@ export default defineClientConfig({
- `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`
@ -160,7 +163,11 @@ export default defineClientConfig({
- `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`

12
theme/src/client/components/Nav/VPNav.vue
View File

@ -43,6 +43,12 @@ watchEffect(() => {
<template #nav-bar-content-after>
<slot name="nav-bar-content-after" />
</template>
<template #nav-bar-menu-before>
<slot name="nav-bar-menu-before" />
</template>
<template #nav-bar-menu-after>
<slot name="nav-bar-menu-after" />
</template>
</VPNavbar>
<VPNavScreen :open="isScreenOpen">
@ -52,6 +58,12 @@ watchEffect(() => {
<template #nav-screen-content-after>
<slot name="nav-screen-content-after" />
</template>
<template #nav-screen-menu-before>
<slot name="nav-screen-menu-before" />
</template>
<template #nav-screen-menu-after>
<slot name="nav-screen-menu-after" />
</template>
</VPNavScreen>
</header>
</template>

2
theme/src/client/components/Nav/VPNavBar.vue
View File

@ -51,7 +51,9 @@ watchPostEffect(() => {
<div class="content-body">
<slot name="nav-bar-content-before" />
<VPNavBarSearch class="search" />
<slot name="nav-bar-menu-before" />
<VPNavBarMenu class="menu" />
<slot name="nav-bar-menu-after" />
<VPNavBarTranslations class="translations" />
<VPNavBarAppearance class="appearance" />
<VPNavBarSocialLinks class="social-links" />

2
theme/src/client/components/Nav/VPNavScreen.vue
View File

@ -24,7 +24,9 @@ const isLocked = useScrollLock(inBrowser ? document.body : null)
<div v-if="open" id="navScreen" class="vp-nav-screen">
<div class="container">
<slot name="nav-screen-content-before" />
<slot name="nav-screen-menu-before" />
<VPNavScreenMenu class="menu" />
<slot name="nav-screen-menu-after" />
<VPNavScreenTranslates class="translations" />
<VPNavScreenAppearance class="appearance" />
<VPNavScreenSocialLinks class="social-links" />

10
theme/src/client/components/VPContent.vue
View File

@ -142,7 +142,15 @@ watch(
<template #doc-meta-after>
<slot name="doc-meta-after" />
</template>
<template #doc-meta-top>
<slot name="doc-meta-top" />
</template>
<template #doc-meta-bottom>
<slot name="doc-meta-bottom" />
</template>
<template #doc-content-before>
<slot name="doc-content-before" />
</template>
<template #doc-footer-before>
<slot name="doc-footer-before" />
</template>

6
theme/src/client/components/VPDoc.vue
View File

@ -122,6 +122,8 @@ watch(
<slot name="doc-before" />
<main class="main">
<VPDocBreadcrumbs />
<slot name="doc-meta-top" />
<VPDocMeta>
<template #doc-meta-before>
<slot name="doc-meta-before" />
@ -130,17 +132,19 @@ watch(
<slot name="doc-meta-after" />
</template>
</VPDocMeta>
<slot name="doc-meta-bottom" />
<VPEncryptPage v-if="!isPageDecrypted" />
<div
v-else class="vp-doc plume-content"
:class="[pageName, enabledExternalLinkIcon && 'external-link-icon-enabled']" vp-content
>
<slot name="doc-content-before" />
<Content />
<DocGitContributors v-if="contributorsMode === 'block'" />
<DocGitChangelog />
<VPDocCopyright />
</div>
</main>

6
theme/src/client/components/global/VPCardMasonry.vue
View File

@ -27,6 +27,9 @@ const rawList = computed(() => {
})
const columnsLength = computed<number>(() => {
if (__VUEPRESS_SSR__)
return 3
let length = 1
if (typeof props.cols === 'number') {
length = props.cols
@ -67,6 +70,9 @@ async function drawColumns() {
}
onMounted(() => {
if (__VUEPRESS_SSR__)
return
drawColumns()
const debounceDraw = useDebounceFn(drawColumns)
watch([rawList, columnsLength], debounceDraw, { flush: 'post' })

21
theme/src/client/layouts/Layout.vue
View File

@ -56,12 +56,24 @@ useCloseSidebarOnEscape(isSidebarOpen, closeSidebar)
<template #nav-bar-content-after>
<slot name="nav-bar-content-after" />
</template>
<template #nav-bar-menu-before>
<slot name="nav-bar-menu-before" />
</template>
<template #nav-bar-menu-after>
<slot name="nav-bar-menu-after" />
</template>
<template #nav-screen-content-before>
<slot name="nav-screen-content-before" />
</template>
<template #nav-screen-content-after>
<slot name="nav-screen-content-after" />
</template>
<template #nav-screen-menu-before>
<slot name="nav-screen-menu-before" />
</template>
<template #nav-screen-menu-after>
<slot name="nav-screen-menu-after" />
</template>
</VPNav>
<VPLocalNav
@ -93,6 +105,15 @@ useCloseSidebarOnEscape(isSidebarOpen, closeSidebar)
<template #doc-meta-after>
<slot name="doc-meta-after" />
</template>
<template #doc-meta-top>
<slot name="doc-meta-top" />
</template>
<template #doc-meta-bottom>
<slot name="doc-meta-bottom" />
</template>
<template #doc-content-before>
<slot name="doc-content-before" />
</template>
<template #doc-footer-before>
<slot name="doc-footer-before" />
</template>

12
theme/src/client/layouts/NotFound.vue
View File

@ -28,12 +28,24 @@ const { theme } = useData()
<template #nav-bar-content-after>
<slot name="nav-bar-content-after" />
</template>
<template #nav-bar-menu-before>
<slot name="nav-bar-menu-before" />
</template>
<template #nav-bar-menu-after>
<slot name="nav-bar-menu-after" />
</template>
<template #nav-screen-content-before>
<slot name="nav-screen-content-before" />
</template>
<template #nav-screen-content-after>
<slot name="nav-screen-content-after" />
</template>
<template #nav-screen-menu-before>
<slot name="nav-screen-menu-before" />
</template>
<template #nav-screen-menu-after>
<slot name="nav-screen-menu-after" />
</template>
</VPNav>
<div id="VPContent" class="vp-content">