如何在Django类视图中结合HTMX实现评论加载功能？

你的核心问题是直接重写了DetailView的get方法，导致所有请求都返回partial.html，既破坏了正常文章详情页的渲染，也没正确区分HTMX请求和普通请求。以下是具体修正方案：

1. 修正PostDetailView类视图 #

不要直接覆盖get方法返回partial模板，先执行DetailView的默认逻辑，再通过HTMX请求头判断是否返回评论partial：

class PostDetailView(DetailView):
    model = Post
    template_name = "post_detail.html"

    def get(self, request, **kwargs):
        # 先执行DetailView默认的对象获取逻辑
        self.object = self.get_object()
        context = self.get_context_data(object=self.object)
        
        # 检查是否为HTMX请求（HTMX会自动携带HX-Request头）
        if request.META.get("HTTP_HX_REQUEST"):
            # 传递当前文章的评论数据到上下文
            context["comments"] = self.object.comments.all()  # 假设Post与Comment是一对多关联
            # 返回评论的partial模板
            return render(request, "partial.html", context)
        
        # 普通请求返回正常的文章详情页
        return self.render_to_response(context)

2. 修正post_detail.html中的HTMX按钮 #

确保按钮的hx-get指向正确的文章详情URL，hx-target对应页面中接收评论的容器：

<!-- 文章详情页中放置评论的容器 -->
<div id="here"></div>

<!-- 加载评论按钮 -->
<button 
    hx-get="{% url 'post_detail' object.pk %}"  <!-- object是DetailView传递的文章对象 -->
    hx-target="#here"
    hx-swap="innerHTML"
>
    加载评论
</button>

3. 确保partial.html能正确渲染评论 #

在partial模板中使用传递的comments上下文变量：

<!-- partial.html -->
{% for comment in comments %}
<div class="comment-item">
    <h4>{{ comment.author.username }}</h4>
    <p>{{ comment.content }}</p>
    <small>{{ comment.created_at|date:"Y-m-d H:i" }}</small>
</div>
{% empty %}
<p>暂无评论，快来抢沙发吧~</p>
{% endfor %}

4. 验证urls.py配置 #

确保文章详情的URL路由正确，能匹配到PostDetailView：

# urls.py
from django.urls import path
from .views import PostDetailView

urlpatterns = [
    # 其他路由...
    path("posts/<int:pk>/", PostDetailView.as_view(), name="post_detail"),
]

关键错误点总结 #

• 你之前直接重写get方法返回partial.html，导致正常访问文章详情页时也返回该模板，页面根本无法正确渲染，HTMX按钮自然无法正常触发。
• 没有区分普通请求和HTMX请求，类视图需要根据请求类型返回不同模板，而非统一返回partial。
• 未将评论数据传递给partial模板，即使返回模板也没有内容可显示。

内容的提问来源于stack exchange，提问作者Callum