博客图片点击放大功能设置指南

功能介绍

现在你的博客已经支持点击图片查看大图功能！当读者点击文章中的任何图片时，会弹出优雅的图片查看器，支持：

• ✅ 点击放大查看
• ✅ 键盘操作（ESC关闭，左右箭头切换）
• ✅ 响应式设计，移动端友好
• ✅ 平滑动画效果
• ✅ 背景遮罩，聚焦图片
• ✅ 深色模式适配（自动跟随系统主题）

使用方法

自动启用

所有文章中的图片都会自动启用点击放大功能，无需额外设置。

标准Markdown语法

1

![图片描述](/images/posts/图片名称.jpg)

图片属性增强

如果你需要排除某些图片（比如小图标），可以添加特殊类名：

1

![小图标](/images/icon.png){.no-lightbox}

效果演示

示例图片

点击图片查看放大效果

技术实现

文件结构

1
2
3
4
5

assets/
├── css/
│   └── lightbox.css    # 图片查看器样式
└── js/
    └── lightbox.js     # 图片查看器脚本

配置选项

在 hugo.toml 中可以调整参数：

1
2
3

[params.lightbox]
  enabled = true    # 是否启用
  effect = "fadeIn" # 动画效果

高级用法

图片分组

如果你想实现图片组浏览（左右切换），可以给图片添加相同的 data-lightbox 属性：

1
2
3

![图片1](/images/posts/group/1.jpg){data-lightbox="gallery"}
![图片2](/images/posts/group/2.jpg){data-lightbox="gallery"}
![图片3](/images/posts/group/3.jpg){data-lightbox="gallery"}

自定义样式

可以通过CSS自定义查看器外观，编辑 assets/css/lightbox.css 文件。

常见问题

Q: 为什么有些图片没有放大效果？ A: 检查图片是否在 .post-content 或 .post-body 容器内，或者是否被添加了 .no-lightbox 类。

Q: 如何关闭此功能？ A: 将 hugo.toml 中的 params.lightbox.enabled 设为 false。

Q: 支持哪些图片格式？ A: 支持所有标准图片格式：JPG、PNG、GIF、WebP、SVG等。

Q: 图片查看器支持深色模式吗？ A: 支持！图片查看器会自动检测博客的深色/浅色模式，并相应调整背景色、按钮样式等，提供一致的视觉体验。

下一步

1. 发布文章测试图片放大功能
2. 根据需要调整样式
3. 收集读者反馈优化体验