加载模式
ExTalk 支持三种评论加载模式。
模式说明
1. 分页模式（pagination）
特点：
- 传统分页导航
- 每页固定显示 6 条评论
- 底部显示页码按钮
- 支持跳转到指定页
适用场景：
- 评论数量较少的页面
- 需要快速定位到特定评论
- 桌面端网站
配置方式：
toml
# wrangler.toml
LOAD_MODE = "pagination"URL 参数：
https://your-site.com/post/1?mode=pagination2. 无限滚动模式（infinite）
特点：
- 滚动到底部自动加载
- 无分页控件
- 流畅的浏览体验
- 渐进式加载动画
适用场景：
- 评论数量多的页面
- 移动端应用
- 内容流式浏览
配置方式：
toml
LOAD_MODE = "infinite"实现原理：
- 监听最后一个评论元素的可见性
- 使用 Intersection Observer API
- 当最后一条评论进入视口时触发加载
- 延迟 2 秒显示加载状态（如果还没加载完）
动画效果：
- 新评论从左侧滑入
- 透明度渐变
- 顺序加载动画
3. 加载更多模式（loadmore）
特点：
- 显示"加载更多"按钮
- 点击按钮加载下一页
- 用户控制加载节奏
- 加载状态明确
适用场景：
- 中等评论数量
- 需要控制加载时机
- 兼顾性能和体验
配置方式：
toml
LOAD_MODE = "loadmore"按钮样式：
- 浅蓝色背景
- 悬停时变色和上浮
- 加载时显示"加载中..."
- 没有更多评论时自动隐藏
模式对比
| 特性 | 分页模式 | 无限滚动 | 加载更多 |
|---|---|---|---|
| 用户体验 | ⭐⭐⭐ | ⭐⭐⭐⭐⭐ | ⭐⭐⭐⭐ |
| 性能 | ⭐⭐⭐⭐⭐ | ⭐⭐⭐ | ⭐⭐⭐⭐ |
| 可控性 | ⭐⭐⭐⭐⭐ | ⭐⭐ | ⭐⭐⭐⭐ |
| 移动端适配 | ⭐⭐⭐ | ⭐⭐⭐⭐⭐ | ⭐⭐⭐⭐ |
动态切换
可以通过 URL 参数临时切换加载模式：
https://your-site.com/post/1?mode=infinite这会覆盖 wrangler.toml 中的配置。
动画效果
所有加载模式都支持：
评论加载动画
- 从左侧滑入（
translateX(-50px)） - 透明度从 0 到 1
- 使用 cubic-bezier 缓动函数
评论滑出动画
- 离开视口时从右侧滑出
- 重新进入时从右侧滑入
- 使用 Intersection Observer 监听
分页切换动画
- 评论列表淡出（
opacity: 0） - 加载新评论
- 评论列表淡入
- 滚动到顶部
性能优化
分页模式
- 只加载当前页评论
- 减少初始加载数据量
- 适合评论超多的场景
无限滚动
- 渐进式加载
- 避免一次性加载大量数据
- 注意：已加载的评论会保留在 DOM 中
加载更多
- 用户主动触发加载
- 避免不必要的网络请求
- 可控的性能消耗
推荐配置
博客文章：loadmore 或 pagination论坛帖子：infinite移动端：infinite桌面端：pagination 或 loadmore