From 34c130c324dc9efa7765c5dc97d9760221e00ac3 Mon Sep 17 00:00:00 2001
From: vincent97198 <31513765+vincent97198@users.noreply.github.com>
Date: Fri, 27 Mar 2026 03:04:12 +0000
Subject: [PATCH] =?UTF-8?q?fix=20bug=20=E8=B7=9D=E4=BB=8A=E4=BF=AE?=
 =?UTF-8?q?=E6=94=B9=E6=99=82=E9=96=93=20=E5=B0=87=E8=80=83=E6=85=AE?=
 =?UTF-8?q?=E8=B7=9D=E9=9B=A2=E7=95=B6=E4=B8=8B=E6=99=82=E9=96=93=EF=BC=8C?=
 =?UTF-8?q?=E8=80=8C=E9=9D=9E=E8=B7=9D=E9=9B=A2=E7=B7=A8=E8=AD=AF=E6=99=82?=
 =?UTF-8?q?=E9=96=93?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/posts/[...slug].astro | 81 ++++++++++++++++++++-------------
 1 file changed, 50 insertions(+), 31 deletions(-)

diff --git a/src/pages/posts/[...slug].astro b/src/pages/posts/[...slug].astro
index efb1e6672..e1bc221b0 100644
--- a/src/pages/posts/[...slug].astro
+++ b/src/pages/posts/[...slug].astro
@@ -440,17 +440,18 @@ const relatedPosts = await getRelatedPosts(entry, 5);
   <!-- 上次编辑时间 -->
   {
     siteConfig.showLastModified && (() => {
-      const lastModified = dayjs(
-        entry.data.updated || entry.data.published
-      );
-      const now = dayjs();
-      const daysDiff = now.diff(lastModified, "day");
-      // 使用用户定义的阈值，如果没有定义则默认为1天
+      const lastModified = dayjs(entry.data.updated || entry.data.published);
+      const dateStr = lastModified.format("YYYY-MM-DD");
       const outdatedThreshold = siteConfig.outdatedThreshold ?? 1;
-      const shouldShowOutdatedCard = daysDiff >= outdatedThreshold;
 
-      return shouldShowOutdatedCard ? (
-        <div class="card-base p-6 mb-4">
+      // 1. 預設加上 hidden 隱藏，並把時間與閾值綁在 data-* 屬性
+      return (
+        <div 
+          id="outdated-card" 
+          class="card-base p-6 mb-4 hidden" 
+          data-date={lastModified.toISOString()} 
+          data-threshold={outdatedThreshold}
+        >
           <div class="flex items-center gap-2">
             <div class="transition h-9 w-9 rounded-lg overflow-hidden relative flex items-center justify-center mr-0">
               <Icon
@@ -459,33 +460,51 @@ const relatedPosts = await getRelatedPosts(entry, 5);
               />
             </div>
 
-            {(() => {
-              const dateStr = lastModified.format("YYYY-MM-DD");
-              const isOutdated = daysDiff >= 1;
-
-              return (
-                <div class="flex flex-col gap-0.1">
-                  <div class="text-[1.0rem] leading-tight text-black/75 dark:text-white/75">
-                    {`${i18n(I18nKey.lastModifiedPrefix)}${dateStr}${
-                      isOutdated
-                        ? `，${i18n(I18nKey.lastModifiedDaysAgo).replace("{days}", daysDiff.toString())}`
-                        : ""
-                    }`}
-                  </div>
-                  {isOutdated && (
-                    <p class="text-[0.8rem] leading-tight text-black/75 dark:text-white/75">
-                      {i18n(I18nKey.lastModifiedOutdated)}
-                    </p>
-                  )}
-                </div>
-              );
-            })()}
+            <div class="flex flex-col gap-0.1">
+              <div class="text-[1.0rem] leading-tight text-black/75 dark:text-white/75">
+                {i18n(I18nKey.lastModifiedPrefix)}{dateStr}
+                <span id="days-ago-text" data-template={i18n(I18nKey.lastModifiedDaysAgo)}></span>
+              </div>
+              <p id="outdated-warning" class="text-[0.8rem] leading-tight text-black/75 dark:text-white/75 hidden">
+                {i18n(I18nKey.lastModifiedOutdated)}
+              </p>
+            </div>
           </div>
         </div>
-      ) : null;
+      );
     })()
   }
 
+  <script>
+    import dayjs from "dayjs";
+
+    const card = document.getElementById('outdated-card');
+    
+    if (card) {
+      // 讀取伺服器給的日期，並用 dayjs 直接算出差異天數
+      const lastModified = dayjs(card.dataset.date);
+      const daysDiff = dayjs().diff(lastModified, "day");
+      const threshold = Number(card.dataset.threshold);
+
+      // 如果超過閾值，就顯示卡片與提示文字
+      if (daysDiff >= threshold) {
+        card.classList.remove('hidden');
+
+        if (daysDiff >= 1) {
+          const textEl = document.getElementById('days-ago-text');
+          if (textEl && textEl.dataset.template) {
+            textEl.textContent = `，${textEl.dataset.template.replace("{days}", daysDiff.toString())}`;
+          }
+          
+          const warningEl = document.getElementById('outdated-warning');
+          if (warningEl) {
+            warningEl.classList.remove('hidden');
+          }
+        }
+      }
+    }
+  </script>
+
   <div
     class="flex flex-col md:flex-row justify-between mb-4 gap-4 overflow-hidden w-full"
   >