htmx 支持扩展来增强它提供的核心超媒体基础设施。扩展机制减轻了核心库添加新功能的压力,使其能够专注于其主要目的,即泛化超媒体控件。
如果您对为 htmx 创建扩展感兴趣,请参阅构建 htmx 扩展。
htmx 扩展分为两类:
| 名称 | 描述 |
|---|---|
| head-support | 在 htmx 请求中提供对合并 head 标签信息(样式等)的支持 |
| htmx-1-compat | 将 htmx 2 的大多数行为更改回 htmx 1 的默认值。 |
| idiomorph | 提供基于 idiomorph 变形库的 morph 交换策略,该库由 htmx 团队创建。 |
| preload | 此扩展允许您在用户请求之前将 HTML 片段加载到浏览器的缓存中,从而使额外的页面对用户看起来几乎瞬间加载。 |
| response-targets | 此扩展允许您指定不同的目标元素,当接收到不同的 HTTP 响应代码时进行交换。 |
| sse | 直接从 HTML 提供对 Server Sent Events 的支持。 |
| ws | 直接从 HTML 提供与 Web Sockets 服务器的双向通信 |
| 名称 | 描述 |
|---|---|
| ajax-header | 为 htmx 发出的所有请求添加 X-Requested-With 头 |
| alpine-morph | Alpine.js 现在有一个轻量级的 morph 插件,此扩展允许您将其用作 htmx 中的交换机制,这对于在 htmx 交换整个 Alpine 组件时保留 Alpine 状态是必要的。 |
| attribute-tools | attribute-tools 扩展允许您指定将使用 attributes 或 data-attributes 属性交换到元素上或从元素上交换掉的属性。(类似于 class-tools) |
| class-tools | class-tools 扩展允许您指定将使用 classes 或 data-classes 属性交换到元素上或从元素上交换掉的 CSS 类。 |
| debug | 此扩展将通过 console.debug 函数记录其所在元素的 htmx 事件。请注意,在开发期间,使用 htmx.logAll() 通常就足够了。 |
| event-header | 此扩展为请求添加 Triggering-Event 头。头的值为触发请求的事件的 JSON 序列化版本。 |
| loading-states | 此扩展允许您在请求进行中轻松管理加载状态,包括禁用元素,以及添加和移除 CSS 类。 |
| morphdom-swap | 提供基于 morphdom 变形库的 morph 交换策略。 |
| multi-swap | 此扩展允许您从 HTML 响应中交换多个标记的元素。您还可以为每个元素选择使用哪种交换方法。 |
| no-cache | 此扩展强制 HTMX 绕过客户端缓存并发出新请求。还添加了 hx-no-cache 头,以允许绕过服务器端缓存。 |
| path-deps | 此扩展支持基于路径表达元素间依赖关系,受 intercooler.js 依赖机制 启发。 |
| path-params | 此扩展使用请求参数填充路径变量。使用的参数将被移除,因此它们不会再在查询字符串或正文中发送。 |
| remove-me | 允许您在指定间隔后移除元素。 |
| replace-params | 此扩展使用请求参数替换现有参数。如果给定的值为字符串,则参数将被删除。此扩展在分页、搜索等情况下很有用,您只想替换少数参数而不是重置所有参数。 |
| restored | 每当在使用 hx-boost 时检测到后退按钮事件时触发事件 |
| safe-nonce | safe-nonce 扩展可用于提高应用程序/网站的セキュリティ,并通过允许您安全返回已知可信的内联脚本来帮助避免 XSS 问题 |
| hx-drag | 此扩展允许为拖放发送 htmx 请求 |
| dynamic-url | 允许使用 {varName} 占位符进行动态 URL 路径模板化,通过可配置的自定义函数或 window. 回退解析。它不依赖于 hx-vals。当需要执行依赖于应用程序状态的路径请求时很有用。 |
| 数据 API | |
| client-side-templates | 此扩展支持在交换到 DOM 之前通过客户端模板将 JSON/XML 请求响应转换为 HTML。 |
| json-enc | 此扩展以 JSON 格式编码参数,而不是 URL 格式。 |
| form-json | 类似于 json-enc,但具有 类型保留。将表单数据转换为结构化 JSON,同时保持数字、布尔值和文件(Base64 编码)的正确类型。支持使用点 (.) 或括号 ([]) 表示法表示嵌套结构。 |
| json-enc-custom | 此扩展的工作方式类似于 json-enc,但允许非常复杂的结构,例如通过使用 name 属性嵌入 JSON 对象、列表或处理索引。 |
| htmx-json | 通过直接转换 html 支持 JSON 响应。这是一种与 client-side-templates 略有不同的方法。 |
| 集成 | |
| amz-content-sha256 | 用于与需要内容哈希作为请求一部分以进行数据完整性验证的 AWS 服务交互的 HTMX 扩展。 |
| signalr | 通过 SignalR 提供双向实时通信。 |
| 遗留 | |
| disable-element | 此扩展在 htmx 请求期间禁用元素,当在触发请求的元素上配置时。请注意,此功能现在是 htmx 核心的一部分,通过 hx-disabled-elt 属性。 |
| include-vals | include-vals 扩展允许您使用 include-vals 属性以编程方式在请求中包含值。请注意,此功能现在是 htmx 核心的一部分,通过 hx-vals 属性。 |