夜航船夫

开一场线上展览

Click back to the top

Home

Archives

Goods

Tools

Gallery

About

Home

Archives

Goods

Tools

Gallery

About

博客

开一场线上展览

2026-05-04

一张图片,可以定格时间,可以让人联想自己的经历,可以传达比文字更丰富的信息,所以一直想要做一个版块,集中展示自己的图片——gallery 画廊功能,自己做自己的策展人。

以前没能力实现,在网上找了几款 Hexo 插件,诸如 hexo-light-gallery、hexo-album-page,不是安装不成功,就是效果跟自己期望的有偏差。所幸现在是 AI 时代,执行比以前要容易,关键看有没有想法。

我用的 AI 工具是 OpenCode,免费模型,在对应的代码工程下,告诉它自己的需求,它会直接读取目录文件,编写代码,实现想要的功能。最终帮我写了 5 个文件,800+ 行代码。

gallery.js       //交互控制
gallery.scss     //样式控制
gallery.pug      //模板控制
gallery.yaml     //内容配置
gallery/index.md //基础配置

这个时候才发现,很难一次性把需求描述清楚,只有通过不断迭代,才能得到自己想要的结果:

  1. 响应式布局,自动适配电脑端和移动端的不同宽度的屏幕
  2. 瀑布式展示,解决不同图片不同尺寸的问题
  3. 懒加载,图片刷到了以后再加载,避免性能问题
  4. 支持多标签,可以按标签做展览
  5. 每个标签有一个独立的 url,方便分享
  6. 指定部分标签展示,其余隐藏,模拟在展场景
  7. 图片上可以展示图片标题及描述
  8. 图片可以放大

最后是初步的成果展示,后续希望定期“办展”,比如湖边咖啡馆系列、周末出行系列、小朋友绘本系列等,欢迎各位网上邻居来看展。

imgae20260504154734379.png

Next: 第一次车上露营

Copyright ©夜航船夫 2015-2026

浙ICP备15005499号