测试 Pic.astro 组件

这篇文章用来测试我新创建的 Pic.astro 组件，该组件实现了带有标题和描述的图片展示功能。

基本使用

带有标题

带有自定义宽度

带有 CSS 类名

半宽图片

三分之一宽度图片

四分之一宽度图片

多种宽度组合

响应式设计

深色模式适配

图片说明文字

结论

Pic.astro 组件已经成功实现了带有标题和描述的图片展示功能。

组件特性

• 基本功能：显示图片和替代文本
• 标题支持：可以添加图片标题
• 自定义宽度：支持通过 width 属性或 CSS 类名设置图片宽度
• 多种宽度类：内置 w-full、w-half、w-third、w-quarter 等类名
• 响应式设计：在移动设备上自动调整为全宽
• 深色模式适配：适配博客的明暗主题
• 悬停效果：鼠标悬停时显示动画效果
• 无障碍支持：添加了适当的 alt 属性，提高可访问性

组件优势

1. 提升视觉效果：带有标题的图片比普通图片更专业
2. 提供更多信息：可以同时显示图片和详细描述
3. 统一设计风格：组件样式与博客的整体风格保持一致
4. 易于使用：API 简单直观，使用方便
5. 响应式设计：在不同设备上都能正常显示
6. 灵活的布局：支持多种宽度设置，适应不同的布局需求

通过使用 Pic.astro 组件，你可以在博客文章中更好地展示图片，提升文章的视觉效果和用户体验。