feat(theme): 补全在移动设备下的博主信息

pengzhanbo · Apr 11, 2024 · cc4837c · cc4837c
1 parent 82bbc77
commit cc4837c
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 4 deletions.
diff --git 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
@@ -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
@@ -1,4 +1,5 @@
 import { hasOwn, random, toArray } from '@pengzhanbo/utils'
+
 export type BlogTagsColorsItem = readonly [
   string, // normal color
   string, // hover color