距离上次抱怨自建博客太折腾还不足30天,就又忍不住做了些新的调整,比如瀑布流式的 Gallery 页面、支持了放大显示的图片交互、改用 Cloudflare Web Analytics 统计信息…
Gallery 的考量与感受
如果站在 2050 年甚至更久的未来,到底要通过什么方式去回顾过去走过的10年、20年呢?
相对于笔下文字,照片所能保存的信息可能还要更丰富一些,快门按下的瞬间,除了光线、色彩被记录之外,还有在 EXIF 中的日期时间、GPS 经纬度甚至是海拔信息,这可能是比记忆更可靠的回顾方式。所以最终决定去实现 Gallery 页面,呈现一些日常的瞬间与痕迹,和文字记忆共同佐证所经历的故事。
数据
在具体实现上,照片文件存储在 Cloudflare R2 中,再通过维护多个 JSON 文件实现数据的管理。为了更方便的实现呈现页面的,同时保存更多细节,所以增加“名字”、“描述”、“时间”、“标签”进行补充,另外也保留了比较好的拓展性。
之前的戏言使用了 YAML
进行数据管理,给了我并不好的体验,也是这次选择 JSON
的原因之一。
[
{
"url": "https://example.com/example.jpeg",
"name": "这是图片名称",
"description": "这是图片背后故事的描述",
"tag": ["标签1", "标签2"],
"date": "2020-11-14 08:55:40"
}
]
单独保存时间而不使用 EXIF 信息中的数据主要为了更快速的实现排序,虽然照片中保存了很多信息,但是在最终使用上还是有些不够方便。
页面
页面采用无限滚动的瀑布流呈现,可以点击显示详情,做了黑暗模式的支持以及响应时布局,基本满足常规使用。

动效与其他
为了增强“回顾”的初衷,在时间上增加了从当前时间向拍摄时间倒退的动效,同时增加了计算两个时间差并进行呈现的效果。
单独实现了 Gallery 页面的 RSS 订阅链接 和 Sitemap。
感受
在回顾过去这件事情上,照片可能会更残忍,即使拍摄照片的情形还历历在目,但是拍摄时间还是会告诉你那已经过去了3年,已经是5年前的傍晚了甚至更久的故事。有些时候去体验、去感受才是最珍惜时间的人生,别错过一次晚霞、一场飞雪甚至头顶的明月。
归档页面的分类
原有归档页面采用一屏展示所有年份的文章的形式呈现,会导致很长的页面,所以做了按照“年份-月份”的分类,增强了与“时间”的关联。

其他调整
主要是一些动效交互方面的调整,没有具体功能功能零碎变化。
图片交互
之前文章中的图片不支持“点击”操作,这次做了点击放大的呈现方式,算是体验上的提升。同样做了戏言页面的图片放大支持。

打字机效果
对于部分页面中的描述,实现了“打字机“效果,属于没有深思熟虑就加上的小玩意儿。
首页动效
一直想给首页增加一点“能动”的元素,于是就给文字实现了出现动效,虽然是很轻的调整,但是很符合我的想法。
Cloudflare 服务
这次调整差不多把所有服务都变为使用 Cloudflare 的工具了,做个整理,没有太多可说的。
- Cloudflare Web Analytics: 替代 Google Analytics
- Cloudflare Workers: AI 摘要生成
- Cloudflare D1: AI 摘要缓存保存
- Cloudflare R2: 媒体资源的保存
- Cloudflare Pages: 托管全站,备份 R2 中媒体资源
- Cloudflare CDN: 全球节点部署
彩蛋
制作了一个半成品的彩蛋动效,目前效果还是差强人意,还有很大的空白需要去补充,或者会就这样一直留白下去,还没想好。
最后
其实这次调整很符合最初的想法,这个博客的“分享”意味应该更低一些,更多的还是个人记录,为以后的回顾埋下锚点。另外这次折腾还是很有趣的一段经历,至少能让我依然感受对细节进行把控的欲望,想法很多,虽然不能一一实现,但相对于没有想法来说要好很多。
相对于上次抱怨自建博客的折腾,这次更多的还是更贴近最初的想法推动,也便没有什么怨言了,可能“初心”这东西真的存在,多少能够左右我的情绪。
仓库地址:Gyoza-Lucide