新增：Badge 徽章组件

docs/.vitepress/theme/components/ArticleMetadata.vue

@@ -26,7 +26,7 @@
       </span>
       <span class="meta-content">
         <span v-for="(category, index) in categories" :key="index">
-          <a href="javascript:void(0);" @click="goToLink('/archives.html', 'category', category)" target="_self" title="按分类归档">{{ category }}</a>
+          <a href="javascript:void(0);" @click="goToLink('/archives.html', 'category', category)" target="_self" :title="category">{{ category }}</a>
           <span v-if="index != categories.length - 1">, </span>
         </span>
       </span>
@@ -37,7 +37,7 @@
       </span>
       <span class="meta-content">
         <span v-for="(tag, index) in tags" :key="index">
-          <a href="javascript:void(0);" @click="goToLink('/archives.html', 'tag', tag)" target="_self" title="按标签归档">{{ tag }}</a>
+          <a href="javascript:void(0);" @click="goToLink('/archives.html', 'tag', tag)" target="_self" :title="tag">{{ tag }}</a>
           <span v-if="index != tags.length - 1">, </span>
         </span>
       </span>

docs/.vitepress/theme/components/Badge.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+const props = withDefaults(
+  defineProps<{
+    text?: string,
+    type?: 'warning' | 'tip' | 'error' | 'info'
+    vertical?: 'top' | 'middle'
+  }>(), {
+    text: '',
+    type: 'tip',
+    vertical: 'top',
+  }
+);
+</script>
+
+<template>
+  <span
+    class='VPBadge'
+    :class="[ `VPBadge-type-${props.type}` ]"
+    :style="{ 'vertical-align': props.vertical }"
+  >
+    <slot>{{ props.text }}</slot>
+  </span>
+</template>
+
+<style scoped>
+.VPBadge {
+  display: inline-block;
+  font-size: 14px;
+  height: 18px;
+  line-height: 18px;
+  border-radius: 3px;
+  padding: 0 6px;
+  color: #fff;
+}
+.VPBadge.VPBadge-type-warning {
+  background-color: var(--vp-c-badge-type-warning);
+}
+.VPBadge.VPBadge-type-tip {
+  background-color: var(--vp-c-badge-type-tip);
+}
+.VPBadge.VPBadge-type-error {
+  background-color: var(--vp-c-badge-type-error);
+}
+.VPBadge.VPBadge-type-info {
+  background-color: var(--vp-c-badge-type-info);
+}
+</style>

docs/.vitepress/theme/components/layout/Comment.vue

@@ -10,7 +10,7 @@ import $ from 'jquery'
 import { Message } from '@arco-design/web-vue'
 import '@arco-design/web-vue/es/message/style/css.js'
 import Gitalk from 'gitalk'
-import '../styles/gitalk.css'
+import '../../styles/components/gitalk.css'
 
 // 定义属性
 const props = defineProps({