Commit 37bf6b7

HPCesia <me@hpcesia.com>
2025-02-10 07:54:26
feat: relative time
convert time tag to relative time (only for recent week)
1 parent 6d21197
Changed files (4)
src/layouts/GlobalLayout.astro
@@ -72,6 +72,8 @@ const favicons: Favicon[] =
 </html>
 
 <script>
+  import { convertTimeToRelative } from '@scripts/utils';
+
   // 深色模式切换
   function applyDarkMode() {
     if (
@@ -84,4 +86,7 @@ const favicons: Favicon[] =
   }
   document.addEventListener('astro:after-swap', applyDarkMode);
   applyDarkMode();
+
+  // 时间显示
+  document.addEventListener('astro:page-load', convertTimeToRelative);
 </script>
src/pages/archives/[...time].astro
@@ -156,7 +156,11 @@ const postCount = await getPostsCount();
                       ))}
                     </div>
                   </div>
-                  <time datetime={data.published.toISOString()} class="text-base-content/60">
+                  <time
+                    datetime={data.published.toISOString()}
+                    data-no-relative
+                    class="text-base-content/60"
+                  >
                     {data.published.toLocaleDateString(siteConfig.lang)}
                   </time>
                 </li>
src/scripts/utils.ts
@@ -1,4 +1,11 @@
 import { navigate } from 'astro:transitions/client';
+import dayjs from 'dayjs';
+import 'dayjs/locale/en';
+import 'dayjs/locale/zh-cn';
+import 'dayjs/locale/zh-tw';
+import relativeTime from 'dayjs/plugin/relativeTime';
+
+dayjs.extend(relativeTime);
 
 export function getReadingProgress(): number {
   const docEl = document.documentElement;
@@ -36,3 +43,35 @@ export async function getRandomPost() {
     console.error('Failed to get random post:', error);
   }
 }
+
+export function convertTimeToRelative(): void {
+  // 获取页面语言
+  const lang = document.documentElement.lang || 'en';
+  // 设置 dayjs 语言
+  const localeMap: { [key: string]: string } = {
+    'zh-CN': 'zh-cn',
+    'zh-TW': 'zh-tw',
+    en: 'en',
+  };
+  dayjs.locale(localeMap[lang] || 'en');
+
+  // 获取所有 time 标签
+  const timeElements = document.getElementsByTagName('time');
+  const now = dayjs();
+  const sevenDaysAgo = now.subtract(7, 'day');
+
+  Array.from(timeElements).forEach((timeElement) => {
+    // 检查是否禁用相对时间转换
+    if (timeElement.dataset.noRelative) return;
+
+    const datetime = timeElement.getAttribute('datetime');
+    if (!datetime) return;
+
+    const date = dayjs(datetime);
+    // 检查是否在7天内
+    if (date.isAfter(sevenDaysAgo)) {
+      // 转换为相对时间
+      timeElement.textContent = date.fromNow();
+    }
+  });
+}
package.json
@@ -25,6 +25,7 @@
     "astro-pagefind": "^1.8.0",
     "autoprefixer": "^10.4.20",
     "daisyui": "5.0.0-beta.7",
+    "dayjs": "^1.11.13",
     "mdast-util-to-string": "^4.0.0",
     "postcss-load-config": "^6.0.1",
     "reading-time": "^1.5.0",