优化：文章元数据信息增加所属分类和标签列表

repos/.vitepress/theme/components/ArticleMetadata.vue

@@ -20,6 +20,23 @@
       </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">{{ frontmatter.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 frontmatter.tags" :key="index">
+          <a :href="'/tags.html?tag=' + tag + ''" target="_self">{{ tag }}</a>
+          <span v-if="index != frontmatter.tags.length - 1">, </span>
+        </span>
+      </span>
+    </div>
   </div>
 </template>
 

repos/.vitepress/theme/components/dynamic/Tag.vue

@@ -36,12 +36,6 @@
                 <h3 class="result-item-title">
                   <a :href="article.path" class="title" target="_blank">{{ article.title }}</a>
                 </h3>
-                <a-tag
-                  v-for="tag in article.tags"
-                  :class="selectTag === tag ? 'tag-checkable-checked tag-item' : 'tag-item'"
-                >
-                  <span class="tag-title">{{ tag }}</span>
-                </a-tag>
                 <p class="result-item-description"></p>
                 <div class="meta-wrapper">
                   <div class="meta-item">
@@ -49,7 +43,7 @@
                       <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="进入作者主页">{{ article?.author ?? theme.articleMetadataConfig.author }}</a>
+                      <a :href="article?.authorLink ?? theme.articleMetadataConfig.authorLink" title="进入作者主页">{{ article?.author ?? theme.articleMetadataConfig.author }}</a>
                     </span>
                   </div>
                   <div class="meta-item">
@@ -64,6 +58,23 @@
                     </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>
               </div>
             </a-list-item>
@@ -86,7 +97,7 @@
 import { computed, ref } from 'vue'
 import { useData } from 'vitepress'
 import articleData from '../../../../../article-data.json'
-import { formatDate } from '../../utils.ts'
+import { formatDate, getQueryParam } from '../../utils.ts'
 import '../../styles/article-meta-data.css'
 
 const { theme } = useData()
@@ -100,6 +111,12 @@ const toggleTag = (tagTitle: string) => {
   selectTag.value = tagTitle
 }
 
+// 如果URL路径有tag参数, 默认选中指定Tag, 例如: /tags?tag=Git
+let tag = getQueryParam('tag')
+if (tag && tag.trim() != '') {
+  toggleTag(tag)
+}
+
 /**
  * 初始化Tag数据(感谢https://github.com/clark-cui/vitepress-blog-zaun)
  * {tagTitle1: [article1, article2, ...}

repos/.vitepress/theme/utils.ts

@@ -7,3 +7,17 @@ export function formatDate(date) {
   const formatDate = new Date(date)
   return formatDate.toLocaleString('zh', {year: 'numeric', month: 'numeric', day: 'numeric', hour: 'numeric', minute: 'numeric'})
 }
+
+/**
+ * 获取URL路径中的指定参数 
+ * @param paramName 参数名
+ * @returns 参数值
+ */
+export function getQueryParam(paramName) {
+  const reg = new RegExp("(^|&)"+ paramName +"=([^&]*)(&|$)")
+  let value = window.location.search.substr(1).match(reg)
+  if (value != null) {
+    return unescape(value[2])
+  } 
+  return null
+}