# 使用 Django 和 HTMX 簡化動態網頁開發 (第三部)：Django 整合擁有「內建豐富功能 (Batteries Included)」哲學的穩固後端 **[[Django]]**，與巧妙運用後端新鮮出爐的 HTML 片段的 **[[HTMX]]**，兩者可謂是天作之合。本篇貼文延續前文，作為「**使用 Django 和 HTMX 簡化動態網頁開發**」系列文章的第三部，我們將探討在實際 Django 專案中整合 HTMX 的兩種具體方法。 ![Django 和 HTMX 結合的圖片](/media/whitedec/blog_img/cd6a017531894572b0123aa2e403ef4b.webp) ----- ## 1. 不使用第三方套件，直接整合 {#sec-ca790606f6d7} 這是最純粹、最輕量的方法。無需複雜的安裝過程，只需在 HTML 模板中新增一行腳本，即可立即使用 HTMX 的功能。 ### 安裝方法 {#sec-1b32901b18e3} HTMX 官方文件提供了多種安裝方法，但最快的方式無疑是利用 **CDN**。 * **利用 CDN (最快)：** 將以下程式碼放入 `base.html` 的 `` 標籤中即可。 ```html ``` * **直接下載：** 如果注重安全性或需要離線環境，可以下載 [htmx.min.js](https://www.google.com/search?q=https://unpkg.com/htmx.org/dist/htmx.min.js) 並放置到專案的 `static` 資料夾中，然後指定路徑。 * **npm：** 如果您正在使用建置系統，可以透過 `npm install htmx.org` 命令進行安裝。 [前往 HTMX 官方安裝文件](https://htmx.org/docs/#installing) ----- ## 2. 使用 django-htmx 套件 {#sec-e127afe305db} 在 Django 生態系中，存在一個專門的函式庫 **django-htmx**，能幫助您以更「Django 風格」的方式使用 [[HTMX]]。 ### 安裝與設定 {#sec-1fad40addfc9} 依照 [django-htmx 官方文件](https://django-htmx.readthedocs.io/en/latest/installation.html) 的指示，執行以下步驟。 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 究竟有多方便？ {#sec-9b3f39c88466} [[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** 雖然不是「不可或缺」，但它確實是一個「**擁有後能顯著提升開發體驗**」的套件。官方文件內容不多，只需花一兩個小時就能充分了解，您可以根據自己的專案特性來決定是否引入。 ----- ## 總結 {#sec-2c0be77e7e31} 如果您只想實現簡單的切換按鈕或幾個按讚功能，那麼**直接使用 (CDN)** 就已足夠。避免增加不必要的依賴可能是最經濟實惠的做法。然而，如果專案規模擴大，並且需要頻繁地在單一視圖中同時處理整個頁面和部分頁面，那麼**django-htmx** 也是值得考慮的。您更傾向於哪種方式呢？事實上，django-htmx 並不是一個沉重的套件，反而相當輕量，所以直接無腦安裝並使用它或許才是正解。這一切都只是開發者的個人偏好和習慣問題，例如「我想要最小化依賴套件」或「我喜歡親自動手做」這類開發者特質所決定的。不過，無論您做出何種選擇，有了 [[HTMX]]，您都將能擺脫 [[JavaScript]] 的束縛，再次體驗回歸 HTML 簡潔性的樂趣。 **延伸閱讀** : - [使用 Django 和 HTMX 簡化動態網頁開發 (第一部)](/ko/whitedec/2025/1/27/django-htmx-dynamic-web-simplification/) - [使用 Django 和 HTMX 簡化動態網頁開發 - Ajax (第二部)](/ko/whitedec/2025/1/27/django-htmx-dynamic-web-simplification-2/) - [使用 Django 和 HTMX 簡化動態網頁開發 (第四部)](/ko/whitedec/2025/1/27/django-htmx-csrf-token-integration/) - [使用 Django 和 HTMX 簡化動態網頁開發 (第五部)](/ko/whitedec/2025/1/27/django-htmx-advanced-features/) - [使用 Django 和 HTMX 簡化動態網頁開發 (第六部)：HTML 回傳方式](/ko/whitedec/2025/1/27/django-htmx-html-response/) - [使用 Django 和 HTMX 簡化動態網頁開發 (第七部)：JSON 回傳方式](/ko/whitedec/2025/1/27/django-htmx-json-response/)