From 3daf80e218f59c031bf7039214b2d5a5d5a764d6 Mon Sep 17 00:00:00 2001
From: Charles7c <charles7c@126.com>
Date: Wed, 10 Aug 2022 17:22:36 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=EF=BC=9A=E8=81=9A=E5=90=88Ar?=
 =?UTF-8?q?ticleMetadata=E7=BB=84=E4=BB=B6=EF=BC=8C=E6=96=B9=E4=BE=BF?=
 =?UTF-8?q?=E3=80=8A=E6=88=91=E7=9A=84=E6=A0=87=E7=AD=BE=E3=80=8B=E5=8F=8A?=
 =?UTF-8?q?=E6=AF=8F=E7=AF=87=E6=96=87=E7=AB=A0=E4=B8=AD=E7=9A=84=E5=A4=8D?=
 =?UTF-8?q?=E7=94=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 repos/.vitepress/config/markdown.ts           |  2 +-
 .../theme/components/ArticleMetadata.vue      | 84 +++++++++++++++----
 .../theme/components/dynamic/Tag.vue          | 47 +----------
 .../theme/styles/article-meta-data.css        | 41 ---------
 4 files changed, 71 insertions(+), 103 deletions(-)
 delete mode 100644 repos/.vitepress/theme/styles/article-meta-data.css

diff --git a/repos/.vitepress/config/markdown.ts b/repos/.vitepress/config/markdown.ts
index b57dee993..edeef12c7 100644
--- a/repos/.vitepress/config/markdown.ts
+++ b/repos/.vitepress/config/markdown.ts
@@ -9,7 +9,7 @@ export const markdown: MarkdownOptions = {
   config: (md) => {
     md.renderer.rules.heading_close = (tokens, idx, options, env, slf) => {
       let htmlResult = slf.renderToken(tokens, idx, options, env, slf)
-      if (tokens[idx].tag === 'h1') htmlResult += `\n<ArticleMetadata v-if="$frontmatter?.aside ?? true"/>`
+      if (tokens[idx].tag === 'h1') htmlResult += `\n<ArticleMetadata v-if="$frontmatter?.aside ?? true" :article="$frontmatter" />`
       return htmlResult
     }
   }
diff --git a/repos/.vitepress/theme/components/ArticleMetadata.vue b/repos/.vitepress/theme/components/ArticleMetadata.vue
index ce2946ef7..fe1985aad 100644
--- a/repos/.vitepress/theme/components/ArticleMetadata.vue
+++ b/repos/.vitepress/theme/components/ArticleMetadata.vue
@@ -5,14 +5,14 @@
         <svg role="img" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><title>原创作者</title><path d="M858.5 763.6c-18.9-44.8-46.1-85-80.6-119.5-34.5-34.5-74.7-61.6-119.5-80.6-0.4-0.2-0.8-0.3-1.2-0.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-0.4 0.2-0.8 0.3-1.2 0.5-44.8 18.9-85 46-119.5 80.6-34.5 34.5-61.6 74.7-80.6 119.5C146.9 807.5 137 854 136 901.8c-0.1 4.5 3.5 8.2 8 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c0.1 4.4 3.6 7.8 8 7.8h60c4.5 0 8.1-3.7 8-8.2-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"></path></svg>
       </span>
       <span class="meta-content">
-        <a :href="frontmatter?.authorLink ?? theme.articleMetadataConfig.authorLink" title="进入作者主页">{{ frontmatter?.author ?? theme.articleMetadataConfig.author }}</a>
+        <a :href="authorLink" title="进入作者主页">{{ author }}</a>
       </span>
     </div>
     <div class="meta-item">
       <span class="meta-icon date">
         <svg role="img" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><title>发布时间</title><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64z m0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path><path d="M686.7 638.6L544.1 535.5V288c0-4.4-3.6-8-8-8H488c-4.4 0-8 3.6-8 8v275.4c0 2.6 1.2 5 3.3 6.5l165.4 120.6c3.6 2.6 8.6 1.8 11.2-1.7l28.6-39c2.6-3.7 1.8-8.7-1.8-11.2z"></path></svg>
       </span>
-      <time class="meta-content" :datetime="isoDatetime" :title="toDate">{{ datetime }}</time>
+      <time class="meta-content" :datetime="date.toISOString()" :title="dayjs().to(dayjs(date))">{{ date.toLocaleString('zh', {year: 'numeric', month: 'numeric', day: 'numeric', hour: 'numeric', minute: 'numeric'}) }}</time>
     </div>
     <div class="meta-item" v-if="theme.articleMetadataConfig?.showPv ?? false">
       <span class="meta-icon pv">
@@ -22,18 +22,18 @@
     </div>
     <div class="meta-item">
       <span class="meta-icon category">
-        <svg role="img" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><title>所属分类</title><path d="M880 298.4H521L403.7 186.2a8.15 8.15 0 0 0-5.5-2.2H144c-17.7 0-32 14.3-32 32v592c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V330.4c0-17.7-14.3-32-32-32zM840 768H184V256h188.5l119.6 114.4H840V768z"></path></svg>
+        <svg role="img" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><title>所属分类</title><path d="M928 444H820V330.4c0-17.7-14.3-32-32-32H473L355.7 186.2a8.15 8.15 0 0 0-5.5-2.2H96c-17.7 0-32 14.3-32 32v592c0 17.7 14.3 32 32 32h698c13 0 24.8-7.9 29.7-20l134-332c1.5-3.8 2.3-7.9 2.3-12 0-17.7-14.3-32-32-32zM136 256h188.5l119.6 114.4H748V444H238c-13 0-24.8 7.9-29.7 20L136 643.2V256z m635.3 512H159l103.3-256h612.4L771.3 768z"></path></svg>
       </span>
-      <span class="meta-content">{{ frontmatter.categories.join(", ") }}</span>
+      <span class="meta-content">{{ categories.join(", ") }}</span>
     </div>
     <div class="meta-item">
-      <span class="meta-icon category">
+      <span class="meta-icon tag">
         <svg role="img" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><title>标签列表</title><path d="M483.2 790.3L861.4 412c1.7-1.7 2.5-4 2.3-6.3l-25.5-301.4c-0.7-7.8-6.8-13.9-14.6-14.6L522.2 64.3c-2.3-0.2-4.7 0.6-6.3 2.3L137.7 444.8a8.03 8.03 0 0 0 0 11.3l334.2 334.2c3.1 3.2 8.2 3.2 11.3 0z m62.6-651.7l224.6 19 19 224.6L477.5 694 233.9 450.5l311.9-311.9z m60.16 186.23a48 48 0 1 0 67.88-67.89 48 48 0 1 0-67.88 67.89zM889.7 539.8l-39.6-39.5a8.03 8.03 0 0 0-11.3 0l-362 361.3-237.6-237a8.03 8.03 0 0 0-11.3 0l-39.6 39.5a8.03 8.03 0 0 0 0 11.3l243.2 242.8 39.6 39.5c3.1 3.1 8.2 3.1 11.3 0l407.3-406.6c3.1-3.1 3.1-8.2 0-11.3z"></path></svg>
       </span>
       <span class="meta-content">
-        <span v-for="(tag, index) in frontmatter.tags" :key="index">
-          <a :href="'/tags.html?tag=' + tag + ''" target="_self">{{ tag }}</a>
-          <span v-if="index != frontmatter.tags.length - 1">, </span>
+        <span v-for="(tag, index) in tags" :key="index">
+          <a :href="'/tags.html?tag=' + tag" target="_self">{{ tag }}</a>
+          <span v-if="index != tags.length - 1">, </span>
         </span>
       </span>
     </div>
@@ -41,24 +41,72 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, computed, watchEffect, onMounted } from 'vue'
+import { reactive, toRefs } from 'vue'
 import { useData } from 'vitepress'
 import dayjs from 'dayjs'
 import 'dayjs/locale/zh-cn'
 import relativeTime from 'dayjs/plugin/relativeTime'
-import '../styles/article-meta-data.css'
 
-// 获取发布时间
-const { page, theme, frontmatter } = useData()
-const date = computed(() => new Date(frontmatter.value.date))
-const isoDatetime = computed(() => date.value.toISOString())
-const datetime = date.value.toLocaleString('zh', {year: 'numeric', month: 'numeric', day: 'numeric', hour: 'numeric', minute: 'numeric'})
-
-// 获取发布时间的相对时间, 例如: 1天前、2周前、3个月前、4年前
 dayjs.extend(relativeTime)
 dayjs.locale('zh-cn')
-const toDate = dayjs().to(dayjs(frontmatter.value.date))
+
+// 定义文章属性
+const props = defineProps({
+  article: Object
+})
+
+// 初始化文章元数据信息
+const { theme } = useData()
+const data = reactive({
+  author: props.article?.author ?? theme.value.articleMetadataConfig.author,
+  authorLink: props.article?.authorLink ?? theme.value.articleMetadataConfig.authorLink,
+  date: new Date(props.article.date),
+  categories: props.article?.categories ?? [],
+  tags: props.article?.tags ?? []
+})
+const { author, authorLink, date, toDate, categories, tags } = toRefs(data)
 </script>
 
 <style scoped>
+.meta-wrapper {
+  margin-top: 10px;
+}
+.meta-item {
+  display: inline-block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  vertical-align: middle;
+  max-width: 240px;
+  color: var(--vp-c-text-2);
+  cursor: default;
+  font-size: 14px;
+}
+.meta-item:not(:last-child) {
+  margin-right: 1rem;
+}
+.meta-icon, meta-content {
+  display: inline-block;
+  margin-right: .375rem;
+  vertical-align: middle;
+}
+.meta-icon {
+  position: relative;
+  bottom: 1.5px;
+}
+.meta-icon.date {
+  bottom: 1.3px;
+}
+.meta-icon svg {
+  fill: var(--vp-c-text-2);
+  height: 16px;
+  width: 16px;
+}
+.meta-content a {
+  font-weight: 400;
+  color: var(--vp-c-text-2);
+}
+.meta-content a:hover {
+  color: var(--vp-c-brand);
+}
 </style>
\ No newline at end of file
diff --git a/repos/.vitepress/theme/components/dynamic/Tag.vue b/repos/.vitepress/theme/components/dynamic/Tag.vue
index d7435efb2..6f6302812 100644
--- a/repos/.vitepress/theme/components/dynamic/Tag.vue
+++ b/repos/.vitepress/theme/components/dynamic/Tag.vue
@@ -37,45 +37,8 @@
                   <a :href="article.path" class="title" target="_blank">{{ article.title }}</a>
                 </h3>
                 <p class="result-item-description"></p>
-                <div class="meta-wrapper">
-                  <div class="meta-item">
-                    <span class="meta-icon author">
-                      <svg role="img" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><title>原创作者</title><path d="M858.5 763.6c-18.9-44.8-46.1-85-80.6-119.5-34.5-34.5-74.7-61.6-119.5-80.6-0.4-0.2-0.8-0.3-1.2-0.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-0.4 0.2-0.8 0.3-1.2 0.5-44.8 18.9-85 46-119.5 80.6-34.5 34.5-61.6 74.7-80.6 119.5C146.9 807.5 137 854 136 901.8c-0.1 4.5 3.5 8.2 8 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c0.1 4.4 3.6 7.8 8 7.8h60c4.5 0 8.1-3.7 8-8.2-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"></path></svg>
-                    </span>
-                    <span class="meta-content">
-                      <a :href="article?.authorLink ?? theme.articleMetadataConfig.authorLink" title="进入作者主页">{{ article?.author ?? theme.articleMetadataConfig.author }}</a>
-                    </span>
-                  </div>
-                  <div class="meta-item">
-                    <span class="meta-icon date">
-                      <svg role="img" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><title>发布时间</title><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64z m0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path><path d="M686.7 638.6L544.1 535.5V288c0-4.4-3.6-8-8-8H488c-4.4 0-8 3.6-8 8v275.4c0 2.6 1.2 5 3.3 6.5l165.4 120.6c3.6 2.6 8.6 1.8 11.2-1.7l28.6-39c2.6-3.7 1.8-8.7-1.8-11.2z"></path></svg>
-                    </span>
-                    <time class="meta-content">{{ formatDate(article.date) }}</time>
-                  </div>
-                  <div class="meta-item" v-if="theme.articleMetadataConfig?.showPv ?? false">
-                    <span class="meta-icon pv">
-                      <svg role="img" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><title>阅读数</title><path d="M942.2 486.2C847.4 286.5 704.1 186 512 186c-192.2 0-335.4 100.5-430.2 300.3-7.7 16.2-7.7 35.2 0 51.5C176.6 737.5 319.9 838 512 838c192.2 0 335.4-100.5 430.2-300.3 7.7-16.2 7.7-35 0-51.5zM512 766c-161.3 0-279.4-81.8-362.7-254C232.6 339.8 350.7 258 512 258c161.3 0 279.4 81.8 362.7 254C791.5 684.2 673.4 766 512 766z"></path><path d="M508 336c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176z m0 288c-61.9 0-112-50.1-112-112s50.1-112 112-112 112 50.1 112 112-50.1 112-112 112z"></path></svg>
-                    </span>
-                    <span id="pv" class="meta-content"></span>
-                  </div>
-                  <div class="meta-item">
-                    <span class="meta-icon category">
-                      <svg role="img" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><title>所属分类</title><path d="M880 298.4H521L403.7 186.2a8.15 8.15 0 0 0-5.5-2.2H144c-17.7 0-32 14.3-32 32v592c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V330.4c0-17.7-14.3-32-32-32zM840 768H184V256h188.5l119.6 114.4H840V768z"></path></svg>
-                    </span>
-                    <span class="meta-content">{{ article.categories.join(",") }}</span>
-                  </div>
-                  <div class="meta-item">
-                    <span class="meta-icon category">
-                      <svg role="img" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><title>标签列表</title><path d="M483.2 790.3L861.4 412c1.7-1.7 2.5-4 2.3-6.3l-25.5-301.4c-0.7-7.8-6.8-13.9-14.6-14.6L522.2 64.3c-2.3-0.2-4.7 0.6-6.3 2.3L137.7 444.8a8.03 8.03 0 0 0 0 11.3l334.2 334.2c3.1 3.2 8.2 3.2 11.3 0z m62.6-651.7l224.6 19 19 224.6L477.5 694 233.9 450.5l311.9-311.9z m60.16 186.23a48 48 0 1 0 67.88-67.89 48 48 0 1 0-67.88 67.89zM889.7 539.8l-39.6-39.5a8.03 8.03 0 0 0-11.3 0l-362 361.3-237.6-237a8.03 8.03 0 0 0-11.3 0l-39.6 39.5a8.03 8.03 0 0 0 0 11.3l243.2 242.8 39.6 39.5c3.1 3.1 8.2 3.1 11.3 0l407.3-406.6c3.1-3.1 3.1-8.2 0-11.3z"></path></svg>
-                    </span>
-                    <span class="meta-content">
-                      <span v-for="(tag, index) in article.tags" :key="index">
-                        <a :href="'/tags.html?tag=' + tag + ''" target="_self">{{ tag }}</a>
-                        <span v-if="index != article.tags.length - 1">, </span>
-                      </span>
-                    </span>
-                  </div>
-                </div>
+                <!-- 文章元数据信息 -->
+                <ArticleMetadata :article="article" :key="md5(article.date)" />
               </div>
             </a-list-item>
           </a-list>
@@ -95,12 +58,9 @@
 
 <script lang="ts" setup>
 import { computed, ref } from 'vue'
-import { useData } from 'vitepress'
+import md5 from 'blueimp-md5'
 import articleData from '../../../../../article-data.json'
 import { formatDate, getQueryParam } from '../../utils.ts'
-import '../../styles/article-meta-data.css'
-
-const { theme } = useData()
 
 // 获取所有Tag数据
 const tags = computed(() => initTags(articleData))
@@ -270,6 +230,7 @@ svg:not(:root) {
   font-size: 14px;
   margin: 8px 0;
 }
+
 .vp-doc a {
   font-weight: 400;
   font-size: 14px;
diff --git a/repos/.vitepress/theme/styles/article-meta-data.css b/repos/.vitepress/theme/styles/article-meta-data.css
deleted file mode 100644
index 0094dd7c7..000000000
--- a/repos/.vitepress/theme/styles/article-meta-data.css
+++ /dev/null
@@ -1,41 +0,0 @@
-.meta-wrapper {
-  margin-top: 10px;
-}
-.meta-item {
-  display: inline-block;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  vertical-align: middle;
-  max-width: 240px;
-  color: var(--vp-c-text-2);
-  cursor: default;
-  font-size: 14px;
-}
-.meta-item:not(:last-child) {
-  margin-right: 1rem;
-}
-.meta-icon, meta-content {
-  display: inline-block;
-  margin-right: .375rem;
-  vertical-align: middle;
-}
-.meta-icon {
-  position: relative;
-  bottom: 1.5px;
-}
-.meta-icon.date {
-  bottom: 1.3px;
-}
-.meta-icon svg {
-  fill: var(--vp-c-text-2);
-  height: 16px;
-  width: 16px;
-}
-.meta-content a {
-  font-weight: 400;
-  color: var(--vp-c-text-2);
-}
-.meta-content a:hover {
-  color: var(--vp-c-brand);
-}
\ No newline at end of file