hwc-navigation-content

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Navigation & Content Display

导航与内容展示

Implement navigation and content-discovery behavior with Turbo Drive and Turbo Frames.

使用Turbo Drive与Turbo Frames实现导航与内容发现行为。

Core Workflow

核心工作流程

Classify navigation mode: tabs, pagination, lazy frame loading, faceted search, or custom render/cache lifecycle.
Decide URL and history ownership first (
```
data-turbo-action
```
, frame
```
src
```
, query params, back/forward behavior).
Use frame lifecycle and visit events to update active state, request params, and scroll restoration.
Clean transient UI state before Turbo cache snapshots.
Validate behavior across forward/back navigation and refresh paths.

分类导航模式：标签页、分页、Frame懒加载、分面搜索或自定义渲染/缓存生命周期。
首先确定URL与历史记录的控制权（
```
data-turbo-action
```
、Frame的
```
src
```
、查询参数、前进/后退行为）。
利用Frame生命周期与访问事件更新激活状态、请求参数以及滚动恢复。
在Turbo缓存快照生成前清理临时UI状态。
在前进/后退导航与刷新场景下验证行为正确性。

Guardrails

注意事项

Update active/tab state on load/render events, not click intent events.
Keep URL state canonical for filters and pagination.
Avoid leaving transient UI artifacts in cache snapshots.
Use lazy loading deliberately; verify loading boundaries and observer behavior.

在加载/渲染事件中更新激活/标签页状态，而非点击意图事件。
保持筛选与分页的URL状态标准化。
避免在缓存快照中遗留临时UI痕迹。
谨慎使用懒加载；验证加载边界与观察者行为。

Load References Selectively

选择性加载参考文档

Open only the file needed for the current request.

Tabbed frame navigation:

references/2023-06-20-turbo-frames-tabbed-navigation.md

Pagination + history management:

references/2023-07-04-turbo-frames-pagination.md

Lazy frame lifecycle:

references/2023-09-26-turbo-frames-lazy-loading-lifecycle.md

Scroll restoration:

references/2023-09-12-turbo-frames-scroll-position-restoration.md

Cache lifecycle cleanup:

references/2023-05-23-turbo-drive-cache-lifecycle.md

Custom render interception:

references/2023-05-09-turbo-drive-custom-rendering.md

Conditional instant click strategy:

references/2024-02-13-turbo-drive-conditional-instant-click.md

Faceted search with Stimulus:

references/2024-12-10-stimulus-turbo-frames-faceted-search.md

Markdown preview flow:

references/2024-10-08-turbo-frames-markdown-preview.md

Use

references/INDEX.md

for the full catalog.

仅打开当前请求所需的文件。

标签式Frame导航：

references/2023-06-20-turbo-frames-tabbed-navigation.md

分页+历史记录管理：

references/2023-07-04-turbo-frames-pagination.md

Frame懒加载生命周期：

references/2023-09-26-turbo-frames-lazy-loading-lifecycle.md

滚动恢复：

references/2023-09-12-turbo-frames-scroll-position-restoration.md

缓存生命周期清理：

references/2023-05-23-turbo-drive-cache-lifecycle.md

自定义渲染拦截：

references/2023-05-09-turbo-drive-custom-rendering.md

条件式即时点击策略：

references/2024-02-13-turbo-drive-conditional-instant-click.md

结合Stimulus的分面搜索：

references/2024-12-10-stimulus-turbo-frames-faceted-search.md

Markdown预览流程：

references/2024-10-08-turbo-frames-markdown-preview.md

完整目录请查看

references/INDEX.md

。

Escalate to Neighbor Skills

关联技能推荐

Form submission and validation behavior: use
```
hwc-forms-validation
```
Push-based real-time updates: use
```
hwc-realtime-streaming
```
Media-specific interaction design: use
```
hwc-media-content
```
Generic feedback/transitions and perceived-performance polish: use
```
hwc-ux-feedback
```
Non-navigation Stimulus API fundamentals: use
```
hwc-stimulus-fundamentals
```

表单提交与验证行为：使用
```
hwc-forms-validation
```
基于推送的实时更新：使用
```
hwc-realtime-streaming
```
媒体专属交互设计：使用
```
hwc-media-content
```
通用反馈/过渡与感知性能优化：使用
```
hwc-ux-feedback
```
非导航相关Stimulus API基础：使用
```
hwc-stimulus-fundamentals
```