如何在 HTMX 中刷新页面时重新加载所有部分

Question

我正在试用 HTMX 库，到目前为止我非常喜欢它。我无法完全理解的是处理整页重新加载。

链接

<a class="nav-link" href="#" hx-get="/api/?action=feed" hx-target="#app" hx-swap="innerHTML" hx-push-url="/#/feed">Feed</a>


<a class="nav-link" href="#" hx-get="/api/?action=profile" hx-target="#app" hx-swap="innerHTML" hx-push-url="/#/profile">Profile</a>

它非常好，因为它加载了我需要的 div 中的内容，并将 /#/link 应用到我的 url 栏和浏览器历史记录中。

但是当我在任何 urls /#/profile 或 /#/feed 上重新加载页面时，页面会重新加载到默认状态，不包括在 /#/profile 或 /#/profile 上指定的内容/#/提要页面。

如果我只使用 url 的 /profile 或 /feed，我会收到预期的 404 错误。

一切都很棒，我是不是做错了什么？

Answer 1

对于整页加载，您需要：

呈现内容服务器端
使用带有 load 触发器的 htmx 在页面加载时加载内容。你可以在这里找到一个例子 https://htmx.org/attributes/hx-trigger/

在第二种情况下，您仍然需要能够确定服务器端加载的页面类型以呈现适当的 div。像这样：

 <div hx-get="/api/?action=feed" hx-trigger="load" hx-target="#app" hx-swap="innerHTML"></div>

如何在 HTMX 中刷新页面时重新加载所有部分

how to reload all partials on page refresh in HTMX

htmx