如何让HTMX在用户手动访问URL时加载对应Partial？

问题出在手动访问/library/1时，logged_in_home视图返回的只是基础首页结构，没有自动触发HTMX请求去拉取对应的Partial——只有点击页面上的链接才会触发/h/library/1的请求，直接访问/library/1时没有这个自动触发动作，所以page-content区域是空的。

下面给出两种符合你需求的解决方案（无需依赖HTMX请求头判断）：

方案一：在完整页面视图中直接嵌入Partial内容 #

修改logged_in_home视图，当请求路径是/library/<id>时，直接生成Partial内容并嵌入到完整页面模板中：

# views.py
def logged_in_home(request, id=None):
    context = {}
    # 如果是访问library页面，提前生成Partial内容
    if id is not None:
        context['library_content'] = f"Library {id} info."
    # 渲染包含page-content的完整模板
    return render(request, 'logged_in_home.html', context)

对应的模板logged_in_home.html：

<a 
  hx-get="/h/library/1" 
  hx-push-url="/library/1" 
  hx-target="#page-content" 
  hx-swap="innerHTML"
>
Load Library 1
</a>

<div id="page-content">
    {% if library_content %}
        {{ library_content }}
    {% endif %}
</div>

方案二：用HTMX自动触发加载 #

在logged_in_home的模板中，判断当前是否携带library的id参数，如果有，添加一个隐藏元素，利用hx-trigger="load"在页面加载时自动发起HTMX请求：

模板logged_in_home.html修改如下：

<a 
  hx-get="/h/library/1" 
  hx-push-url="/library/1" 
  hx-target="#page-content" 
  hx-swap="innerHTML"
>
Load Library 1
</a>

{% if id %}
<!-- 页面加载时自动触发请求，拉取对应Partial -->
<div 
  hx-get="/h/library/{{ id }}" 
  hx-target="#page-content" 
  hx-swap="innerHTML"
  hx-trigger="load"
  style="display: none;"
></div>
{% endif %}

<div id="page-content"></div>

同时要确保logged_in_home视图能接收并传递id参数：

# views.py
def logged_in_home(request, id=None):
    context = {'id': id}
    return render(request, 'logged_in_home.html', context)

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