HTMX 與 Django 實現局部更新與後端渲染

功能概述

此功能實現了一個按讚(收藏)按鈕,使用者可以對特定的項目(如面試記錄)進行按讚或取消按讚操作。按鈕的狀態(已收藏或收藏)由後端決定,並通過 HTMX 局部更新頁面。


技術細節

1. 前端模板設計

favorite.html

這個模板負責渲染按讚按鈕,按鈕的狀態根據使用者是否已經按讚來決定。

{% if user in interview.favorited_by.all %}
    
{% else %}
    
{% endif %}
  • hx-post: 當按鈕被點擊時,發送一個 POST 請求到指定的 URL。
  • hx-swap="outerHTML": 指定 HTMX 替換整個按鈕的 HTML,而不僅僅是按鈕內的內容。
  • 按鈕狀態: 使用 Django 模板語法 `