HTMX - 安裝

與其他 JavaScript 庫相比，在專案中安裝 HTMX 非常容易。HTMX 檔案非常小，您可以將其儲存在專案檔案中，也可以使用 CDN 連結或任何其他更適合您需求或感覺更容易的選項。

下載 HTMX 的步驟

有很多方法可以使用 HTMX，下面列出了所有可能的方法及其說明。

這是在專案中使用 HTMX 最快最簡單的方法。您只需要在 **<head>** 標籤內包含以下連結。

<script src="https://unpkg.com/htmx.org@2.0.2" crossorigin="anonymous"></script>

<script src="https://unpkg.com/htmx.org@2.0.2/dist/htmx.js" crossorigin="anonymous"></script>

您可以從此連結 https://unpkg.com/htmx.org@2.0.2/dist/htmx.min.js 簡單地儲存檔案，並將檔案放置到您的專案目錄中，然後透過 **<script>** 標籤包含該檔案。

<script src="/path/to/htmx.min.js"></script>

您可以使用以下命令透過 npm 安裝 HTMX。

npm install htmx.org

要透過 Webpack 使用 HTMX，您需要首先使用 npm 或 yarn 包管理器來安裝它。

步驟 1：安裝命令

npm install htmx.org@2.0.2
// Or
yarn install htmx.org@2.0.2

步驟 2：在您的 index.js 檔案中匯入
```
import 'htmx.org';
```
步驟 3：建立自定義 JavaScript 檔案 (custom.js)
將此檔案匯入您的 index.js 檔案。
```
import 'path/to/my_custom.js';
```
步驟 4：將以下程式碼新增到檔案 (custom.js)
```
window.htmx = require('htmx.org');
```

現在您已準備好在專案中使用 HTMX 了。

在以下示例中，當用戶點選“點選我！”按鈕時，它將向 '/clicked' 發出一個 HTTP POST 請求，並使用響應中的內容替換 DOM 中 id 為 'parent' 的元素。

<button hx-post="/clicked"
 hx-trigger="click"
 hx-target="#parent"
 hx-swap="outerHTML"
>
 Click Me!
</button>

列印頁面