HTMX - 配置

---

---

HTMX是一個JavaScript庫，它使用HTML、AJAX、CSS過渡、WebSockets和伺服器傳送事件來擴充套件你的HTML。本指南將向您展示如何為您的專案配置HTMX，涵蓋基本和高階設定選項，以確保HTMX能夠順利執行。

HTMX入門

HTMX允許您輕鬆地為Web應用程式新增互動式功能。首先將HTMX整合到您的專案中，並使用其屬性使您的HTML元素具有響應性和動態性。

在您的專案中包含HTMX

要開始使用HTMX，您需要將其包含在您的HTML檔案中。為此，您可以檢視HTMX - 安裝。

驗證HTMX啟用

頁面載入時，HTMX會自動開始工作。您無需執行任何操作即可進行設定。

全域性配置

HTMX允許您設定應用於頁面上所有HTMX元素的全域性配置選項。您可以使用htmx.config物件設定全域性配置。

// Enable template fragments
htmx.config.useTemplateFragments = true;

// Set default swap style
htmx.config.defaultSwapStyle = "outerHTML";

// Set default swap delay (in milliseconds)
htmx.config.defaultSwapDelay = 100;

以下是一些常用的全域性配置選項

• useTemplateFragments:如果設定為true，HTMX將使用模板標籤解析內容
• defaultSwapStyle:設定所有元素的預設交換樣式（例如，“innerHTML”、“outerHTML”）
• defaultSwapDelay:設定交換內容之前的預設延遲（以毫秒為單位）。
• timeout:設定AJAX請求的預設超時時間（以毫秒為單位）。
• historyCacheSize 設定要快取的歷史記錄條目數。

按元素覆蓋配置

雖然全域性配置適用於所有HTMX元素，但您也可以使用屬性配置單個元素。

以下是一些常用的特定於元素的屬性

• hx-trigger:指定觸發請求的事件。
• hx-target:指定將內容交換到的目標元素
• hx-swap:定義如何交換響應內容
• hx-boost:將普通錨點和表單轉換為AJAX請求

示例

<button hx-post="/submit" hx-trigger="click" hx-target="#result" hx-swap="outerHTML">
    Submit
</button>

此按鈕將使用“outerHTML”交換，而不管全域性defaultSwapStyle設定。

高階配置選項

HTMX還允許使用JavaScript進行更高階的配置。這些設定使您可以根據您的特定需求調整HTMX。

示例

htmx.config.historyCacheSize = 20;
htmx.config.defaultSettleDelay = 100;
htmx.config.globalViewTransitions = true;
htmx.config.getCacheBusterParam = true;

此配置

• 增加了歷史快取大小
• 設定預設的settle延遲以獲得更流暢的過渡
• 全域性啟用檢視轉換API
• 向GET請求新增快取清除引數

自定義標頭配置

您可以向所有HTMX請求新增自定義標頭。

htmx.config.headers = {
    'My-Custom-Header': 'my-custom-value'
};

除錯配置

為了幫助除錯，您可以記錄當前配置。

console.log(JSON.stringify(htmx.config, null, 2));

這將以可讀格式輸出整個配置物件。

動態配置更改

您可以根據使用者操作或應用程式狀態動態更改配置。

document.getElementById('toggleHistory').addEventListener('click', function() {
  htmx.config.historyEnabled = !htmx.config.historyEnabled;
  console.log("History is now " + (htmx.config.historyEnabled ? "enabled" : "disabled"));
});

響應處理配置

HTMX允許您控制如何在網頁上處理伺服器響應。您可以指定響應內容的存放位置以及插入方式。

示例

<button hx-get="/api/data"
    hx-target="#result"
    hx-swap="innerHTML"
    hx-select="#data">
Load Data
</button>

單擊此按鈕時，它將從“/api/data”獲取資料，選擇響應的“#data”部分，並將其插入到“#result”元素中，替換其內部HTML。

“hx-swap”屬性還有其他選項，例如“outerHTML”、“beforebegin”和“afterend”，用於不同的插入方法。

配置HTMX

您可以通過幾種不同的方式配置HTMX，無論是使用JavaScript還是直接向HTML新增屬性。以下是用於設定HTMX以適應您的專案的不同配置選項的概述