将当前类应用于Django模板中导航元素的干燥方法

在您的方法中,如果您添加一个类来将活动nav元素表示为元素本身,那么您可以从视图中将活动nav元素的名称添加到上下文中。然后,使用一些javascript添加 current 类到适当的元素。

例如,如果您有以下导航元素:

<a id="home" href="#">Home</a>
<a id="about" href="#">About</a>

在视图中,添加上下文变量 现在的 用id表示当前nav元素的id:

return render_to_response('template.html',
                          {'current': 'home'})

然后在javascript中(此处显示jquery):

$("#{{ current }}").addClass('current')

这将被评估为:

$("#home").addClass('current')

然后将您当前的CSS应用于home元素。

另一种方法是将类添加到 body 标识当前活动导航菜单的标记。然后,在CSS中,为每个body类定义突出显示相应导航项的样式。然后,您的模板插入 现在的 变量直接进入body类列表,不需要javascript。

如果你把你的项目组织成 base.html 由其他模板扩展的模板,例如 appname/pagename.html ,可以使用以模板为中心的方法突出显示活动的导航元素。

这种方法为您提供了一些去耦优势,我在这个答案的末尾已经详细指出了这一点。

我发现这种方法对于处理大多数或所有站点上保持相同的广泛导航项非常有用。对于更详细的导航元素,例如呈现从数据存储中收集的项目的动态列表,它可能不是一个合适的解决方案。

在你 基础HTML 模板,向每个导航元素添加一个块,为这些块指定唯一的名称:

<ul class="nav">
  <li class="{% block navbar_class-home %}{% endblock %}">
    <a href="#">Home</a>
  </li>
  <li class="{% block navbar_class-about %}{% endblock %}">
    <a href="#">About</a>
  </li>
  <li class="{% block navbar_class-pricing %}{% endblock %}">
    <a href="#">Pricing</a>
  </li>
</ul>

在你 appname/pagename.html文件名 模板,如果希望其中一个导航元素显示为活动状态,请使用 active 作为内容。例如,要突出显示“关于”项目:

{% block navbar_class-about %} current {% endblock %}

当使用呈现该模板的视图时,它将如下呈现:

<ul class="nav">
  <li class="">
    <a href="#">Home</a>
  </li>
  <li class=" current ">
    <a href="#">About</a>
  </li>
  <li class="">
    <a href="#">Pricing</a>
  </li>
</ul>

这提供了一个不依赖于javascript的初始呈现。(如果您使用的是单页应用程序,则可以使用javascript修改导航栏类。)

对于许多(但不是所有)情况,这可以更好地将表示与视图逻辑分离:

• 您可以修改视图以将网站导航数据附加到模板上下文,但这样做会将演示文稿与视图层紧密耦合,并使创建可重用应用程序或集成第三方应用程序变得更加困难。

  视图已经选择了一个命名模板,这意味着您已经向模板层传递了一些与导航相关的信息。这可能是你所需要的。

• 您可以使用模板上下文处理器获取有关视图的一些信息,但这只是将强耦合移动到系统的另一层,而不是停留在模板层中。