通过python根据条件向html添加类

Posted 2023-02-24

【中文标题】通过python根据条件向html添加类

【英文标题】：add class depending on condition to html via python

【发布时间】：2020-08-27 12:51:10

【问题描述】：

以下代码是我用于网站所有模板标题的代码，并将其添加到每个模板中： % include 'header.html' %

我试图弄清楚如何将 class="active" 添加到我的标题上的链接中，以便根据当前页面突出显示相应的导航项。我试图定义一个函数，该函数根据哪个模板处于活动状态而返回不同的值，但我认为我没有正确定义它，因为当我将条件放入 html 时它会引发错误。我应该在类属性内还是在整个标签外使用 jinja 标签。另外，我怎么知道哪个是当前模板。请帮忙，谢谢！

% load static %
<header role="banner">
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="container-fluid">
      <a class="navbar-brand " href="% url 'main:index' %">my site</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample05" aria-controls="navbarsExample05" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class="collapse navbar-collapse" id="navbarsExample05">
        <ul class="navbar-nav pl-md-5 ml-auto">
          <li class="nav-item">
            <a class="nav-link active" href="% url 'main:index' %">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="% url 'main:about' %">Nosotros</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="projects.html">Ingeniería</a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="% url 'main:services' %" id="dropdown04" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Servicios</a>
            <div class="dropdown-menu" aria-labelledby="dropdown04">
              <a class="dropdown-item" href="services.html">Diseño</a>
              <a class="dropdown-item" href="services.html">Impresión 3D</a>
              <a class="dropdown-item" href="services.html">Mantenimiento</a>
            </div>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="blog.html">Tienda</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="% url 'main:contact' %">Contáctenos</a>
          </li>
        </ul>


      </div>
    </div>
  </nav>
</header>

【问题讨论】：

您想将该类添加到<li class="nav-item"> 或<a> 标记中吗？

对不起，如果我不清楚，我指的是整个项目，但我想将它添加到 标记

你为什么使用href="projects.html"？这个模板没有视图吗？我相信应该有一个TemplateView 只是呈现projects.html 模板并作为响应返回。我问这个是因为我在访问“Ingeniería”选项卡时看不到实现模板处理的方法。

【参考方案1】：

我喜欢使用urls.py 和kwargs 传递重要的页面信息。例如，页面标题、页面名称和其他一些关键字。假设我们有两个页面，page1 和 page2。

urls.py

在 urls.py 中我们定义页面浏览量并设置它们的关键词。

urlpatterns += [path('page1/', page1_view,  kwargs = 'navbar': 'page1')]
urlpatterns += [path('page2/', page2_view,  kwargs = 'navbar': 'page2')]

views.py

在视图中，我们需要确保将 kwargs 传递给模板。您唯一需要添加的是 **kwarg 到您的视图中

def page2(request, **kwargs):
    return render(request, 'page2.html')

header.html

在 header.html 模板中，我们可以对其进行设置，以便根据 navbar kwarg 我们将正确的页面显示为活动状态。

<li class="nav-item">
    <a class="nav-link % if request.resolver_match.kwargs.navbar == 'page1' %active% endif %" href="/page1">Page1</a>
</li>
<li class="nav-item">
    <a class="nav-link % if request.resolver_match.kwargs.navbar == 'page2' %active% endif %" href="/page2">Page2</a>
</li>

当然，您可以使用 sn-ps 和循环来清理它。

【讨论】：

感谢您提供的详细答案！我错过了 kwargs。