新增：Badge 徽章组件

docs/.vitepress/theme/MyLayout.vue

@@ -19,6 +19,9 @@ import { computed } from 'vue'
 import DefaultTheme from 'vitepress/theme'
 import { useData } from 'vitepress'
 import md5 from 'blueimp-md5'
+import Copyright from './components/layout/Copyright.vue'
+import Comment from './components/layout/Comment.vue'
+import Footer from './components/layout/Footer.vue'
 
 const { Layout } = DefaultTheme
 const { page, theme, frontmatter } = useData()

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({

docs/.vitepress/theme/styles/vars.css

@@ -28,4 +28,16 @@
   :root {
     --vp-home-hero-image-filter: blur(72px);
   }
+}
+
+
+/**
+ * Component: Badge
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --vp-c-badge-type-warning: #e7c000;
+  --vp-c-badge-type-tip: #42b983;
+  --vp-c-badge-type-error: #da5961;
+  --vp-c-badge-type-info: #0170fe;
 }