feat(blog): 改进博客组件图片处理和占位符显示

重构博客卡片组件中的图片处理逻辑，统一使用对象结构检查
优化占位符图片的文字显示逻辑，支持中英文字符处理
更新多篇博客文章的元数据，移除冗余图片字段

Author: maplezzzzzz

src/components/blog/BlogListCard.astro

@@ -24,7 +24,7 @@ const { title, description, createdAt, categories, tags, image, imageAlt } =
 const descriptionLength = 100; // 列表页描述稍短
 
 // 检查是否有自定义图片
-const hasCustomImage = image && image !== defaultImage;
+const hasCustomImage = !!(image && typeof image === "object" && "src" in image);
 // console.log("图片：", image);
 const displayImageAlt = imageAlt || `${title} - 默认图片`;
 
@@ -50,14 +50,14 @@ const entryDescription = description?.substring(0, descriptionLength) || "";
     >
       <a href={`/blog/${entry.id}`}>
         {hasCustomImage ? (
-            <Image
-              class="w-full h-full rounded-lg object-cover transition-all duration-500 group-hover:scale-110 group-hover:brightness-110"
-              src={image}
-              alt={displayImageAlt}
-              inferSize={true}
-              loading="lazy"
-              format="webp"
-              quality={40}
+          <Image
+            class="w-full h-full rounded-lg object-cover transition-all duration-500 group-hover:scale-110 group-hover:brightness-110"
+            src={image}
+            alt={displayImageAlt}
+            inferSize={true}
+            loading="lazy"
+            format="webp"
+            quality={40}
               decoding="async"
               fetchpriority="high"
             />

src/components/blog/Card.astro

@@ -19,7 +19,7 @@ const { title, description, createdAt, categories, tags, image, imageAlt } =
 const descriptionLength = 200;
 
 // 检查是否有自定义图片
-const hasCustomImage = image && image !== defaultImage;
+const hasCustomImage = !!(image && typeof image === "object" && "src" in image);
 const displayImageAlt = imageAlt || `${title} - 默认图片`;
 
 const entryDate = createdAt ? formatDate(createdAt) : null;

src/components/blog/PlaceholderImage.astro

@@ -6,8 +6,14 @@ interface Props {
 
 const { title, className = "" } = Astro.props;
 
-// 从标题中提取前两个字符作为显示文字
-const displayText = title.slice(0, 2).toUpperCase();
+const normalizedTitle = (title || "").trim();
+const firstTwo = normalizedTitle.slice(0, 2);
+const isHan = (ch: string) => /[\u3400-\u9FFF]/.test(ch);
+const firstTwoAreHan = firstTwo.length === 2 && isHan(firstTwo[0]) && isHan(firstTwo[1]);
+const englishWord = normalizedTitle.match(/[A-Za-z]+(?:'[A-Za-z]+)?/i)?.[0] || "";
+const displayText = firstTwoAreHan
+  ? firstTwo
+  : (englishWord ? englishWord.toUpperCase() : firstTwo.toUpperCase());
 
 // 预设的渐变背景色组合
 const gradients = [
@@ -56,7 +62,7 @@ const selectedGradient = gradients[getGradientIndex(title)];
     </div>
     <!-- 副标题效果 -->
     <div class="mt-2 text-white/80 text-sm md:text-base font-medium tracking-wide">
-      {title.length > 10 ? title.slice(0, 10) + '...' : title}
+      {title.length > 10 ? title.slice(0, 20) + '...' : title}
     </div>
   </div>
 

src/components/blog/RecommendedReadCard.astro

@@ -25,7 +25,7 @@ const {
 const { title, createdAt, image, imageAlt } = entry.data;
 
 // 检查是否有自定义图片
-const hasCustomImage = image && image !== defaultImage;
+const hasCustomImage = !!(image && typeof image === "object" && "src" in image);
 const displayImageAlt = imageAlt || `${title} - 推荐阅读`;
 
 const entryDate = createdAt ? formatDate(createdAt) : null;

src/components/blog/RelatedCardCompact.astro

@@ -34,7 +34,7 @@ const {
 const descriptionLength = 80; // 更精简的描述长度
 
 // 使用默认图片如果没有设置图片
-const displayImage = image || defaultImage;
+const displayImage = image && typeof image === "object" && "src" in image ? image : defaultImage;
 const displayImageAlt = imageAlt || `${title} - 默认图片`;
 
 const entryDate = createdAt ? formatDate(createdAt) : null;

src/components/common/EntryHeader.astro

@@ -89,7 +89,7 @@ tags?.sort((a: string, b: string) => a.localeCompare(b));
         textClass={`${image && showImage ? "" : "border border-white/10 dark:border-white/5"}`}
       >
         {/* 背景图片层 */}
-        {image && showImage && (
+        {image && typeof image === "object" && "src" in image && showImage && (
           <div class="absolute inset-0">
             <Image
               class="w-full h-full object-cover rounded-[35px]"

src/content/blog/Liquid_Glass组件.md

@@ -1,12 +1,11 @@
 ---
-title: LiquidGlass 组件使用说明
+title: Liquid Glass 组件使用说明
 description: 介绍 LiquidGlass 组件的功能、使用方法与相关代码。
-createdAt: 2024-01-01
+createdAt: 2025-11-17
 published: true
 categories:
   - 使用说明
 author: Maple
-image: "@assets/uploads/demo.jpg"
 tags:
   - 文章
   - 示例

src/content/blog/文章模板.md

@@ -0,0 +1,19 @@
+---
+title: 文章模板
+description: 一句话描述
+createdAt: 2025-11-19
+updatedAt: 2025-11-19
+author: 作者昵称
+image: "@assets/uploads/demo.jpg"
+categories:
+  - 示例分类
+tags:
+  - 示例标签
+draft: false
+hideToc: false
+---
+
+> 下面是文章的正文部分
+# 主标题
+## 小节标题
+正文内容

src/content/blog/组件标签目录说明.md

@@ -6,7 +6,6 @@ published: true
 categories:
   - 使用说明
 author: Maple
-image: "@assets/uploads/demo.jpg"
 tags:
   - 文章
   - 示例