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

chore: tweak

Browse Source
This commit is contained in:
pengzhanbo 2024-06-16 16:52:11 +08:00
parent fbe57418f9
commit d45dfd667b
9 changed files with 158 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
theme/src/client/components/Blog/VPBlog.vue
View File

@ -1,5 +1,4 @@
<script lang="ts" setup> <script lang="ts" setup>
import { computed } from 'vue'
import VPPostList from '@theme/Blog/VPPostList.vue' import VPPostList from '@theme/Blog/VPPostList.vue'
import VPBlogArchives from '@theme/Blog/VPBlogArchives.vue' import VPBlogArchives from '@theme/Blog/VPBlogArchives.vue'
import VPBlogAside from '@theme/Blog/VPBlogAside.vue' import VPBlogAside from '@theme/Blog/VPBlogAside.vue'
@ -10,35 +9,64 @@ import VPTransitionFadeSlideY from '@theme/VPTransitionFadeSlideY.vue'
import { useData } from '../../composables/data.js' import { useData } from '../../composables/data.js'
const { theme, page } = useData() const { theme, page } = useData()
const com = {
VPPostList,
VPBlogTags,
VPBlogArchives,
}
const type = computed(() => {
const type = page.value.type
if (type === 'blog-tags')
return 'VPBlogTags'
if (type === 'blog-archives')
return 'VPBlogArchives'
return 'VPPostList'
})
</script> </script>
<template> <template>
<div class="vp-blog"> <div class="vp-blog">
<slot name="blog-top" />
<div class="blog-container" :class="{ 'no-profile': !theme.profile }"> <div class="blog-container" :class="{ 'no-profile': !theme.profile }">
<VPBlogNav v-if="!theme.profile" is-local /> <VPBlogNav v-if="!theme.profile" is-local />
<VPTransitionFadeSlideY> <VPTransitionFadeSlideY>
<component :is="com[type]" /> <VPBlogArchives v-if="page.type === 'blog-archives'">
<template #blog-archives-before>
<slot name="blog-archives-before" />
</template>
<template #blog-archives-after>
<slot name="blog-archives-after" />
</template>
</VPBlogArchives>
<VPBlogTags v-else-if="page.type === 'blog-tags'">
<template #blog-tags-before>
<slot name="blog-tags-before" />
</template>
<template #blog-tags-after>
<slot name="blog-tags-after" />
</template>
</VPBlogTags>
<VPPostList v-else>
<template #blog-post-list-before>
<slot name="blog-post-list-before" />
</template>
<template #blog-post-list-after>
<slot name="blog-post-list-after" />
</template>
<template #blog-post-list-pagination-after>
<slot name="blog-post-list-pagination-after" />
</template>
</VPPostList>
</VPTransitionFadeSlideY> </VPTransitionFadeSlideY>
<VPBlogAside /> <VPBlogAside>
<VPBlogExtract /> <template #blog-aside-top>
<slot name="blog-aside-top" />
</template>
<template #blog-aside-bottom>
<slot name="blog-aside-bottom" />
</template>
</VPBlogAside>
<VPBlogExtract>
<template #blog-extract-before>
<slot name="blog-extract-before" />
</template>
<template #blog-extract-after>
<slot name="blog-extract-after" />
</template>
</VPBlogExtract>
</div> </div>
<slot name="blog-bottom" />
</div> </div>
</template> </template>

4
theme/src/client/components/Blog/VPBlogArchives.vue
View File

@ -8,6 +8,8 @@ const { archives } = useArchives()
<template> <template>
<div class="vp-blog-archives"> <div class="vp-blog-archives">
<slot name="blog-archives-before" />
<h2 class="archives-title"> <h2 class="archives-title">
<span class="vpi-archive icon" /> <span class="vpi-archive icon" />
<span>{{ archivesLink.text }}</span> <span>{{ archivesLink.text }}</span>
@ -22,6 +24,8 @@ const { archives } = useArchives()
</div> </div>
</template> </template>
</div> </div>
<slot name="blog-archives-after" />
</div> </div>
</template> </template>

2
theme/src/client/components/Blog/VPBlogAside.vue
View File

@ -8,8 +8,10 @@ const { theme } = useData()
<template> <template>
<div v-if="theme.profile" class="vp-blog-aside"> <div v-if="theme.profile" class="vp-blog-aside">
<slot name="blog-aside-top" />
<VPBlogProfile /> <VPBlogProfile />
<VPBlogNav /> <VPBlogNav />
<slot name="blog-aside-bottom" />
</div> </div>
</template> </template>

4
theme/src/client/components/Blog/VPBlogExtract.vue
View File

@ -64,6 +64,8 @@ const showBlogExtract = computed(() => {
<Transition name="fade"> <Transition name="fade">
<div v-show="open" class="blog-modal" @click.self="open = false"> <div v-show="open" class="blog-modal" @click.self="open = false">
<div class="blog-modal-container" :class="{ open: lazyOpen }"> <div class="blog-modal-container" :class="{ open: lazyOpen }">
<slot name="blog-extract-before" />
<div v-if="profile" class="profile"> <div v-if="profile" class="profile">
<p v-if="imageUrl" class="avatar"> <p v-if="imageUrl" class="avatar">
<img :src="imageUrl" :alt="profile.name"> <img :src="imageUrl" :alt="profile.name">
@ -95,6 +97,8 @@ const showBlogExtract = computed(() => {
<span>{{ archives.text }}</span> <span>{{ archives.text }}</span>
</VPLink> </VPLink>
</div> </div>
<slot name="blog-extract-after" />
</div> </div>
</div> </div>
</Transition> </Transition>

4
theme/src/client/components/Blog/VPBlogTags.vue
View File

@ -8,6 +8,8 @@ const { tags: tagsLink } = useBlogExtract()
<template> <template>
<div class="vp-blog-tags" :class="{ 'has-list': postList.length > 0 }"> <div class="vp-blog-tags" :class="{ 'has-list': postList.length > 0 }">
<slot name="blog-tags-before" />
<div class="tags-nav"> <div class="tags-nav">
<h2 class="tags-title"> <h2 class="tags-title">
<span class="vpi-tag icon" /> <span class="vpi-tag icon" />
@ -34,6 +36,8 @@ const { tags: tagsLink } = useBlogExtract()
<VPShortPostList v-if="postList.length" :post-list="postList" /> <VPShortPostList v-if="postList.length" :post-list="postList" />
</div> </div>
<slot name="blog-tags-after" />
</div> </div>
</template> </template>

3
theme/src/client/components/Blog/VPPostList.vue
View File

@ -18,6 +18,7 @@ const {
<template> <template>
<div class="vp-blog-post-list"> <div class="vp-blog-post-list">
<slot name="blog-post-list-before" />
<template v-for="(post, index) in postList" :key="post.path"> <template v-for="(post, index) in postList" :key="post.path">
<VPTransitionDrop appear :delay="index * 0.04"> <VPTransitionDrop appear :delay="index * 0.04">
<VPPostItem <VPPostItem
@ -26,6 +27,7 @@ const {
/> />
</VPTransitionDrop> </VPTransitionDrop>
</template> </template>
<slot name="blog-post-list-after" />
<VPPagination <VPPagination
v-if="isPaginationEnabled" v-if="isPaginationEnabled"
:page="page" :page="page"
@ -35,6 +37,7 @@ const {
:is-first-page="isFirstPage" :is-first-page="isFirstPage"
@change="changePage" @change="changePage"
/> />
<slot name="blog-post-list-pagination-after" />
</div> </div>
</template> </template>

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

@ -22,14 +22,52 @@ const isBlogLayout = computed(() => {
<template> <template>
<div <div
id="VPContent" id="VPContent" vp-content class="vp-content" :class="{
vp-content
class="vp-content" :class="{
'has-sidebar': hasSidebar && !props.isNotFound, 'has-sidebar': hasSidebar && !props.isNotFound,
'is-home': frontmatter.pageLayout === 'home', 'is-home': frontmatter.pageLayout === 'home',
}" }"
> >
<VPBlog v-if="isBlogLayout" /> <VPBlog v-if="isBlogLayout">
<template #blog-top>
<slot name="blog-top" />
</template>
<template #blog-bottom>
<slot name="blog-bottom" />
</template>
<template #blog-archives-before>
<slot name="blog-archives-before" />
</template>
<template #blog-archives-after>
<slot name="blog-archives-after" />
</template>
<template #blog-tags-before>
<slot name="blog-tags-before" />
</template>
<template #blog-tags-after>
<slot name="blog-tags-after" />
</template>
<template #blog-post-list-before>
<slot name="blog-post-list-before" />
</template>
<template #blog-post-list-after>
<slot name="blog-post-list-after" />
</template>
<template #blog-post-list-pagination-after>
<slot name="blog-post-list-pagination-after" />
</template>
<template #blog-aside-top>
<slot name="blog-aside-top" />
</template>
<template #blog-aside-bottom>
<slot name="blog-aside-bottom" />
</template>
<template #blog-extract-before>
<slot name="blog-extract-before" />
</template>
<template #blog-extract-after>
<slot name="blog-extract-after" />
</template>
</VPBlog>
<VPPage v-else-if="frontmatter.pageLayout === 'page'"> <VPPage v-else-if="frontmatter.pageLayout === 'page'">
<template #page-top> <template #page-top>
@ -44,10 +82,7 @@ const isBlogLayout = computed(() => {
<VPHome v-else-if="frontmatter.pageLayout === 'home'" /> <VPHome v-else-if="frontmatter.pageLayout === 'home'" />
<component <component :is="frontmatter.pageLayout" v-else-if="frontmatter.pageLayout && frontmatter.pageLayout !== 'doc'" />
:is="frontmatter.pageLayout"
v-else-if="frontmatter.pageLayout && frontmatter.pageLayout !== 'doc'"
/>
<VPDoc v-else> <VPDoc v-else>
<template #doc-top> <template #doc-top>

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

@ -1,15 +1,15 @@
<script setup lang="ts"> <script setup lang="ts">
import { useRoute } from 'vuepress/client' import { useRoute } from 'vuepress/client'
import { watch } from 'vue' import { watch } from 'vue'
import VPBackdrop from '../components/VPBackdrop.vue' import VPBackdrop from '@theme/VPBackdrop.vue'
import VPContent from '../components/VPContent.vue' import VPContent from '@theme/VPContent.vue'
import VPLocalNav from '../components/VPLocalNav.vue' import VPLocalNav from '@theme/VPLocalNav.vue'
import VPNav from '../components/Nav/VPNav.vue' import VPNav from '@theme/Nav/VPNav.vue'
import VPSidebar from '../components/VPSidebar.vue' import VPSidebar from '@theme/VPSidebar.vue'
import VPSkipLink from '../components/VPSkipLink.vue' import VPSkipLink from '@theme/VPSkipLink.vue'
import VPFooter from '../components/VPFooter.vue' import VPFooter from '@theme/VPFooter.vue'
import VPBackToTop from '../components/VPBackToTop.vue' import VPBackToTop from '@theme/VPBackToTop.vue'
import VPEncryptGlobal from '../components/VPEncryptGlobal.vue' import VPEncryptGlobal from '@theme/VPEncryptGlobal.vue'
import { useCloseSidebarOnEscape, useSidebar } from '../composables/sidebar.js' import { useCloseSidebarOnEscape, useSidebar } from '../composables/sidebar.js'
import { useGlobalEncrypt, usePageEncrypt } from '../composables/encrypt.js' import { useGlobalEncrypt, usePageEncrypt } from '../composables/encrypt.js'
import { useData } from '../composables/data.js' import { useData } from '../composables/data.js'
@ -110,6 +110,45 @@ useCloseSidebarOnEscape(isSidebarOpen, closeSidebar)
<template #aside-outline-after> <template #aside-outline-after>
<slot name="aside-outline-after" /> <slot name="aside-outline-after" />
</template> </template>
<template #blog-top>
<slot name="blog-top" />
</template>
<template #blog-bottom>
<slot name="blog-bottom" />
</template>
<template #blog-archives-before>
<slot name="blog-archives-before" />
</template>
<template #blog-archives-after>
<slot name="blog-archives-after" />
</template>
<template #blog-tags-before>
<slot name="blog-tags-before" />
</template>
<template #blog-tags-after>
<slot name="blog-tags-after" />
</template>
<template #blog-post-list-before>
<slot name="blog-post-list-before" />
</template>
<template #blog-post-list-after>
<slot name="blog-post-list-after" />
</template>
<template #blog-post-list-pagination-after>
<slot name="blog-post-list-pagination-after" />
</template>
<template #blog-aside-top>
<slot name="blog-aside-top" />
</template>
<template #blog-aside-bottom>
<slot name="blog-aside-bottom" />
</template>
<template #blog-extract-before>
<slot name="blog-extract-before" />
</template>
<template #blog-extract-after>
<slot name="blog-extract-after" />
</template>
</VPContent> </VPContent>
</slot> </slot>
<VPBackToTop /> <VPBackToTop />

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

@ -1,8 +1,8 @@
<script setup lang="ts"> <script setup lang="ts">
import { useRouteLocale, withBase } from 'vuepress/client' import { useRouteLocale, withBase } from 'vuepress/client'
import VPNav from '../components/Nav/VPNav.vue' import VPNav from '@theme/Nav/VPNav.vue'
import VPSkipLink from '../components/VPSkipLink.vue' import VPSkipLink from '@theme/VPSkipLink.vue'
import VPFooter from '../components/VPFooter.vue' import VPFooter from '@theme/VPFooter.vue'
import { useData } from '../composables/data.js' import { useData } from '../composables/data.js'
const root = useRouteLocale() const root = useRouteLocale()