From deb17c7ebc5077ec50ccb1a1813959d9af579f53 Mon Sep 17 00:00:00 2001
From: pengzhanbo <volodymyr@foxmail.com>
Date: Sat, 9 Mar 2024 00:28:56 +0800
Subject: [PATCH] =?UTF-8?q?feat(theme):=20=E6=96=B0=E5=A2=9E=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2=E5=85=83=E6=95=B0=E6=8D=AE=E4=BD=9C=E8=80=85=E4=BF=A1?=
 =?UTF-8?q?=E6=81=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 theme/src/client/components/PageMeta.vue      | 28 +++++++++++++++----
 .../src/client/components/icons/IconUser.vue  |  8 ++++++
 2 files changed, 30 insertions(+), 6 deletions(-)
 create mode 100644 theme/src/client/components/icons/IconUser.vue

diff --git a/theme/src/client/components/PageMeta.vue b/theme/src/client/components/PageMeta.vue
index 5fb98c11..d7cc59de 100644
--- a/theme/src/client/components/PageMeta.vue
+++ b/theme/src/client/components/PageMeta.vue
@@ -12,6 +12,7 @@ import { useExtraBlogData } from '../composables/index.js'
 import IconBooks from './icons/IconBooks.vue'
 import IconClock from './icons/IconClock.vue'
 import IconTag from './icons/IconTag.vue'
+import IconUser from './icons/IconUser.vue'
 
 const page = usePageData<PlumeThemePageData>()
 const matter = usePageFrontmatter<PlumeThemePostFrontmatter>()
@@ -33,7 +34,7 @@ const tags = computed(() => {
   if (matter.value.tags) {
     return matter.value.tags.slice(0, 4).map(tag => ({
       name: tag,
-      colors: extraData.value.tagsColorsPreset[extraData.value.tagsColors[tag]],
+      colors: extraData.value.tagsColorsPreset[extraData.value.tagsColors[tag]] ?? [],
     }))
   }
 
@@ -56,10 +57,14 @@ const hasMeta = computed(() => readingTime.value.time || tags.value.length || cr
       <span v-if="index !== categoryList.length - 1" class="dot">&rsaquo;</span>
     </template>
   </div>
-  <h1 v-if="page.isBlogPost" class="page-title" :class="{ padding: !hasMeta }">
+  <h1 class="page-title" :class="{ padding: !hasMeta }">
     {{ page.title }}
   </h1>
   <div v-if="hasMeta" class="page-meta-wrapper">
+    <p v-if="matter.author" class="author">
+      <IconUser class="icon" />
+      <span>{{ matter.author }}</span>
+    </p>
     <p v-if="readingTime.time" class="reading-time">
       <IconBooks class="icon" />
       <span>{{ readingTime.words }}</span>
@@ -144,14 +149,20 @@ const hasMeta = computed(() => readingTime.value.time || tags.value.length || cr
   margin-right: 0.3rem;
 }
 
+.page-meta-wrapper .author .icon,
+.page-meta-wrapper .author span {
+  color: var(--vp-c-text-2);
+  transition: color var(--t-color);
+}
+
 .page-meta-wrapper .tag {
   display: inline-block;
   padding: 3px 5px;
   margin-right: 6px;
   font-size: 12px;
   line-height: 1;
-  color: var(--vp-tag-color);
-  background-color: var(--vp-tag-bg-color);
+  color: var(--vp-tag-color, var(--vp-c-text-3));
+  background-color: var(--vp-tag-bg-color, var(--vp-c-default-soft));
   border-radius: 3px;
 }
 
@@ -168,10 +179,15 @@ const hasMeta = computed(() => readingTime.value.time || tags.value.length || cr
 }
 
 .page-meta-wrapper .create-time {
-  flex: 1;
-  justify-content: right;
   min-width: 110px;
   margin-right: 0;
   text-align: right;
 }
+
+@media (min-width: 768px) {
+  .page-meta-wrapper .create-time {
+    flex: 1;
+    justify-content: right;
+  }
+}
 </style>
diff --git a/theme/src/client/components/icons/IconUser.vue b/theme/src/client/components/icons/IconUser.vue
new file mode 100644
index 00000000..52e89b3d
--- /dev/null
+++ b/theme/src/client/components/icons/IconUser.vue
@@ -0,0 +1,8 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256">
+    <path
+      fill="currentColor"
+      d="M230.92 212c-15.23-26.33-38.7-45.21-66.09-54.16a72 72 0 1 0-73.66 0c-27.39 8.94-50.86 27.82-66.09 54.16a8 8 0 1 0 13.85 8c18.84-32.56 52.14-52 89.07-52s70.23 19.44 89.07 52a8 8 0 1 0 13.85-8M72 96a56 56 0 1 1 56 56a56.06 56.06 0 0 1-56-56"
+    />
+  </svg>
+</template>