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 扩展允许您通过 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 | 此扩展支持在将 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 核心的一部分 |