本模板内置图片灯箱功能。博客文章中的每张图片都会自动增强点击放大功能。

工作原理

只需使用标准 Markdown 语法添加图片：

Markdown
UTF-8 · 1 Lines
![替代文本](图片地址.jpg)

当读者点击图片时，会在全屏灯箱视图中打开。

单张图片

这是一张带有替代描述的单张图片：

日落时分的宁静山景
日落时分的宁静山景

点击上方图片查看灯箱效果。替代文本会显示在图片下方。

图片画廊

当你有多张图片时，灯箱会包含导航箭头：

秋天的森林小径
秋天的森林小径

黎明的海浪
黎明的海浪

星空下的沙漠沙丘
星空下的沙漠沙丘

点击任意图片，使用箭头按钮在图片之间导航。

灯箱功能

  • 点击打开 — 点击任意图片全屏查看
  • 点击空白关闭 — 点击背景区域退出
  • 导航箭头 — 浏览多张图片
  • 替代文本显示 — 图片描述显示在下方
  • 键盘支持 — 使用方向键导航
  • 响应式 — 适配所有屏幕尺寸

图片最佳实践

使用描述性替代文本

好的替代文本描述图片内容：

Markdown
UTF-8 · 1 Lines
![一只金毛猎犬幼犬在阳光明媚的草地上玩耍](puppy.jpg)

优化图片尺寸

为获得最佳性能：

  • 尽可能使用 WebP 格式
  • 博客文章图片宽度保持在 1000px 以下
  • 压缩图片以减小文件大小

图片位置

图片自然融入你的内容：

下方的图片展示了夜晚美丽的城市景观。注意它如何与周围文字无缝融合。

夜晚灯火通明的城市天际线
夜晚灯火通明的城市天际线

灯箱功能自动生效 — 无需特殊语法或配置。

技术细节

灯箱使用自定义 rehype 插件实现：

  • rehype-image-lightbox — 处理所有 <img> 元素
  • 自动包装 — 图片被包装在可点击容器中
  • 零依赖 — 轻量级原生 JavaScript
  • CSS 过渡 — 平滑的打开/关闭动画

自定义

要自定义灯箱外观，编辑 src/styles/PostStyles.astro 中的样式：

CSS
UTF-8 · 7 Lines
.lightbox-modal {
  /* 背景颜色 */
  background: rgba(255, 255, 255, 0.95);
}

.lightbox-nav-btn {
  /* 导航按钮样式 */
}

灯箱功能让你的博客文章更具吸引力和读者友好性。尝试点击上方图片查看效果！