扩展

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 支持 服务器发送事件
ws提供直接从 HTML 与 Web Sockets 服务器的双向通信

社区扩展

名称 描述
ajax-header 为 htmx 发出的所有请求添加 X-Requested-With 头部
alpine-morph Alpine.js 现在有一个轻量级的 变形插件,此扩展允许您将其用作 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 此扩展支持在将 JSON/XML 请求响应交换到 DOM 之前,通过客户端模板将其转换为 HTML
json-enc 此扩展以 JSON 格式而非 URL 格式编码参数
form-json 类似于 json-enc,但具有类型保留功能。将表单数据转换为结构化 JSON,同时为数字、布尔值和文件(Base64 编码)保持正确的类型。使用点号(.)或方括号([])表示法支持嵌套结构
json-enc-custom 此扩展的工作方式类似于 json-enc,但允许非常复杂的结构,例如嵌入 JSON 对象、列表或处理索引,只需使用 name 属性
htmx-json 通过直接转换 HTML 支持 JSON 响应。这与 client-side-templates 的方法略有不同
集成
amz-content-sha256 用于与需要内容哈希作为请求一部分以进行数据完整性验证的 AWS 服务交互的 HTMX 扩展
signalr 通过 SignalR 提供双向实时通信
遗留
disable-element 此扩展在 htmx 请求期间禁用元素(当在触发请求的元素上配置时)。注意此功能现在已通过 hx-disabled-elt 属性成为 htmx 核心的一部分
include-vals include-vals 扩展允许您通过 include-vals 属性以编程方式在请求中包含值。注意此功能现在已通过 hx-vals 属性成为 htmx 核心的一部分