一张图片,可以定格时间,可以让人联想自己的经历,可以传达比文字更丰富的信息,所以一直想要做一个版块,集中展示自己的图片——gallery 画廊功能,自己做自己的策展人。
以前没能力实现,在网上找了几款 Hexo 插件,诸如 hexo-light-gallery、hexo-album-page,不是安装不成功,就是效果跟自己期望的有偏差。所幸现在是 AI 时代,执行比以前要容易,关键看有没有想法。
我用的 AI 工具是 OpenCode,免费模型,在对应的代码工程下,告诉它自己的需求,它会直接读取目录文件,编写代码,实现想要的功能。最终帮我写了 5 个文件,800+ 行代码。
gallery.js //交互控制
gallery.scss //样式控制
gallery.pug //模板控制
gallery.yaml //内容配置
gallery/index.md //基础配置
这个时候才发现,很难一次性把需求描述清楚,只有通过不断迭代,才能得到自己想要的结果:
- 响应式布局,自动适配电脑端和移动端的不同宽度的屏幕
- 瀑布式展示,解决不同图片不同尺寸的问题
- 懒加载,图片刷到了以后再加载,避免性能问题
- 支持多标签,可以按标签做展览
- 每个标签有一个独立的 url,方便分享
- 指定部分标签展示,其余隐藏,模拟在展场景
- 图片上可以展示图片标题及描述
- 图片可以放大
最后是初步的成果展示,后续希望定期“办展”,比如湖边咖啡馆系列、周末出行系列、小朋友绘本系列等,欢迎各位网上邻居来看展。
