扩展

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 扩展允许您指定将使用 attributesdata-attributes 属性交换到元素上或从元素上交换掉的属性。(类似于 class-tools)
class-tools class-tools 扩展允许您指定将使用 classesdata-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 属性。