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"
   >