零代码基础给博客增加了画廊模块

  前几天看 Astro 官方主题集锦，看到一些艺术类设计类的画廊主题不错，但是又不想拿来直接用。或者也没法拿来直接用，因为那相当于另外弄一个站点，复杂了。

  于是琢磨着要不给目前网站增加一个模块，反正照片基本也是静态的。

  感谢AI，帮我在毫无代码基础的情况下，完成了这个诉求。花了大约3小时，与通义灵码对话了大概20轮，做了个虽然很粗糙但还算比较满意的画廊功能。

  AI真是好帮手，但也有非常傻的地方，得耐心引导才能达到想要的效果。比如：

• 中间有大约5-6轮对话卡在了一个事情上：图片放大。通义给画廊按我要求增加了个灯箱放大功能，但网站本身有个放大图片的规则，两个叠加一起，一点击有两次放大。一开始它一直没意识到问题在哪里，最后经过我引导它发现了冲突，按照要求去掉了灯箱只保留网站本身的图片放大。

• 还有3-4轮卡在图片边框上：要么把图片和标题框在了一起，要么上面有圆角下面是直角，要么又是打开时候是圆角鼠标移过去又变成了直角。

• 另外3-4轮是重复要求它改掉字体错误：每当切到画廊页面，整个网站的字体就变了，还去掉了导航栏里面的元素。就像单独给这个界面重写了个页面。它经过好几轮才最终改好。

  每当它无法一次改好，甚至得好几轮才能做好的时候，非常令人沮丧。但这应该也怪我不会代码，否则肯定很容易自己就发现问题改好了。

  整个过程我唯一碰了代码的地方只是画廊标题太大，让它告诉我哪段代码控制标题字体大小，然后我手动将其从2xl改成了lg。

  一开始的提示词如下：

NOTE

  增加一个画廊页面，里面展示的是照片的合集grid。每个grid以指定的一张合集内照片做封面。

  点开每个grid后，展示这个grid里面的照片。顶部有这个grid的标题，标题左侧是返回按钮。点开grid后的照片采用瀑布墙masonry布局。照片展示区域与文章展示区域宽度一致。根据图片宽度展示2列。瀑布墙采用懒加载，响应式设计。

  瀑布墙内的图片来自远程图库，而非本地图片。在瀑布墙内的图片每一张都有和post中图片一样的圆角框。每一张图片的下方展示基本信息，包括标题（caption），拍摄日期（“摄于yyyy年mm月dd日”）。caption和拍摄日期之间用逗号隔开。

  点击一张照片后，这张照片放大。再点击放大照片以外区域回到照片瀑布墙。

  使用与grid对应的json文件存储、读取照片相关信息，即每个grid一个json文件，json文件名为grid名称。json的信息包含：grid名称（用于在画廊页面显示grid的名称），grid的slug（用于grid的url），指定封面照片的url，画廊内所有照片的名称、url和拍摄时间、照片尺寸（宽度和高度）。

  此外在导航栏增加“画廊”导航项。点击该导航项即打开画廊页面。