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

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>
import { computed } from 'vue'
import VPPostList from '@theme/Blog/VPPostList.vue'
import VPBlogArchives from '@theme/Blog/VPBlogArchives.vue'
import VPBlogAside from '@theme/Blog/VPBlogAside.vue'
@ -10,35 +9,64 @@ import VPTransitionFadeSlideY from '@theme/VPTransitionFadeSlideY.vue'
import { useData } from '../../composables/data.js'
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>
<template>
<div class="vp-blog">
<slot name="blog-top" />
<div class="blog-container" :class="{ 'no-profile': !theme.profile }">
<VPBlogNav v-if="!theme.profile" is-local />
<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>
<VPBlogAside />
<VPBlogExtract />
<VPBlogAside>
<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>
<slot name="blog-bottom" />
</div>
</template>

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

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

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

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

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

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

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

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

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

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

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

@ -22,14 +22,52 @@ const isBlogLayout = computed(() => {
<template>
<div
id="VPContent"
vp-content
class="vp-content" :class="{
id="VPContent" vp-content class="vp-content" :class="{
'has-sidebar': hasSidebar && !props.isNotFound,
'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'">
<template #page-top>
@ -44,10 +82,7 @@ const isBlogLayout = computed(() => {
<VPHome v-else-if="frontmatter.pageLayout === 'home'" />
<component
:is="frontmatter.pageLayout"
v-else-if="frontmatter.pageLayout && frontmatter.pageLayout !== 'doc'"
/>
<component :is="frontmatter.pageLayout" v-else-if="frontmatter.pageLayout && frontmatter.pageLayout !== 'doc'" />
<VPDoc v-else>
<template #doc-top>

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

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

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

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