留言页的群聊风格改造

整体思路#

改造的核心是用一个自定义的 Svelte 组件替换掉原来的 Twikoo 评论挂件。组件直接与 Twikoo 的 API 通信，获取留言数据，然后以聊天气泡的形式渲染出来。

这样做的几个好处：

• 视觉上更统一，可以完全控制样式
• 交互更灵活，可以加一些原版挂件没有的功能
• 不需要额外引入第三方 UI，自己写更容易控制体积

API 通信#

组件通过 fetch 直接调用 Twikoo 的 API 接口，主要就两个操作：

• COMMENT_GET：获取指定路径（这里是 /guestbook/）下的所有留言
• COMMENT_SUBMIT：提交新的留言

Twikoo 返回的数据是嵌套结构的——每条留言下可能有若干条回复。但聊天界面不适合树形展示，所以组件把整个回复树拍平成一个按时间排序的列表，回复内容前面加上 @昵称 的前缀，这样上下文就很清晰了。

聊天气泡#

整个界面是最像聊天软件的部分。每条消息是一行，包含头像、昵称、时间和气泡内容。

头像 36 像素的圆形，优先显示 Gravatar 头像，没有的话显示昵称首字。自己的消息靠右对齐，其他人的靠左。

气泡的样式靠 border-radius 的不对称处理来实现——别人的气泡是左下角直角、其他角圆角；自己的气泡反过来，右下角直角。这种不对称感就是聊天气泡的视觉特征。

自己的气泡使用主题色作为背景，白色文字，在视觉上突出区分。管理员的消息也使用相同的样式。

区分自己与他人#

组件通过 localStorage 存储用户的留言档案（昵称、邮箱、网址），提交时会记录这条留言的 ID。再次加载时，如果某条留言的邮箱或 ID 匹配，就把它标记为”自己的消息”，显示在右侧。

自动刷新#

留言板每隔 30 秒会自动请求一次新数据，新留言会即时出现，不需要手动刷新页面。但如果用户已经向上滚动浏览历史消息，自动滚动会暂停，只有停留在底部时才会自动滚到最新消息。

个人资料弹窗#

首次留言时会弹出一个资料填写框，输入昵称和邮箱后才会显示发送栏。这些信息存在 localStorage 里，下次访问就不用再填了。

回复功能#

每条消息悬浮时会出现”回复”按钮，点击后会在输入框上方显示”回复 @某某”的提示条，发送时会将这条回复关联到原消息上。点击提示条上的叉号可以取消回复。

一些样式细节#

所有样式都写在 Svelte 组件的 <style> 标签里，使用 gb__ 前缀来避免污染全局样式。

发送按钮是圆形的，不可用时有降低透明度。消息列表限制了最大高度（520px），超出可以滚动。每条新消息出现时有一个轻微的淡入动画，让感觉更自然。

深色模式的支持没有额外处理，因为组件直接使用了 CSS 变量 var(--primary)、var(--card-bg) 这些主题变量，切换主题时颜色会自动适配。

最后#

这个改造其实不复杂，核心就是”把树形评论拍平成聊天记录”。但效果还是挺明显的——留言板不再是冷冰冰的评论区，更像一个可以聊天的空间。如果你也用的 Twikoo，不妨试试类似的改造，让访客感觉更轻松一些。