From c3d9a4e6deeaeea73c4cf893cfdf42fb8b3fb090 Mon Sep 17 00:00:00 2001
From: pengzhanbo <volodymyr@foxmail.com>
Date: Mon, 25 Mar 2024 13:26:57 +0800
Subject: [PATCH] =?UTF-8?q?fix(theme):=20=E4=BF=AE=E5=A4=8D=E5=8D=9A?=
 =?UTF-8?q?=E5=AE=A2=E9=A1=B5=E7=BB=84=E4=BB=B6=E8=BF=87=E6=B8=A1=E6=95=88?=
 =?UTF-8?q?=E6=9E=9C=E5=AF=BC=E8=87=B4=E7=9A=84SSR=E6=B0=B4=E5=90=88?=
 =?UTF-8?q?=E9=94=99=E8=AF=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 theme/src/client/components/Blog/Blog.vue     | 22 ++++++++++++++++---
 .../client/components/Blog/BlogProfile.vue    |  8 +++----
 2 files changed, 23 insertions(+), 7 deletions(-)

diff --git a/theme/src/client/components/Blog/Blog.vue b/theme/src/client/components/Blog/Blog.vue
index 05d2424f..9a6797ca 100644
--- a/theme/src/client/components/Blog/Blog.vue
+++ b/theme/src/client/components/Blog/Blog.vue
@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import { usePageData } from 'vuepress/client'
+import { computed } from 'vue'
 import type { PlumeThemePageData } from '../../../shared/index.js'
 import { useThemeLocaleData } from '../../composables/index.js'
 import TransitionFadeSlideY from '../TransitionFadeSlideY.vue'
@@ -12,17 +13,32 @@ import BlogNav from './BlogNav.vue'
 
 const theme = useThemeLocaleData()
 const page = usePageData<PlumeThemePageData>()
+
+const com = {
+  PostList,
+  Tags,
+  Archives,
+}
+
+const type = computed(() => {
+  const type = page.value.type
+  if (type === 'blog-tags')
+    return 'Tags'
+  if (type === 'blog-archives')
+    return 'Archives'
+  return 'PostList'
+})
 </script>
 
 <template>
   <div class="blog-wrapper">
     <div class="blog-container" :class="{ 'no-avatar': !theme.avatar }">
       <BlogNav v-if="!theme.avatar" is-local />
+
       <TransitionFadeSlideY>
-        <PostList v-if="page.type === 'blog'" />
-        <Tags v-if="page.type === 'blog-tags'" />
-        <Archives v-if="page.type === 'blog-archives'" />
+        <component :is="com[type]" />
       </TransitionFadeSlideY>
+
       <BlogAside />
       <BlogExtract />
     </div>
diff --git a/theme/src/client/components/Blog/BlogProfile.vue b/theme/src/client/components/Blog/BlogProfile.vue
index 11d481d3..ed9e521e 100644
--- a/theme/src/client/components/Blog/BlogProfile.vue
+++ b/theme/src/client/components/Blog/BlogProfile.vue
@@ -11,19 +11,19 @@ const avatar = computed(() => theme.value.avatar)
 
 <template>
   <div v-if="avatar" class="avatar-profile">
-    <p v-if="avatar.url" :class="{ circle: avatar.circle }">
+    <p v-if="avatar.url" :class="{ circle: !!avatar.circle }">
       <img :src="avatar.url" :alt="avatar.name">
     </p>
-    <div>
+    <div class="avatar-info">
       <h3>{{ avatar.name }}</h3>
       <p v-if="avatar.description" v-html="avatar.description" />
       <div v-if="avatar.location" class="avatar-location">
         <IconLocation />
-        <p v-html="avatar.location" />
+        <p v-if="avatar.location" v-html="avatar.location" />
       </div>
       <div v-if="avatar.organization" class="avatar-organization">
         <IconOrganization />
-        <p v-html="avatar.organization" />
+        <p v-if="avatar.organization" v-html="avatar.organization" />
       </div>
     </div>
     <div v-if="theme.social" class="avatar-social">