feat: 支持博客归档

docs/.vitepress/config/en.ts

@@ -11,7 +11,8 @@ export default defineConfig({
   themeConfig: {
     // https://vitepress.dev/reference/default-theme-config
     nav: [
-			{ text: "Home", link: "/en/" },
+			{ text: "Blog", link: "/en/" },
+      { text: "Archive", link: "/en/archive/", activeMatch: '/en/archive/' },
 			{ text: "Notes", link: "/en/notes/", activeMatch: '/en/notes/' },
 			{ text: "About", link: "/en/about", activeMatch: '/en/about' },
     ],

docs/.vitepress/config/zh.ts

@@ -1,4 +1,4 @@
-import { DefaultTheme, defineConfig } from 'vitepress'
+import { type DefaultTheme, defineConfig } from 'vitepress'
 
 import { createSideBarZH } from "../theme/utils/createSideBar";
 
@@ -11,7 +11,8 @@ export default defineConfig({
   themeConfig: {
     // https://vitepress.dev/reference/default-theme-config
     nav: [
-			{ text: "首页", link: "/" },
+			{ text: "博客", link: "/" },
+			{ text: "归档", link: "/archive", activeMatch: '/archive' },
 			{ text: "笔记", link: "/notes/", activeMatch: '/notes/' },
 			{ text: "关于", link: "/about", activeMatch: '/about' },
     ],

docs/.vitepress/theme/posts-en.data.mts

@@ -6,6 +6,8 @@ interface Post {
   date: {
     time: number
     string: string
+    year: string 
+    monthDay: string
   }
   tags: string[]
   excerpt: string | undefined
@@ -41,6 +43,13 @@ function formatDate(raw: string): Post['date'] {
       year: 'numeric',
       month: '2-digit',
       day: '2-digit'
+    }),
+    year: date.toLocaleDateString('en-US', {
+      year: 'numeric'
+    }),
+    monthDay: date.toLocaleDateString('en-US', {
+      month: '2-digit',
+      day: '2-digit'
     })
   }
 }

docs/.vitepress/theme/posts.data.mts

@@ -6,6 +6,8 @@ interface Post {
   date: {
     time: number
     string: string
+    year: string 
+    monthDay: string
   }
   tags: string[]
   excerpt: string | undefined
@@ -41,6 +43,13 @@ function formatDate(raw: string): Post['date'] {
       year: 'numeric',
       month: '2-digit',
       day: '2-digit'
+    }),
+    year: date.toLocaleDateString('zh-Hans', {
+      year: 'numeric'
+    }),
+    monthDay: date.toLocaleDateString('zh-Hans', {
+      month: '2-digit',
+      day: '2-digit'
     })
   }
 }

docs/archive.md

@@ -0,0 +1,100 @@
+---
+# https://vitepress.dev/reference/default-theme-home-page
+layout: doc
+editLink: false
+lastUpdated: false
+isNoComment: true
+isNoBackBtn: true
+---
+
+<!-- 之所以将代码写在 md 里面，而非单独封装为 Vue 组件，因为 aside 不会动态刷新，参考 https://github.com/vuejs/vitepress/issues/2686 -->
+<template v-for="[year, postGroup] in postGroups" :key="year">
+  <h2 :id="year" class="post-title">
+    <a
+      class="header-anchor"
+      :href="`#${year}`"
+      :aria-label="`Permalink to &quot;${year}&quot;`"
+      >​</a
+    >
+    <div class="post-year hollow-text">{{ year }}</div>
+  </h2>
+  <div class="post-container" v-for="post in postGroup" :key="post.url">
+    <a :href="post.url">{{ post.title }}</a>
+    <span class="post-date">
+      {{ post.date.monthDay }}
+    </span>
+  </div> 
+</template>
+
+
+<script lang="ts" setup>
+import { ref, computed } from "vue";
+// 非 Vue 组件需要手动引入
+import {
+	MessagePlugin,
+	PaginationProps,
+	Pagination as TPagination,
+  Tag as TTag,
+} from "tdesign-vue-next";
+import { TimeIcon } from "tdesign-icons-vue-next";
+
+import { data as posts } from "./.vitepress/theme/posts.data.mts";
+import { isMobile } from "./.vitepress/theme/utils/mobile.ts";
+
+const postGroups = computed(() => {
+  const groups = new Map<string, typeof posts>();
+  posts.forEach((post) => {
+    const year = post.date.year;
+    if (!groups.has(year)) {
+      groups.set(year, []);
+    }
+    groups.get(year)?.push(post);
+  });
+  return groups;
+});
+
+console.log('postGroups', postGroups.value);
+</script>
+<style lang="scss" scoped>
+
+.mr-2 {
+	margin-right: 2px;
+}
+
+.post-title {
+	margin-bottom: 6px;
+	border-top: 0px;
+	position: relative;
+	top: 0;
+	left: 0;
+
+	.post-year {
+		position: absolute;
+		top: -6px;
+		left: -10px;
+
+		z-index: -1;
+		opacity: .12;
+		font-size: 86px;
+		font-weight: 900;
+	}
+}
+
+.post-container {
+  display: flex;
+  justify-content: space-between;
+  margin: 12px 0;
+
+  .post-date {
+    opacity: .6;
+  }
+}
+
+.hollow-text {
+
+  /* 设置文本颜色为透明 */
+  color: var(--vp-c-bg);
+
+	-webkit-text-stroke: 1px var(--vp-c-text-1);
+}
+</style>

docs/en/archive.md

@@ -0,0 +1,100 @@
+---
+# https://vitepress.dev/reference/default-theme-home-page
+layout: doc
+editLink: false
+lastUpdated: false
+isNoComment: true
+isNoBackBtn: true
+---
+
+<!-- 之所以将代码写在 md 里面，而非单独封装为 Vue 组件，因为 aside 不会动态刷新，参考 https://github.com/vuejs/vitepress/issues/2686 -->
+<template v-for="[year, postGroup] in postGroups" :key="year">
+  <h2 :id="year" class="post-title">
+    <a
+      class="header-anchor"
+      :href="`#${year}`"
+      :aria-label="`Permalink to &quot;${year}&quot;`"
+      >​</a
+    >
+    <div class="post-year hollow-text">{{ year }}</div>
+  </h2>
+  <div class="post-container" v-for="post in postGroup" :key="post.url">
+    <a :href="post.url">{{ post.title }}</a>
+    <span class="post-date">
+      {{ post.date.monthDay }}
+    </span>
+  </div> 
+</template>
+
+
+<script lang="ts" setup>
+import { ref, computed } from "vue";
+// 非 Vue 组件需要手动引入
+import {
+	MessagePlugin,
+	PaginationProps,
+	Pagination as TPagination,
+  Tag as TTag,
+} from "tdesign-vue-next";
+import { TimeIcon } from "tdesign-icons-vue-next";
+
+import { data as posts } from "../.vitepress/theme/posts-en.data.mts";
+import { isMobile } from "../.vitepress/theme/utils/mobile.ts";
+
+const postGroups = computed(() => {
+  const groups = new Map<string, typeof posts>();
+  posts.forEach((post) => {
+    const year = post.date.year;
+    if (!groups.has(year)) {
+      groups.set(year, []);
+    }
+    groups.get(year)?.push(post);
+  });
+  return groups;
+});
+
+console.log('postGroups', postGroups.value);
+</script>
+<style lang="scss" scoped>
+
+.mr-2 {
+	margin-right: 2px;
+}
+
+.post-title {
+	margin-bottom: 6px;
+	border-top: 0px;
+	position: relative;
+	top: 0;
+	left: 0;
+
+	.post-year {
+		position: absolute;
+		top: -6px;
+		left: -10px;
+
+		z-index: -1;
+		opacity: .12;
+		font-size: 86px;
+		font-weight: 900;
+	}
+}
+
+.post-container {
+  display: flex;
+  justify-content: space-between;
+  margin: 12px 0;
+
+  .post-date {
+    opacity: .6;
+  }
+}
+
+.hollow-text {
+
+  /* 设置文本颜色为透明 */
+  color: var(--vp-c-bg);
+
+	-webkit-text-stroke: 1px var(--vp-c-text-1);
+}
+</style>

docs/en/index.md

@@ -117,7 +117,7 @@ const onCurrentChange: PaginationProps["onCurrentChange"] = (
 		left: -10px;
 
 		z-index: -1;
-		opacity: .08;
+		opacity: .12;
 		font-size: 66px;
 		font-weight: 900;
 	}

docs/index.md

@@ -113,7 +113,7 @@ const onCurrentChange: PaginationProps["onCurrentChange"] = (
 		left: -10px;
 
 		z-index: -1;
-		opacity: .08;
+		opacity: .12;
 		font-size: 66px;
 		font-weight: 900;
 	}