templ-htmx

用途

templ-htmx 用于构建交互式超媒体驱动应用，将 templ 模板引擎与 HTMX 结合，实现服务端驱动的交互，而无需依赖 JavaScript 框架。当需要创建动态 UI、实时更新、AJAX 交互，或提到“HTMX”时，可使用该技能。

该技能建议采用渐进式披露：先让一个交互跑通，再扩展到高级行为。

主要能力

第一级：首个可运行流程

用于不依赖 JS 框架的服务端驱动交互。

在服务端设置中挂载 HTMX 资源。
在布局中引入 HTMX 脚本。
为组件添加 hx-* 属性。
从处理器返回局部组件。
通过 HTMX 请求检测区分整页响应与片段响应。

示例代码：

import "within.website/x/web/htmx"

func main() {
mux := http.NewServeMux()
htmx.Mount(mux)
}

import "within.website/x/web/htmx"

templ Layout() {
    <html>
        <head>@htmx.Use()</head>
        <body>{ children... }</body>
    </html>
}

第二级：核心 HTMX 控件

hx-get / hx-post：触发请求。
hx-target：选择响应落点。
hx-swap：选择替换策略（innerHTML、outerHTML、beforeend）。
hx-trigger：控制事件时机（click、change、every 5s 等）。
hx-indicator：显示加载状态。

第三级：高级服务端模式

使用 htmx.Is(r) 检测 HTMX 请求并返回片段。
使用带外更新（out-of-band updates）刷新多个区域。
使用响应头（HX-Trigger、HX-Redirect）控制客户端行为。
保持渐进增强：端点在没有 JS 时也应正常工作。

示例代码：

func profileHandler(w http.ResponseWriter, r *http.Request) {
    if htmx.Is(r) {
        _ = components.ProfilePanel().Render(r.Context(), w)
        return
    }
    _ = components.ProfilePage().Render(r.Context(), w)
}

使用方式

按照渐进式披露的思路，从第一级开始：先挂载 HTMX 资源、在布局中引入脚本、给组件加 hx-* 属性、让处理器返回局部组件，并区分整页与片段响应。跑通一个交互后，再进入第二级掌握核心控件，最后使用第三级的高级服务端模式。

当需要其他能力时，可升级到其他技能：

需要处理器/路由结构：使用 templ-http。
需要可复用组件 API：使用 templ-components。
需要模板语法帮助：使用 templ-syntax。

适用场景

创建动态 UI。
实时更新。
AJAX 交互。
任何提到“HTMX”的场景。
希望以服务端驱动交互、避免 JS 框架的场合。

限制

资料未提供关于收费、价格、平台支持范围、性能效果或具体使用步骤的更多信息，暂未提供。

参考资料

快速开始：resources/quick-start.md
交互模式：resources/interaction-patterns.md
高级响应：resources/advanced-responses.md
HTMX 文档：https://htmx.org/docs/
Hypermedia Systems：https://hypermedia.systems/