夜航船夫

开一场线上展览

imgae20260504154734379.png

一张图片,可以定格时间,可以让人联想自己的经历,可以传达比文字更丰富的信息,所以一直想要做一个版块,集中展示自己的图片——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. 图片可以放大

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

相关文章

国庆出行感受

国庆假期,带家人自驾去了一趟山东烟台、青岛,四大一小,主要是看海景,听演唱会。分享一下感受: 1 、高速:担心路上会堵车,9.30 请假一天,早上 8 点出发,江浙沪一路自驾到山东烟台,1060 公里。除了长江大桥堵了一段,其他路段畅通。过…

读书笔记管理体系

平时主要使用微信读书,看书过程中会进行划线和评论。完成后,习惯性导出笔记整理,不定期重看。否则,过不了多久,看书过程中产生的灵感、看到的金句在脑海里都会丢失,有时候甚至为了找一本书里写过的一句话,费老鼻子劲,有点像找房间里的东西,你知道它在…

Apple Watch Setup

现在有一只 Apple Watch SE 3 (GPS),星光色,配的米兰尼斯表带,44 寸手腕大小刚好,主要用于健康追踪。目前戴了 9 个月,分享一下 Apple Watch 的 Setup 。 #表盘表盘我选用的是模块化表盘,表盘上有更…

评论

评论加载中…