fix(theme): 修复博客页组件过渡效果导致的SSR水合错误

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>

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">