chore: 文档前添加 创建时间、修改时间、字数统计

docs/.vitepress/theme/components/ArticleInfo.vue

@@ -0,0 +1,78 @@
+<script setup lang="ts">
+import { useData } from 'vitepress'
+import { onMounted, onUpdated, ref } from 'vue';
+
+const { frontmatter, page } = useData()
+
+// 动态计算字数
+const wordCount = ref(0)
+
+// 获取页面的纯文本内容并计算字数
+const getWordCount = () => {
+    const content = document.querySelector('main')?.innerText || ''
+
+    // const words = content.replace(/\s+/g, ' ').trim().split(' ')
+    // const words = content.match(/\S/g);
+    // 使用正则匹配所有的字母、数字、中文字符和常见的标点符号
+    // const words = content.match(/[\w\u4e00-\u9fa5]+/g) || []
+
+    // console.log('字数统计', words)
+    // // 计算字数，去除空白符
+    // return words ? words.length : 0;
+
+    // 使用正则表达式分别匹配中文和英文单词
+    const chineseWords = content.match(/[\u4e00-\u9fa5]/g) || []  // 匹配所有中文字符
+    const englishWords = content.match(/[a-zA-Z0-9]+/g) || []   // 匹配所有英文单词
+
+    // 中文字符数
+    const chineseCount = chineseWords.length
+
+    // 英文单词数
+    const englishCount = englishWords.length
+
+    // 输出调试信息
+    // console.log('中文字符数:', chineseCount, chineseWords)
+    // console.log('英文单词数:', englishCount, englishWords)
+
+    return chineseCount + englishCount  // 总字数
+}
+
+onMounted(() => {
+    console.log('ArticleInfo.vue onMounted')
+    wordCount.value = getWordCount()
+})
+
+onUpdated(() => {
+    console.log('ArticleInfo.vue onMounted')
+    wordCount.value = getWordCount()
+})
+</script>
+
+<template>
+    <div class="article-info">
+        <p>
+            字数统计：约 {{ wordCount }} 字
+        </p>
+        <p v-if="frontmatter.createTime" class="create-date">
+            创建时间：{{ frontmatter.createTime }}
+        </p>
+        <p v-if="frontmatter.updateTime" class="update-date">
+            最后更新：{{ frontmatter.updateTime }}
+        </p>
+    </div>
+</template>
+
+<style scoped>
+.article-info {
+    margin-bottom: 2rem;
+    padding: 10px 15px;
+    border-left: 4px solid #42b883;
+    background-color: var(--vp-c-bg-soft);
+    line-height: 1.8em;
+
+    font-size: small;
+
+    display: grid;
+    grid-template-columns: repeat(auto-fit, 180px);
+}
+</style>

docs/.vitepress/theme/custom.css

@@ -8,4 +8,4 @@
 .VPContent {
   /* 首页与顶部之间的距离加高 */
   padding-top: calc(var(--vp-nav-height) + 48px) !important;
-}
+}

docs/.vitepress/theme/index.ts

@@ -4,12 +4,14 @@ import type { Theme } from 'vitepress'
 import DefaultTheme from 'vitepress/theme'
 import './style.css'
 import './custom.css'
+import ArticleInfo from './components/ArticleInfo.vue'
 
 export default {
   extends: DefaultTheme,
   Layout: () => {
     return h(DefaultTheme.Layout, null, {
       // https://vitepress.dev/guide/extending-default-theme#layout-slots
+      'doc-before': () => h(ArticleInfo),
     })
   },
   enhanceApp({ app, router, siteData }) {