前言

網頁開發環境正變得日益複雜。儘管 React 或 Vue.js 等前端框架功能強大，但並非所有專案都必需它們。尤其當您只想實現簡單的動態功能時，這些框架可能會帶來不必要的複雜性。

HTMX 正是為了解決此類問題而誕生的輕量級、以 HTML 為中心的函式庫。它能與 Django 等伺服器端框架完美整合，讓您輕鬆建構動態網頁應用程式。

HTMX 標誌

什麼是 HTMX？

HTMX 是一個為簡化動態網頁開發而設計的輕量級 JavaScript 函式庫。它允許您僅透過 HTML 屬性，即可實現 AJAX、WebSocket 和 Server-Sent Events (SSE) 等動態功能，而無需編寫複雜的 JavaScript 程式碼或依賴前端框架。

HTMX 的主要 HTML 屬性

  • hx-get: 向伺服器發送 GET 請求。
  • hx-post: 向伺服器發送 POST 請求。
  • hx-swap: 將伺服器回傳的響應內容插入到頁面的特定部分。
  • hx-trigger: 根據點擊或滑鼠移動等特定事件觸發操作。
  • hx-target: 指定接收伺服器回傳內容並進行渲染的特定 HTML 元素。

這些屬性使 HTMX 能與 Django 等以伺服器為中心的渲染模式自然結合。

Django 模板與 HTMX 的差異

1. Django 模板

  • Django 模板在伺服器端渲染 HTML 後，將整個頁面回傳給客戶端。
  • 這是傳統的網頁開發方式，頁面會透過重新載入來更新內容。
  • 若要添加動態功能，需要直接編寫 JavaScript。

2. Django + HTMX

  • 使用 HTMX，您可以實現無需重新載入頁面即可更新特定部分的功能。
  • Django 視圖只回傳部分 HTML，HTMX 則將其插入到客戶端的特定元素中。
  • 無需複雜的 JavaScript 程式碼，也能提供動態的使用者體驗。

Django 與 HTMX 的整合範例

基本 Django 視圖程式碼

from django.shortcuts import render

def update_content(request):
    if request.htmx:
        return render(request, 'partials/content.html')  # 回傳部分 HTML
    return render(request, 'index.html')  # 回傳整個頁面

模板配置

index.html

<!DOCTYPE html>
<html>
<head>
    <title>HTMX Example</title>
    <script src="https://unpkg.com/htmx.org"></script>
</head>
<body>
    <div id="content">
        <p>此內容將會變更。</p>
    </div>
    <button hx-get="/update/" hx-target="#content">更新內容</button>
</body>
</html>

partials/content.html

<p>新內容將在此處顯示。</p>

運作結果

  1. 使用者點擊按鈕後，會向 /update/ URL 發送 GET 請求。
  2. 伺服器回傳 partials/content.html 模板，然後 <div id="content"> 內的內容會在不重新載入頁面的情況下被替換。

同時使用 Django 與 HTMX 的優點

  1. 簡化動態網頁開發: 無需 JavaScript 即可輕鬆實現 AJAX 等動態功能。
  2. 保持伺服器端邏輯: 業務邏輯集中在伺服器端，有助於提高安全性與維護性。
  3. 可替代前端框架: 無需 React、Vue.js 等大型框架，也能有效提升使用者體驗。

本篇結語

HTMX 憑藉其與 Django 的高度相容性，使動態網頁開發變得既簡單又高效。它強大且簡潔，足以替代現有的前端框架，因此我們強烈建議您在專案中嘗試導入它。

在下一篇中，我們將深入探討 HTMX 與 Ajax 的關係，並透過 Ajax 請求與 HTMX 的運作範例來更全面地了解 HTMX。敬請期待！

延伸閱讀 :