From cc4837c45df5727dce0ce2f3cbc712050fd6aba0 Mon Sep 17 00:00:00 2001
From: pengzhanbo <volodymyr@foxmail.com>
Date: Fri, 12 Apr 2024 07:56:21 +0800
Subject: [PATCH] =?UTF-8?q?feat(theme):=20=E8=A1=A5=E5=85=A8=E5=9C=A8?=
 =?UTF-8?q?=E7=A7=BB=E5=8A=A8=E8=AE=BE=E5=A4=87=E4=B8=8B=E7=9A=84=E5=8D=9A?=
 =?UTF-8?q?=E4=B8=BB=E4=BF=A1=E6=81=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../client/components/Blog/BlogExtract.vue    | 34 ++++++++++++++++++-
 .../client/components/Blog/BlogProfile.vue    |  4 +--
 theme/src/node/blogTags.ts                    |  1 +
 3 files changed, 35 insertions(+), 4 deletions(-)

diff --git a/theme/src/client/components/Blog/BlogExtract.vue b/theme/src/client/components/Blog/BlogExtract.vue
index 87da7102..7009970f 100644
--- a/theme/src/client/components/Blog/BlogExtract.vue
+++ b/theme/src/client/components/Blog/BlogExtract.vue
@@ -62,6 +62,16 @@ const showBlogExtract = computed(() => {
               <p class="desc">
                 {{ avatar.description }}
               </p>
+              <div class="avatar-info">
+                <div v-if="avatar.location" class="avatar-location">
+                  <span class="vpi-location" />
+                  <p v-if="avatar.location" v-html="avatar.location" />
+                </div>
+                <div v-if="avatar.organization" class="avatar-organization">
+                  <span class="vpi-organization" />
+                  <p v-if="avatar.organization" v-html="avatar.organization" />
+                </div>
+              </div>
             </div>
           </div>
           <div v-if="hasBlogExtract" class="blog-nav" :class="{ 'no-avatar': !avatar }">
@@ -87,7 +97,7 @@ const showBlogExtract = computed(() => {
   bottom: 30%;
   z-index: calc(var(--vp-z-index-nav) - 1);
   display: block;
-  padding: 4px 10px;
+  padding: 6px 10px;
   cursor: pointer;
   background-color: var(--vp-c-bg);
   border: solid 1px var(--vp-c-divider);
@@ -212,4 +222,26 @@ const showBlogExtract = computed(() => {
   height: 1em;
   margin-right: 4px;
 }
+
+.avatar-info {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0 20px;
+  align-items: center;
+}
+
+.avatar-location,
+.avatar-organization {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 14px;
+  color: var(--vp-c-text-3);
+  transition: color var(--t-color);
+}
+
+.avatar-location p,
+.avatar-organization p {
+  margin: 0 4px;
+}
 </style>
diff --git a/theme/src/client/components/Blog/BlogProfile.vue b/theme/src/client/components/Blog/BlogProfile.vue
index 079aaf33..4220962b 100644
--- a/theme/src/client/components/Blog/BlogProfile.vue
+++ b/theme/src/client/components/Blog/BlogProfile.vue
@@ -38,13 +38,11 @@ const avatar = computed(() => theme.value.avatar)
   border-radius: 8px;
   box-shadow: var(--vp-shadow-1);
   transition: var(--t-color);
-  transition-property: background-color, color, box-shadow, transform;
-  transform: scale(1);
+  transition-property: background-color, color, box-shadow;
 }
 
 .avatar-profile:hover {
   box-shadow: var(--vp-shadow-2);
-  transform: scale(1.002);
 }
 
 .avatar-profile img {
diff --git a/theme/src/node/blogTags.ts b/theme/src/node/blogTags.ts
index 5efaf802..b47150a7 100644
--- a/theme/src/node/blogTags.ts
+++ b/theme/src/node/blogTags.ts
@@ -1,4 +1,5 @@
 import { hasOwn, random, toArray } from '@pengzhanbo/utils'
+
 export type BlogTagsColorsItem = readonly [
   string, // normal color
   string, // hover color