相册开发
本相册脚本是如何工作的？
脚本会在该博客项目构建的时候运行·它将遍历项目中目标文件夹下所有的图片，并根据图片的数量生成相应长度的 “image”结构体数组。 接着参照与目标文件夹同级的"altImg"文件夹中有无同名图片来判断某张图片是否采用了替代图片进行显示。图片的地址有无替代图片以及替代图片的路径都会被保存在数组中。 最后再根据以上路径生成一个 Markdown 和 HTML 混搭 Markdown 文件。里面图片的显示是脚本直接生成 HTML 标签来实现的， 因为 Markdown 语法里面没有为元素配置 class 的功能， 不能对其套用相册 CSS 样式。
我为什么要设计这款相册脚本？
我希望将自己的画作陈列在我的博客上，但如果得每添加一张图片都要手动为其添加 HTML 标签，整个博客框架用起来就非常的笨重。在实现了遍历并展示图片的功能后，由于对于不同比例的图片元素都会按照原比例缩放，就显得整个页面布局很混乱。如果让脚本来剪裁的话，在没有我本人意识的介入下又裁剪不到图片 中最重要的那一部分。于是我的方案就变成了为每一个长宽比离 0.7 差的比较远的图片手动剪裁出最具代表性的那一部分作为替代图片显示在相册里，于是我的相册脚本就变成了现在这个样子。
宽比长要长的图片按相册的比例压缩后的示意图
开发中遇到的难点。
一开始最棘手的还是我对 Vitepress 的环境非常陌生。最早我采取的是让脚本把 “image” 结构体数组以 JSON 格式输出到一个文件中去，然后再在相册的 index.md 中读取 JSON 使用<v-for>标签便利产生图片元素。但这么做的严重问题是， Vitepress 在打包过程中不会复制没有直接被 Markdown 或主题组件直接通过 Markdown 或 HTML语法引用的静态资源复制进生产环境，于是在生产环境中根本就没有我们希望显示的图片源文件。 为解决这个问题，我把脚本改成了把有 src 属性的 img 元素直接写在相册的 index.md 当中，于是整个脚本就变成了现在的模样。
对相册功能的展望
这个相册里面的画都是我画的，我将来会写博文分享我的创作心得。将来准备把博文链接和相册中的图片关联起来，实现点击图片能跳转到相关博文的功能。
参考文献
https://aaronsmith.online/articles/use-javascript-to-get-original-dimensions-of-an-image-file/
判别图片比例功能实现：https://www.npmjs.com/package/image-size
贡献者
朵琳