update

app/components/blog/card.vue

@@ -1,28 +1,35 @@
 <script lang="ts" setup>
+import { useState } from "#app";
+
 interface Props {
   path?: string;
   title?: string;
   date?: string;
   description?: string;
-  image?: string;
+  image?: string | null;
   alt?: string;
   tags?: Array<string>;
   categories?: Array<string>;
   published?: boolean;
 }
 
-withDefaults(defineProps<Props>(), {
+const props = withDefaults(defineProps<Props>(), {
   path: "/",
   title: "no-title",
   date: "no-date",
   description: "no-description",
-  image: getRandomFallbackImage(),
+  image: null,
   alt: "no-alt",
-  ogImage: getRandomFallbackImage(),
   tags: () => [],
   categories: () => [],
   published: false,
 });
+
+// Use a per-card state key so the chosen fallback is the same on server and client
+const imageStateKey = `card-image-${props.path}`;
+const imageSrc = useState<string>(imageStateKey, () => {
+  return props.image || getRandomFallbackImage();
+});
 </script>
 
 <template>
@@ -32,8 +39,8 @@ withDefaults(defineProps<Props>(), {
       <div class="overflow-hidden aspect-video">
         <NuxtImg
           class="h-full w-full object-cover object-center transition-transform duration-700 group-hover:scale-110"
-          :src="image"
-          :alt="alt" />
+          :src="imageSrc"
+          :alt="props.alt || 'no-alt'" />
       </div>
       <div class="px-5 py-5 flex flex-col grow">
         <div class="flex items-center justify-between mb-3">

app/components/main/hero.vue

@@ -3,9 +3,21 @@ import siteConfig from "~/config";
 import SocialLinks from "./SocialLinks.vue";
 import Typed from "typed.js";
 
-const descriptions = siteConfig.hero.description;
+// Normalize `siteConfig.hero.description` to a string[] to satisfy TypeScript
+const rawDescription = siteConfig.hero?.description;
+let descriptions: string[] = [];
+if (Array.isArray(rawDescription)) {
+  descriptions = rawDescription.filter((d) => typeof d === "string" && d.length > 0) as string[];
+} else if (typeof rawDescription === "string" && rawDescription.length > 0) {
+  descriptions = [rawDescription];
+} else if (typeof siteConfig.hero?.title === "string" && siteConfig.hero.title.length > 0) {
+  descriptions = [siteConfig.hero.title];
+} else {
+  descriptions = [""];
+}
+
 const typedElement = ref<HTMLElement | null>(null);
-const randomDescription = ref(descriptions[0]);
+const randomDescription = ref(descriptions[0] || "");
 let typed: Typed | null = null;
 
 onMounted(() => {
@@ -18,7 +30,7 @@ onMounted(() => {
       backDelay: siteConfig.hero.typed.backDelay || 2000,
     });
   } else {
-    randomDescription.value = descriptions[Math.floor(Math.random() * descriptions.length)];
+    randomDescription.value = descriptions[Math.floor(Math.random() * descriptions.length)] || "";
   }
 });
 
@@ -42,6 +54,8 @@ onUnmounted(() => {
               :src="siteConfig.profile.avatar"
               alt="avatar"
               class="relative h-full w-full object-cover rounded-full border-4 border-white/80 dark:border-slate-800/80 shadow-2xl transition-transform duration-500 group-hover:scale-105"
+              width="160px"
+              height="160px"
               loading="eager" />
           </div>
         </div>

app/components/main/recent.vue

@@ -32,7 +32,7 @@ const formattedData = computed(() => {
         path: articles.path,
         title: articles.title || "no-title available",
         description: articles.description || "no-description available",
-        image: articles.image || getRandomFallbackImage(),
+        image: articles.image || getRandomFallbackImage(articles.path),
         alt: articles.alt || "no alter data available",
         date: articles.date || "not-date-available",
         tags: articles.tags || [],

app/pages/categories/[category].vue

@@ -27,7 +27,7 @@ const formattedData = computed(() => {
           path: articles.path,
           title: articles.title || "no-title available",
           description: articles.description || "no-description available",
-          image: articles.image || getRandomFallbackImage(),
+          image: articles.image || getRandomFallbackImage(articles.path),
           alt: articles.alt || "no alter data available",
           date: articles.date || "not-date-available",
           tags: articles.tags || [],

app/pages/tags/[tag].vue

@@ -29,7 +29,7 @@ const formattedData = computed(() => {
         path: articles.path,
         title: articles.title || "no-title available",
         description: articles.description || "no-description available",
-        image: articles.image || getRandomFallbackImage(),
+        image: articles.image || getRandomFallbackImage(articles.path),
         alt: articles.alt || "no alter data available",
         date: formatDate(articles.date) || "not-date-available",
         tags: articles.tags || [],

app/utils/helper.ts

@@ -29,7 +29,7 @@ export function formatDate(dateString: string): string {
  * Gets a random 404 image from the /public/404/ directory
  * @returns A random image path from /public/404/
  */
-export function getRandomFallbackImage(): string {
+export function getRandomFallbackImage(seed?: string): string {
   const fallbackImages: string[] = [
     "/404/1.webp",
     "/404/2.webp",
@@ -42,11 +42,17 @@ export function getRandomFallbackImage(): string {
     "/404/9.webp",
   ];
 
-  if (import.meta.server) {
-    // 在服务器端返回第一张图片以保证 SSR 一致性
-    return fallbackImages[0]!;
+  // If a seed is provided, choose a deterministic image based on the seed.
+  if (seed) {
+    let hash = 0;
+    for (let i = 0; i < seed.length; i++) {
+      hash = (hash << 5) - hash + seed.charCodeAt(i);
+      hash |= 0;
+    }
+    const idx = Math.abs(hash) % fallbackImages.length;
+    return fallbackImages[idx]!;
   }
 
-  const randomIndex = Math.floor(Math.random() * fallbackImages.length);
-  return fallbackImages[randomIndex]!;
+  // No seed: return the first image to keep SSR/client consistent.
+  return fallbackImages[0]!;
 }