feat:增加博客formatter

docs/.vitepress/config.mts

@@ -20,8 +20,8 @@ export default withMermaid({
     logo: "/logo.png",
     // https://vitepress.dev/reference/default-theme-config
     nav: [
-      { text: 'Home', link: '/' },
-      { text: 'Web前端', 
+      { text: '🏠 Home', link: '/' },
+      { text: '🌐Web前端', 
         items: [
           { 
             text: 'Vue',
@@ -41,7 +41,7 @@ export default withMermaid({
           },
         ]  
       },
-      { text: 'Web后端', 
+      { text: '🖥️ Web后端', 
         items: [
           { 
             text: 'SpringBoot',
@@ -75,7 +75,7 @@ export default withMermaid({
           },
         ]
       },
-      { text: 'DevOps', 
+      { text: '🚀 DevOps', 
         items: [ 
           { text: 'OpenObserve部署和使用', link: '/DevOps/OpenObserve' },
           { text: 'Jenkins部署和使用', link: '/DevOps/Jenkins' },
@@ -83,7 +83,7 @@ export default withMermaid({
           { text: 'Docker简介和安装', link: '/DevOps/Docker' }  
          ]
       },
-      { text: 'Flutter', 
+      { text: '📱 Flutter', 
         items: [
           { text: 'Dart基础教程', link: '/Flutter/DartGuide' },
           { text: 'Flutter基础教程', link: '/Flutter/FlutterGuide' },
@@ -227,6 +227,9 @@ export default withMermaid({
 
   markdown: {
     lineNumbers: true,
+    image: {
+      lazyLoading: true
+    },
     container: {
       tipLabel: '提示',
       warningLabel: '注意',

docs/.vitepress/data/posts.data.js

@@ -0,0 +1,19 @@
+import { createContentLoader } from 'vitepress'
+
+export default createContentLoader('./**/*.md', {
+  includeSrc: true, // 包含原始 markdown 源
+  render: true,     // 包含渲染的整页 HTML
+  transform(rawData) {
+    return rawData.filter(page => {
+      return page.url.includes('.html') && page.frontmatter.date
+    }).map((page) => {
+      // 对每个页面进行处理
+      return {
+        // 返回你需要的页面数据
+        title: page.frontmatter.title,
+        date: page.frontmatter.date,
+        url: page.url
+      }
+    })
+  }
+})

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);
   },
 };