测试图片组件页面

Author: CatCodeMe

src/content/blog/test/test_image.mdx

@@ -0,0 +1,89 @@
+---
+title: 测试图片
+description: 'Write your description here.'
+publishDate: 2025-08-19 16:58:21
+slug: zx7r
+tags: ['tag1', 'tag2']
+---
+
+Write your content here.
+
+## 测试 Figure 组件
+
+下面是新创建的 `Figure` 组件的所有布局演示，已更新为最新用法。
+
+import Figure from '@/components/Figure.astro';
+import testImage from 'public/images/social-card.png';
+
+### 默认布局 (支持缩放和Markdown图注)
+<Figure 
+  src={testImage} 
+  alt="布隆过滤器图示"
+  layout="bottom-center"
+  loading="eager"
+  zoomable
+>
+  <figcaption slot="caption">
+    这是一个 **加粗的** 图注，带有一个 [链接](https://astro.build/)。图片可缩放。
+  </figcaption>
+</Figure>
+
+### 文字居左在下方
+<Figure 
+  src={testImage} 
+  alt="布隆过滤器图示"
+  layout="bottom-left"
+>
+  <figcaption slot="caption">
+    Layout: `bottom-left`
+  </figcaption>
+</Figure>
+
+### 文字居右在下方
+<Figure 
+  src={testImage} 
+  alt="布隆过滤器图示"
+  layout="bottom-right"
+>
+  <figcaption slot="caption">
+    Layout: `bottom-right`
+  </figcaption>
+</Figure>
+
+### 图左文右
+<Figure 
+  src={testImage} 
+  alt="布隆过滤器图示"
+  layout="right"
+  width="600"
+  height="100"
+  zoomable
+>
+  <figcaption slot="caption">
+    Layout: `right`. 这是一段描述文字，用于测试图文左右布局。这段文字应该在图片的右边。
+  </figcaption>
+</Figure>
+
+### 图右文左
+<Figure 
+  src={testImage} 
+  alt="布隆过滤器图示"
+  layout="left"
+>
+  <figcaption slot="caption">
+   1. Layout: `left`. 这是一段描述文字，用于测试图文左右布局。这段文字应该在图片的左边。
+   2. 12321
+  </figcaption>
+</Figure>
+
+### 悬浮显示文字 (支持缩放)
+<Figure 
+  src={testImage} 
+  alt="布隆过滤器图示"
+  layout="top-hover"
+>
+  <figcaption slot="caption">
+    - Layout: `top-hover`. 这段文字只在鼠标悬停时显示。**图片也可缩放**。
+  </figcaption>
+</Figure>
+