在博客与论坛中，留言板总是不可获取的功能，借助 Artalk 与 Twikoo， Flatpaper 自定义了留言板的界面。
为了让 FlatPaper 的 “纸张与手帐” 理念贯彻到底，我们在最新的 feat/guestbook 版本中，彻底重构了留言墙的 UI 与交互，带来了一个充满“手工凌乱感”的沉浸式手帐留言板。
在尝试了信封、模拟纸张等单一或是交替效果后，最终选择了带有随机倾角的多色便签的样式。
“盲盒式”手帐排版
当你打开留言板时，你会发现所有的留言不再是死板的从上到下排列，而是被随意“贴”在了墙上：
- 原生的 CSS 瀑布流：我们使用了纯 CSS 的
column-width特性，让不同长度的留言像拼图一样错落有致地咬合在一起，完全没有引入任何笨重的 JS 布局库。 - 随机样式生成：基于评论内容的 Hash 散列算法，每条留言在渲染时都会被自动赋予一个随机背景色（米色、淡粉、薄荷绿等）和一段 ±3度之内的随机倾斜角。
- 随机手绘涂鸦：大概有 50% 的卡片上，会被随机加上手工画线、爱心、星星等手绘涂鸦背景，模拟真实手帐本上的即兴创作。
- 纸胶带防撕裂：留言的顶部会随机出现半透明的“和纸胶带”。我们专门对 DOM 结构做了
card-wrap嵌套优化，彻底解决了瀑布流截断导致胶带被“撕破”在不同列的渲染 Bug。
最巧妙的是：由于采用了内容 Hash 算法，同一条留言无论你怎么刷新，它的倾斜角、颜色和涂鸦都是绝对固定的。这种物理贴纸转移的视觉连续性，让你感觉这就不是网页，而是一面真实的实体照片墙。
在“混沌”与“秩序”间切换
瀑布流排版最大的痛点就是不方便按时间顺序阅读。因此，我们在右上角加入了一个魔法按钮：
- 默认 - 🔀 随机模式：打乱所有的留言数组，容器启用 瀑布流（Columns） ，卡片交错挤压，视觉最乱、手帐感最强，适合“随便看看”。
- 点击 - 🕒 最新模式：将数组按时间倒序排列，同时通过 JS 动态给容器附加
.guestbook-wall__list--gridClass。这会瞬间关闭瀑布流，将容器强制降维成**网格（Grid）**布局。卡片会立刻变得横平竖直，严格按照1 2 3的横向顺序排列，满足你“找最新留言”的强迫症需求。
图片解析与表情兼容
留言板往往伴随着图片分享。传统做法是直接塞入富文本，这很容易破坏卡片的美感。我们做了一套定制化的提取逻辑（完全兼容 Twikoo 和 Artalk）：
- 分离渲染：代码会自动解析原始留言内容，把纯文本和图片剥离开来。
- 拍立得化：所有被提取出来的真实图片（比如 WebP / PNG / JPG 等格式），会被放置在留言文本下方，并自动附带极细的白边和阴影，看起来就像是一张被订在便签上的拍立得照片。
- 自带透明通道：图片的底层设置为了
transparent。如果你上传了一张透明背景的动漫角色抠图，它会完美透出卡片底部的粉色/绿色纸张，仿佛是一张透明贴纸。 - 智能屏蔽表情包：Twikoo 自带的小黄脸（如 OwO）等表情包如果被当成大图显示会非常灾难。代码会自动识别这些系统表情（比如包含
emotion、sticker的特征），将它们转换为极其轻量的45x45尺寸透明小贴纸横排显示，同时自动移除了它们身上的拍立得相框和 FancyBox 灯箱事件，确保它们看起来就是文末的小点缀。
现在，你可以去 Homulilly - 留言板 页面亲自体验了。
评论