feat:增加博客formatter

docs/.vitepress/theme/components/StatsChart.vue

@@ -0,0 +1,59 @@
+<template>
+  <calendar-heatmap
+    :values="heatmapData"
+    :end-date="new Date()"
+    no-data-text="暂无记录"
+    tooltip-unit="篇"
+    :round="2"
+    :locale="{
+      less: '少于',
+      more: '多于',
+      months: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
+      days: ['日', '一', '二', '三', '四', '五', '六'],
+    }"
+    class="blog-heatmap"
+  />
+</template>
+
+<script setup lang="ts">
+import { CalendarHeatmap } from 'vue3-calendar-heatmap';
+import 'vue3-calendar-heatmap/dist/style.css';
+import { data } from '../../data/posts.data.js'
+
+const dateCountMap = new Map<string, number>();
+
+// 按日期分组统计
+data.forEach(item => {
+  const date = item.date
+
+  if (dateCountMap.has(date)) {
+    dateCountMap.set(date, dateCountMap.get(date)! + 1);
+  } else {
+    dateCountMap.set(date, 1);
+  }
+});
+  
+// 转换为目标格式
+const heatmapData = Array.from(dateCountMap.entries()).map(([date, count]) => ({
+  date,
+  count
+}))
+</script>
+
+<style scoped>
+.blog-heatmap {
+  margin-top: 10px;
+}
+
+.blog-heatmap :deep(.vch__wrapper) {
+  font-family: 'CustomFont', sans-serif !important;
+}
+
+.blog-heatmap :deep(.vch__month__label) {
+  font-size: 8px !important;
+}
+
+.blog-heatmap :deep(.vch__day__label) {
+  font-size: 8px !important;
+}
+</style>

docs/.vitepress/theme/index.ts

@@ -1,6 +1,7 @@
 import DefaultTheme from 'vitepress/theme'
 import Confetti from "./components/Confetti.vue";
 import ArticleMetadata from "./components/ArticleMetadata.vue"
+import StatsChart from './components/StatsChart.vue'
 import type { EnhanceAppContext } from 'vitepress'
 import { onMounted, watch, nextTick } from 'vue'
 import { useRoute } from 'vitepress'
@@ -30,6 +31,7 @@ export default {
   },
   enhanceApp({ app }: EnhanceAppContext) {
     app.component("Confetti", Confetti);
+    app.component("StatsChart", StatsChart);
     app.component("ArticleMetadata", ArticleMetadata);
   },
 };