擴展

htmx 支援擴展功能,以增強其提供的核心超媒體基礎架構。擴展機制減輕了核心函式庫添加新功能的壓力,使其可以專注於通用化超媒體控制的主要目的。

如果您有興趣為 htmx 建立擴展,請參閱建構 htmx 擴展

htmx 擴展分為兩個類別

核心擴展

名稱描述
head-support提供在 htmx 請求中合併 head 標籤資訊(樣式等)的支援
htmx-1-compat將 htmx 2 的大部分行為變更回滾到 htmx 1 的預設值。
idiomorph基於 idiomorph 變形函式庫(由 htmx 團隊創建),提供 morph 交換策略。
preload此擴展允許您在使用者請求之前將 HTML 片段載入到瀏覽器的快取中,以便其他頁面對使用者來說幾乎可以瞬間載入。
response-targets此擴展允許您指定在收到不同的 HTTP 回應代碼時要交換的不同目標元素。
sse提供直接從 HTML 支援伺服器發送事件
ws提供直接從 HTML 與 Web Socket 伺服器進行雙向通訊

社群擴展

名稱描述
ajax-headerX-Requested-With 標頭添加到 htmx 發出的所有請求
alpine-morphAlpine.js 現在有一個輕量的 morph 外掛,此擴展允許您將其用作 htmx 中的交換機制,這對於在整個 Alpine 元件被 htmx 交換時保留 Alpine 狀態是必要的。
class-toolsclass-tools 擴展允許您使用 classesdata-classes 屬性來指定要切換到元素上或從元素上移除的 CSS 類別。
client-side-templates此擴展支援在 JSON/XML 請求回應被交換到 DOM 中之前,透過客戶端範本將其轉換為 HTML。
debug此擴展會記錄其所在元素的所有 htmx 事件,可以透過 console.debug 函式或使用 DEBUG: 字首的 console.log 函式進行記錄。
disable-element當在觸發請求的元素上設定時,此擴展會在 htmx 請求期間停用元素。請注意,此功能現在是 htmx 核心的一部分,透過 hx-disabled-elt 屬性實現
event-header此擴展會將 Triggering-Event 標頭添加到請求中。標頭的值是觸發請求的事件的 JSON 序列化版本。
include-valsinclude-vals 擴展允許您使用 include-vals 屬性以程式方式在請求中包含值。此屬性的值是一個或多個名稱/值對,將作為 JavaScript 物件字面中的欄位進行評估。
json-enc-custom此擴展的工作方式與 json-enc 類似,但允許使用非常複雜的結構,例如嵌入 JSON 物件、列表或處理索引,只需使用 name 屬性即可。
json-enc此擴展以 JSON 格式而不是 URL 格式編碼參數。
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-noncesafe-nonce 擴展可用於提高應用程式/網站的安全性,並透過允許您安全地返回已知受信任的內聯腳本,來幫助避免 XSS 問題
signalr透過 SignalR 提供雙向即時通訊。