⚠️
重要前提
安装AI Skills的关键前提是：必须科学上网，且开启TUN模式，这一点至关重要，直接决定安装能否顺利完成，在此郑重提醒三遍：科学上网，科学上网，科学上网。查看完整安装教程 →
Turbo导航与内容展示优化指南：实现高效页面导航、分页和动态内容加载
hwc-navigation-content by thehotwireclub/hotwire_club-skills
安装命令
npx skills add https://github.com/thehotwireclub/hotwire_club-skills --skill hwc-navigation-content🇨🇳中文介绍
导航与内容展示
使用 Turbo Drive 和 Turbo Frames 实现导航和内容发现行为。
核心工作流
- 分类导航模式：标签页、分页、延迟帧加载、分面搜索或自定义渲染/缓存生命周期。
- 首先确定 URL 和历史记录所有权（
data-turbo-action、帧src、查询参数、前进/后退行为）。 - 使用帧生命周期和访问事件来更新活动状态、请求参数和滚动恢复。
- 在 Turbo 缓存快照之前清理临时 UI 状态。
- 验证跨前进/后退导航和刷新路径的行为。
防护措施
- 在加载/渲染事件上更新活动/标签状态，而不是点击意图事件。
- 保持 URL 状态对于过滤器和分页是规范的。
- 避免在缓存快照中留下临时 UI 痕迹。
- 谨慎使用延迟加载；验证加载边界和观察者行为。
选择性加载参考
仅打开当前请求所需的文件。
- 标签页式帧导航：
references/2023-06-20-turbo-frames-tabbed-navigation.md - 分页 + 历史管理：
references/2023-07-04-turbo-frames-pagination.md - 延迟帧生命周期：
references/2023-09-26-turbo-frames-lazy-loading-lifecycle.md
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者，精准高效
