使用 Django 和 HTMX 簡化動態網頁開發 (第三部)：Django 整合

擁有「內建豐富功能 (Batteries Included)」哲學的穩固後端 Django，與巧妙運用後端新鮮出爐的 HTML 片段的 HTMX，兩者可謂是天作之合。

本篇貼文延續前文，作為「使用 Django 和 HTMX 簡化動態網頁開發」系列文章的第三部，我們將探討在實際 Django 專案中整合 HTMX 的兩種具體方法。

Django 和 HTMX 結合的圖片

1. 不使用第三方套件，直接整合

這是最純粹、最輕量的方法。無需複雜的安裝過程，只需在 HTML 模板中新增一行腳本，即可立即使用 HTMX 的功能。

安裝方法

HTMX 官方文件提供了多種安裝方法，但最快的方式無疑是利用 CDN。

  • 利用 CDN (最快)： 將以下程式碼放入 base.html 的 <head> 標籤中即可。
<script src="https://cdn.jsdelivr.net/npm/htmx.org@2.0.10/dist/htmx.min.js" integrity="sha384-H5SrcfygHmAuTDZphMHqBJLc3FhssKjG7w/CeCpFReSfwBWDTKpkzPP8c+cLsK+V" crossorigin="anonymous"></script>
  • 直接下載： 如果注重安全性或需要離線環境，可以下載 htmx.min.js 並放置到專案的 static 資料夾中，然後指定路徑。
  • npm： 如果您正在使用建置系統，可以透過 npm install htmx.org 命令進行安裝。

前往 HTMX 官方安裝文件

2. 使用 django-htmx 套件

在 Django 生態系中，存在一個專門的函式庫 django-htmx，能幫助您以更「Django 風格」的方式使用 HTMX。

安裝與設定

依照 django-htmx 官方文件 的指示，執行以下步驟。

  1. 安裝套件

    bash python -m pip install django-htmx

  2. 註冊 INSTALLED_APPS

    python INSTALLED_APPS = [ ..., "django_htmx", ..., ]

  3. 新增中介軟體

    python MIDDLEWARE = [ ..., "django_htmx.middleware.HtmxMiddleware", ..., ]

django-htmx 究竟有多方便？

HTMX 本身就是一個非常簡單的工具，因此，是否還有必要額外安裝 django-htmx 這個套件？這確實會令人產生疑問。事實上，即使沒有這個套件，也能實現核心功能。然而，當我們審視這個套件所提供的便利功能時，便能理解為何許多開發者會選擇它。

根據 django-htmx 的官方文件，此套件最大的特色是透過中介軟體擴展 request 物件。註冊中介軟體後，會新增一個 request.htmx 屬性，透過它，您可以非常輕鬆地獲取以下詳細資訊：

  • 確認請求資訊： boosted, current_url, current_url_abs_path, history_restore_request, prompt
  • 控制目標與觸發器： target, trigger, trigger_name, triggering_event

此外，它還支援兩種專用標籤，有助於模板操作。

  • {% htmx_script %}：這是插入 HTMX 函式庫腳本的主要標籤。
  • {% django_htmx_script %}：當您直接透過 CDN 或靜態檔案引入 HTMX 時，這是用於額外插入偵錯擴充腳本的輔助標籤。

特別令人印象深刻的是 django_htmx.http 模組中包含的11 種實用方法。其中，trigger_client_event() 更是脫穎而出。它能讓您輕鬆地在伺服器端配置 HX-Trigger 標頭並隨回應發送，從而直接從伺服器控制客戶端事件。一旦熟悉，這將是一個您會頻繁使用的強大工具。

當然，所有這些功能都可以由開發者自行編寫中介軟體或操作標頭來實現。因此，如果您像我一樣偏好親自打造，可能不會覺得這是一個必要的套件。

總而言之，django-htmx 雖然不是「不可或缺」，但它確實是一個「擁有後能顯著提升開發體驗」的套件。官方文件內容不多，只需花一兩個小時就能充分了解，您可以根據自己的專案特性來決定是否引入。

總結

如果您只想實現簡單的切換按鈕或幾個按讚功能，那麼直接使用 (CDN) 就已足夠。避免增加不必要的依賴可能是最經濟實惠的做法。

然而，如果專案規模擴大，並且需要頻繁地在單一視圖中同時處理整個頁面和部分頁面，那麼django-htmx 也是值得考慮的。

您更傾向於哪種方式呢？事實上，django-htmx 並不是一個沉重的套件，反而相當輕量，所以直接無腦安裝並使用它或許才是正解。這一切都只是開發者的個人偏好和習慣問題，例如「我想要最小化依賴套件」或「我喜歡親自動手做」這類開發者特質所決定的。

不過，無論您做出何種選擇，有了 HTMX，您都將能擺脫 JavaScript 的束縛，再次體驗回歸 HTML 簡潔性的樂趣。

延伸閱讀 :