在 django 中重新加载页面时保持侧边栏打开

Question

我的 django 项目中有多个带有模板的应用程序。 所有模板都扩展了我的 base.html 文件，其中包括页面侧边栏。 当我单击侧边栏上的菜单之一时，整个页面都会刷新。 如何保持打开侧边栏并只刷新页面内容？ 我虽然关于使用 ajax 但我不确定这是否是正确的方法。

这是我base.html的主体部分。

<body>
    <div class="wrapper">
        <!-- SIDEBAR -->
        {% include 'sidebar.html' %}

        <!-- PAGE CONTENT --> 
        <!--<div class="container-fluid">-->

            {% block content %}

            {% endblock %}

        <!--</div>-->
    </div>
</body>

这是我的侧边栏。html

<div class="sidenav">
  <ul class="sidebar-nav">  
    <li><a href="#">Menu1</a></li>
    <li><a href="#">Menu2</a></li>
    <li><a href="#">Menu3</a></li>
    <li><a href="#">Menu4</a></li>
    <li><a href="#">Menu5</a></li>
  </ul>
</div>

Answer 1

如果您在项目开始时我可以建议使用 htmx（ https://htmx.org/ ）。 然后只有初始索引完全加载了基本模板。 您需要添加 div 以填充来自 htmx 调用的响应

基地.html：

<body>
    <div class="wrapper">
        <!-- SIDEBAR -->
        {% include 'sidebar.html' %}

        <!-- PAGE CONTENT --> 
        <!--<div class="container-fluid">-->
<div id="main_htmx">
            {% block content %}

            {% endblock %}
</div>
        <!--</div>-->
    </div>
</body>

然后在您的导航栏中：

<div class="sidenav">
  <ul class="sidebar-nav">  
    <li hx-get="/menu1/" hx-target="main_htmx">Menu1</li>
    <li><a href="#">Menu2</a></li>
    <li><a href="#">Menu3</a></li>
    <li><a href="#">Menu4</a></li>
    <li><a href="#">Menu5</a></li>
  </ul>
</div>

您将返回 /menu1/ 的视图应该呈现不扩展 base.html 的模板，并且不要使用其中的块。 您所需要的只是 html 的主体，例如：

<h1>Hello it's htmx get</h1>
<table></table>

Htmx 将其插入到 'main_htmx' div 中。 要记住的远不止这些，例如，如果您想在获取 htmx 后在浏览器栏中更改 url，您需要记住有人会点击刷新，您需要使用 base.html 返回全身。 您可以查看请求是由 htmx 发出的：

if request.META.get('HTTP_HX_CURRENT_URL') is not None:

或使用 django https://pypi.org/project/django-htmx/的第三方库

在 django 中重新加载页面时保持侧边栏打开

问题描述

1 个解决方案

解决方案1
0 2022-08-09 09:46:40

基地.html：

在 django 中重新加载页面时保持侧边栏打开

问题描述

1 个解决方案

解决方案1 0 2022-08-09 09:46:40

基地.html：

解决方案1
0 2022-08-09 09:46:40