图片管理

功能介绍 现在你的博客已经支持点击图片查看大图功能！当读者点击文章中的任何图片时，会弹出优雅的图片查看器，支持： ✅ 点击放大查看 ✅ 键盘操作（ESC关闭，左右箭头切换） ✅ 响应式设计，移动端友好 ✅ 平滑动画效果 ✅ 背景遮罩，聚焦图片 ✅ 深色模式适配（自动跟随系统主题） 使用方法 自动启用 所有文章中的图片都会自动启用点击放大功能，无需额外设置。 标准Markdown语法 1  图片属性增强 如果你需要排除某些图片（比如小图标），可以添加特殊类名： 1 {.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 属性： ...

图片存放位置 在你的Hugo博客中，所有图片都应该放在 static/images/ 目录下： 1 2 3 4 5 6 7 8 static/ ├── images/ │ ├── posts/ # 文章相关图片 │ ├── logos/ # 品牌logo │ ├── screenshots/ # 软件截图 │ └── icons/ # 图标素材 ├── logo.svg # 网站logo └── favicon.svg # 网站图标 创建图片目录 让我们为这篇文章创建一个专门的图片目录： 1 mkdir -p static/images/posts/2025-07-30-image-guide/ 实际使用示例 1. 封面图片 在文章头部添加封面图： 1 2 3 4 --- title: "文章标题" image: "/images/posts/2025-07-30-image-guide/cover.jpg" --- 2. 内容图片 在正文中插入图片： 1 2 3   3. 图片对齐 使用HTML实现更复杂的布局： ...