yuany3721/vuepress-theme-plume
1
0
Fork 0
forked from gitea-yuany3721/vuepress-theme-plume
Code Pull Requests Activity

feat(theme): support encryption for all page layouts (#770)

Browse Source
This commit is contained in:
pengzhanbo 2025-12-03 13:25:16 +08:00 committed by GitHub
parent 4957c8b1de
commit 20ebeb5e62
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 145 additions and 135 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
theme/src/client/components/Home/VPHome.vue
View File

@ -8,6 +8,7 @@ import VPHomeHero from '@theme/Home/VPHomeHero.vue'
import VPHomeProfile from '@theme/Home/VPHomeProfile.vue'
import VPHomeTextImage from '@theme/Home/VPHomeTextImage.vue'
import VPPosts from '@theme/Posts/VPPosts.vue'
import VPEncrypt from '@theme/VPEncrypt.vue'
import { computed, h, nextTick, onUnmounted, resolveComponent, watch } from 'vue'
import { useData } from '../../composables/index.js'
@ -96,19 +97,21 @@ onUnmounted(() => {
<template>
<div class="vp-home">
<template
v-for="(item, index) in config"
:key="item.type + index"
>
<div :class="{ layout: index > 0 && item.type !== 'features' && item.type !== 'custom' }">
<component
:is="resolveComponentName(item.type)"
v-bind="item"
:index="index"
:only-once="onlyOnce"
/>
</div>
</template>
<VPEncrypt>
<template
v-for="(item, index) in config"
:key="item.type + index"
>
<div :class="{ layout: index > 0 && item.type !== 'features' && item.type !== 'custom' }">
<component
:is="resolveComponentName(item.type)"
v-bind="item"
:index="index"
:only-once="onlyOnce"
/>
</div>
</template>
</VPEncrypt>
</div>
</template>

143
theme/src/client/components/Posts/VPPosts.vue
View File

@ -6,6 +6,7 @@ import VPPostsCategories from '@theme/Posts/VPPostsCategories.vue'
import VPPostsExtract from '@theme/Posts/VPPostsExtract.vue'
import VPPostsNav from '@theme/Posts/VPPostsNav.vue'
import VPPostsTags from '@theme/Posts/VPPostsTags.vue'
import VPEncrypt from '@theme/VPEncrypt.vue'
import VPTransitionFadeSlideY from '@theme/VPTransitionFadeSlideY.vue'
import { onBeforeUnmount, watch } from 'vue'
import { forceUpdateCollection, useData } from '../../composables/index.js'
@ -30,80 +31,82 @@ onBeforeUnmount(() => forceUpdateCollection(undefined))
<template>
<div class="vp-posts" :class="{ 'home-posts': homePosts }" vp-posts>
<slot name="posts-top" />
<VPEncrypt>
<slot name="posts-top" />
<div
class="posts-container"
:class="{ 'no-profile': !theme.profile, 'left': theme.profile?.layout === 'left' }"
>
<VPPostsNav v-if="!theme.profile" is-local />
<div
class="posts-container"
:class="{ 'no-profile': !theme.profile, 'left': theme.profile?.layout === 'left' }"
>
<VPPostsNav v-if="!theme.profile" is-local />
<VPTransitionFadeSlideY>
<VPPostsArchives v-if="page.type === 'posts-archives'">
<template #posts-archives-before>
<slot name="posts-archives-before" />
</template>
<template #posts-archives-after>
<slot name="posts-archives-after" />
</template>
</VPPostsArchives>
<VPPostsTags v-else-if="page.type === 'posts-tags'">
<template #posts-tags-before>
<slot name="posts-tags-before" />
</template>
<template #posts-tags-after>
<slot name="posts-tags-after" />
</template>
<template #posts-tags-title-after>
<slot name="posts-tags-title-after" />
</template>
<template #posts-tags-content-before>
<slot name="posts-tags-content-before" />
</template>
</VPPostsTags>
<VPPostsCategories v-else-if="page.type === 'posts-categories'">
<template #posts-categories-before>
<slot name="posts-categories-before" />
</template>
<template #posts-categories-after>
<slot name="posts-categories-after" />
</template>
<template #posts-categories-content-before>
<slot name="posts-categories-content-before" />
</template>
</VPPostsCategories>
<VPPostList v-else :home-posts="homePosts">
<template #posts-post-list-before>
<slot name="posts-post-list-before" />
</template>
<template #posts-post-list-after>
<slot name="posts-post-list-after" />
</template>
<template #posts-post-list-pagination-after>
<slot name="posts-post-list-pagination-after" />
</template>
</VPPostList>
</VPTransitionFadeSlideY>
<VPTransitionFadeSlideY>
<VPPostsArchives v-if="page.type === 'posts-archives'">
<template #posts-archives-before>
<slot name="posts-archives-before" />
</template>
<template #posts-archives-after>
<slot name="posts-archives-after" />
</template>
</VPPostsArchives>
<VPPostsTags v-else-if="page.type === 'posts-tags'">
<template #posts-tags-before>
<slot name="posts-tags-before" />
</template>
<template #posts-tags-after>
<slot name="posts-tags-after" />
</template>
<template #posts-tags-title-after>
<slot name="posts-tags-title-after" />
</template>
<template #posts-tags-content-before>
<slot name="posts-tags-content-before" />
</template>
</VPPostsTags>
<VPPostsCategories v-else-if="page.type === 'posts-categories'">
<template #posts-categories-before>
<slot name="posts-categories-before" />
</template>
<template #posts-categories-after>
<slot name="posts-categories-after" />
</template>
<template #posts-categories-content-before>
<slot name="posts-categories-content-before" />
</template>
</VPPostsCategories>
<VPPostList v-else :home-posts="homePosts">
<template #posts-post-list-before>
<slot name="posts-post-list-before" />
</template>
<template #posts-post-list-after>
<slot name="posts-post-list-after" />
</template>
<template #posts-post-list-pagination-after>
<slot name="posts-post-list-pagination-after" />
</template>
</VPPostList>
</VPTransitionFadeSlideY>
<VPPostsAside>
<template #posts-aside-top>
<slot name="posts-aside-top" />
</template>
<template #posts-aside-bottom>
<slot name="posts-aside-bottom" />
</template>
</VPPostsAside>
<VPPostsExtract>
<template #posts-extract-before>
<slot name="posts-extract-before" />
</template>
<template #posts-extract-after>
<slot name="posts-extract-after" />
</template>
</VPPostsExtract>
</div>
<VPPostsAside>
<template #posts-aside-top>
<slot name="posts-aside-top" />
</template>
<template #posts-aside-bottom>
<slot name="posts-aside-bottom" />
</template>
</VPPostsAside>
<VPPostsExtract>
<template #posts-extract-before>
<slot name="posts-extract-before" />
</template>
<template #posts-extract-after>
<slot name="posts-extract-after" />
</template>
</VPPostsExtract>
</div>
<slot name="posts-bottom" />
<slot name="posts-bottom" />
</VPEncrypt>
</div>
</template>

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

@ -5,7 +5,7 @@ import VPDocBreadcrumbs from '@theme/VPDocBreadcrumbs.vue'
import VPDocCopyright from '@theme/VPDocCopyright.vue'
import VPDocFooter from '@theme/VPDocFooter.vue'
import VPDocMeta from '@theme/VPDocMeta.vue'
import VPEncryptPage from '@theme/VPEncryptPage.vue'
import VPEncrypt from '@theme/VPEncrypt.vue'
import VPTransitionFadeSlideY from '@theme/VPTransitionFadeSlideY.vue'
import { computed, nextTick, ref, watch } from 'vue'
import { useRoute } from 'vuepress/client'
@ -137,25 +137,27 @@ watch(
</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" />
<VPEncrypt>
<div
class="vp-doc plume-content"
:class="[pageName, enabledExternalLinkIcon && 'external-link-icon-enabled']" vp-content
>
<slot name="doc-content-before" />
<Content />
<Content />
<DocGitContributors v-if="contributorsMode === 'block'" />
<DocGitChangelog />
<VPDocCopyright />
</div>
<DocGitContributors v-if="contributorsMode === 'block'" />
<DocGitChangelog />
<VPDocCopyright />
<VPDocFooter>
<template #doc-footer-before>
<slot name="doc-footer-before" />
</template>
</VPDocFooter>
</div>
</VPEncrypt>
</main>
<VPDocFooter v-if="isPageDecrypted">
<template #doc-footer-before>
<slot name="doc-footer-before" />
</template>
</VPDocFooter>
<VPComment />

7
theme/src/client/components/VPEncryptPage.vue → theme/src/client/components/VPEncrypt.vue
View File

@ -1,12 +1,14 @@
<script setup lang="ts">
import VPEncryptForm from '@theme/VPEncryptForm.vue'
import { useTemplateRef } from 'vue'
import { useData } from '../composables/index.js'
import { useData, useEncrypt } from '../composables/index.js'
defineOptions({
inheritAttrs: false,
})
const { isPageDecrypted } = useEncrypt()
const { theme, frontmatter } = useData<'post'>()
const el = useTemplateRef<HTMLElement>('el')
@ -21,7 +23,7 @@ function onValidate(isValidate: boolean) {
</script>
<template>
<ClientOnly>
<ClientOnly v-if="!isPageDecrypted">
<div ref="el" class="vp-page-encrypt" v-bind="$attrs">
<div class="logo">
<span class="vpi-lock icon-lock-head" />
@ -29,6 +31,7 @@ function onValidate(isValidate: boolean) {
<VPEncryptForm :info="frontmatter.passwordHint || theme.encryptPageText" @validate="onValidate" />
</div>
</ClientOnly>
<slot v-else />
</template>
<style scoped>

55
theme/src/client/components/VPFriends.vue
View File

@ -1,5 +1,6 @@
<script lang="ts" setup>
import VPComment from '@theme/VPComment.vue'
import VPEncrypt from '@theme/VPEncrypt.vue'
import VPFriendsGroup from '@theme/VPFriendsGroup.vue'
import VPFriendsItem from '@theme/VPFriendsItem.vue'
import VPLink from '@theme/VPLink.vue'
@ -15,36 +16,38 @@ const groups = computed(() => matter.value.groups || [])
<template>
<div class="vp-friends">
<Content v-if="matter.contentPosition === 'before'" class="vp-doc plume-content before" vp-content />
<VPEncrypt>
<Content v-if="matter.contentPosition === 'before'" class="vp-doc plume-content before" vp-content />
<h2 class="title">
{{ matter.title || 'My Friends' }}
</h2>
<p v-if="matter.description && !page.autoDesc" class="description">
{{ matter.description }}
</p>
<section v-if="list.length" class="friends-list">
<VPFriendsItem
v-for="(friend, index) in list"
:key="friend.name + index"
:friend="friend"
/>
</section>
<h2 class="title">
{{ matter.title || 'My Friends' }}
</h2>
<p v-if="matter.description && !page.autoDesc" class="description">
{{ matter.description }}
</p>
<section v-if="list.length" class="friends-list">
<VPFriendsItem
v-for="(friend, index) in list"
:key="friend.name + index"
:friend="friend"
/>
</section>
<VPFriendsGroup v-for="(group, index) in groups" :key="index" :group="group" />
<VPFriendsGroup v-for="(group, index) in groups" :key="index" :group="group" />
<Content v-if="matter.contentPosition !== 'before'" class="vp-doc plume-content after" vp-content />
<Content v-if="matter.contentPosition !== 'before'" class="vp-doc plume-content after" vp-content />
<div v-if="editLink" class="edit-link">
<VPLink
class="edit-link-button"
:href="editLink.link"
no-icon
>
<span class="vpi-square-pen edit-link-icon" aria-label="edit icon" />
{{ editLink.text }}
</VPLink>
</div>
<div v-if="editLink" class="edit-link">
<VPLink
class="edit-link-button"
:href="editLink.link"
no-icon
>
<span class="vpi-square-pen edit-link-icon" aria-label="edit icon" />
{{ editLink.text }}
</VPLink>
</div>
</VPEncrypt>
<VPComment />
</div>

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

@ -1,17 +1,13 @@
<script setup lang="ts">
import VPEncryptPage from '@theme/VPEncryptPage.vue'
import { useEncrypt } from '../composables/index.js'
const { isPageDecrypted } = useEncrypt()
import VPEncrypt from '@theme/VPEncrypt.vue'
</script>
<template>
<div class="vp-page">
<VPEncryptPage v-if="!isPageDecrypted" />
<template v-else>
<VPEncrypt>
<slot name="page-top" />
<Content class="vp-doc plume-content" vp-content />
<slot name="page-bottom" />
</template>
</VPEncrypt>
</div>
</template>