优化：优化文章序号及部分图标样式

docs/.vitepress/config/sidebar.ts

@@ -1,6 +1,7 @@
 import type { DefaultTheme } from 'vitepress';
 import { sync } from 'fast-glob';
 import * as matter from 'gray-matter';
+import { getChineseZodiac, getChineseZodiacAlias } from '../theme/utils.ts';
 
 export const sidebar: DefaultTheme.Config['sidebar'] = {
   '/categories/issues/': getItemsByDate("categories/issues"),
@@ -75,7 +76,8 @@ function getItemsByDate (path: string) {
 
     // 添加年份分组
     yearGroups.unshift({
-      text: `${year}年 (${articleItems.length}篇)`,
+      text: `<img class="chinese-zodiac" style="position: static; vertical-align: middle; padding-bottom: 3px;" src="/img/svg/chinese-zodiac/${getChineseZodiac(year.replace('年', ''))}.svg" title="${getChineseZodiacAlias(year.replace('年', ''))}" alt="生肖">
+            ${year}年 (${articleItems.length}篇)`,
       items: articleItems,
       collapsed: true,
     });
@@ -84,7 +86,8 @@ function getItemsByDate (path: string) {
   if (topArticleItems.length > 0) {
     // 添加置顶分组
     yearGroups.unshift({
-      text: `📑 我的置顶 (${topArticleItems.length}篇)`,
+      text: `<svg style="display: inline-block; vertical-align: middle; padding-bottom: 3px;" viewBox="0 0 1920 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="30" height="30"><path d="M367.488 667.904h423.744v47.232H367.488v-47.232zM320.256 204.352h137.28v68.992h-137.28v-68.992zM367.488 754.112h423.744v48H367.488v-48zM693.76 204.352h137.984v68.992H693.76v-68.992zM507.008 204.352h137.28v68.992h-137.28v-68.992z" p-id="10749" fill="#d81e06"></path><path d="M1792.512 0H127.488C57.472 0 0 57.152 0 127.616v768.768C0 966.72 57.088 1024 127.488 1024h1665.088c69.952 0 127.424-57.152 127.424-127.616V127.616C1920 57.216 1862.912 0 1792.512 0z m-528 175.104h446.976v54.016H1494.72l-24 101.248h206.976V689.6h-57.728V384.32h-289.472v308.224h-57.728v-362.24h140.224l20.992-101.248h-169.472v-53.952z m-996.032-11.2h614.272v167.232h-51.008v-17.28H320.256v17.28H268.48V163.904z m678.784 681.728h-744v-43.52h111.744V454.848h229.504v-48.704H221.248v-42.048h323.264v-39.744h54.016v39.744h331.52v41.984h-331.52v48.768h245.248v347.264h103.488v43.52z m203.264-94.528c0 59.52-30.72 89.28-92.224 89.28-25.472 0-46.016-0.512-61.504-1.472-2.496-22.976-6.528-45.248-12.032-66.752 22.976 5.504 46.72 8.256 71.232 8.256 24 0 35.968-11.52 35.968-34.496V247.872H971.2v-54.72h278.976v54.72H1150.4v503.232z m521.216 121.536c-67.008-55.488-137.28-108.032-210.752-157.504-4.992 9.984-10.496 19.008-16.512 27.008-41.472 57.024-113.28 101.504-215.232 133.504-9.472-16.512-21.504-34.496-35.968-54.016 94.528-27.008 161.28-64.512 200.256-112.512 34.496-44.992 51.776-113.024 51.776-204.032V421.12h57.728v82.496c0 62.528-6.72 115.776-20.224 159.744 84.48 54.016 161.472 107.008 230.976 158.976l-42.048 50.304z" p-id="10750" fill="#d81e06"></path><path d="M367.488 495.36h423.744v47.232H367.488V495.36zM367.488 581.632h423.744v47.232H367.488v-47.232z" p-id="10751" fill="#d81e06"></path></svg>
+            我的置顶 (${topArticleItems.length}篇)`,
       items: topArticleItems,
       collapsed: false,
     });
@@ -166,7 +169,16 @@ function addOrderNumber(groups) {
   for (let i = 0; i < groups.length; i++) {
     for (let j = 0; j < groups[i].items.length; j++) {
       const items = groups[i].items;
-      items[j].text = `[${j + 1}] ${items[j].text}`;
+      const index = j + 1;
+      let indexStyle = `<div class="text-color-gray mr-[6px]" style="font-weight: 550; display: inline-block;">${index}</div>`;
+      if (index == 1) {
+        indexStyle = `<div class="text-color-red mr-[6px]" style="font-weight: 550; display: inline-block;">${index}</div>`;
+      } else if (index == 2) {
+        indexStyle = `<div class="text-color-orange mr-[6px]" style="font-weight: 550; display: inline-block;">${index}</div>`;
+      } else if (index == 3) {
+        indexStyle = `<div class="text-color-yellow mr-[6px]" style="font-weight: 550; display: inline-block;">${index}</div>`;
+      }
+      items[j].text = `${indexStyle}${items[j].text}`;
     }
   }
 }

docs/.vitepress/theme/styles/custom.css

@@ -69,4 +69,45 @@ mjx-container {
 
 mjx-container > svg {
   margin: auto;
+}
+
+.chinese-zodiac {
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+  position: absolute;
+  left: -10.5px;
+  top: -1px;
+  background: #fff;
+  border: 1px solid #84b9e5;
+  border-radius: 50%;
+  cursor: pointer;
+}
+
+.text-color-red {
+  --color-red: 254 45 70;
+  --tw-text-opacity: 1;
+  color: rgb(var(--color-red)/var(--tw-text-opacity));
+}
+
+.text-color-orange {
+  --color-orange: 255 102 0;
+  --tw-text-opacity: 1;
+  color: rgb(var(--color-orange)/var(--tw-text-opacity));
+}
+
+.text-color-yellow {
+  --color-yellow: 250 169 14;
+  --tw-text-opacity: 1;
+  color: rgb(var(--color-yellow)/var(--tw-text-opacity));
+}
+
+.text-color-gray {
+  --color-gray: 145 149 163;
+  --tw-text-opacity: 1;
+  color: rgb(var(--color-gray)/var(--tw-text-opacity));
+}
+
+.mr-\[6px\] {
+  margin-right: 6px;
 }

docs/.vitepress/theme/utils.ts

@@ -36,4 +36,24 @@ export function goToLink(url, paramName, paramValue) {
   } else {
     window.location.href = url;
   }
+}
+
+/**
+ * 获取生肖图标
+ *
+ * @param year 年份
+ */
+export function getChineseZodiac(year) {
+  const arr = ['monkey', 'rooster', 'dog', 'pig', 'rat', 'ox', 'tiger', 'rabbit', 'dragon', 'snake', 'horse', 'goat'];
+  return arr[year % 12];
+}
+
+/**
+ * 获取生肖名称
+ *
+ * @param year 年份
+ */
+export function getChineseZodiacAlias(year) {
+  const arr = ['猴年', '鸡年', '狗年', '猪年', '鼠年', '牛年', '虎年', '兔年', '龙年', '蛇年', '马年', '羊年'];
+  return arr[year % 12];
 }