feat: 添加文章标签和更新日期信息显示

docs/.vitepress/theme/index.mjs

@@ -1,4 +1,8 @@
 import DefaultTheme from 'vitepress/theme';
+import CustomLayout from './layout/CustomLayout.vue';
 import './style/custom.less';
 
-export default DefaultTheme;
+export default {
+  extends: DefaultTheme,
+  Layout: CustomLayout,
+};

docs/.vitepress/theme/layout/CustomLayout.vue

@@ -0,0 +1,15 @@
+<script setup>
+import DefaultTheme from 'vitepress/theme';
+import DocContentFooter from './DocContentFooter.vue';
+
+const { Layout } = DefaultTheme;
+</script>
+
+<template>
+  <Layout>
+    <template #doc-footer-before>
+      <hr class="custom__divider" />
+      <DocContentFooter />
+    </template>
+  </Layout>
+</template>

docs/.vitepress/theme/layout/DocContentFooter.vue

@@ -0,0 +1,64 @@
+<script setup>
+import { useData } from 'vitepress';
+import { computed } from 'vue';
+import { getCommonDateTime } from '@frost-utils/javascript';
+
+const { frontmatter } = useData();
+
+const tagList = computed(() => {
+  let tags = frontmatter.value.tags || [];
+  return tags;
+});
+
+const updatedAt = computed(() => {
+
+  let date0 = frontmatter.value.lastmod;
+  let date1 = (typeof date0 === 'string') ? date0.replace(/Z$/gi, '') : '';
+  let date2 = date1 ? getCommonDateTime(date1, 'all') : '';
+
+  return date2;
+
+});
+</script>
+
+<template>
+  <div class="doc-content-footer">
+    <div class="post-tags">
+      <Badge
+        v-for="(text, index) in tagList"
+        :key="index"
+        :text="text"
+        type="info"
+      />
+    </div>
+    <div v-show="updatedAt" class="post-date">
+      <span>最后更新于：</span>
+      <span>{{ updatedAt }}</span>
+    </div>
+  </div>
+</template>
+
+<style lang="less">
+.doc-content-footer {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  line-height: 1;
+  user-select: none;
+
+  .VPBadge {
+    display: inline-block;
+    margin: 0.25em;
+  }
+
+  .post-tags {
+    margin-top: 0.5em;
+  }
+
+  .post-date {
+    margin: 0.5em 0.25em;
+    font-size: 14px;
+  }
+}
+</style>

docs/.vitepress/theme/style/custom.less

@@ -5,6 +5,14 @@
   --vp-c-indigo-soft: rgb(66, 165, 245, 0.14);
 }
 
+.custom__divider {
+  border: none;
+  height: 1px;
+  width: 100%;
+  background-color: var(--vp-c-divider);
+  margin: 0.5em 0;
+}
+
 .vp-doc h2 {
   padding-top: 0;
   border-top: none;