Question

假设每个导航中都有导航，nav1，nav2，nav3和许多子窗口。

对于css效果，您需要将class=current应用于当前选定的导航。

干燥的方法是什么。

对于subnavs，您可以在基本模板中检查request.get_full_path是否与subnav引用的url相同。

如何使导航变得干燥。

Answer 1

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

这种方法为您提供了一些解耦优势，我在本答案的最后详细说明了这一点。

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

在base.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修改导航栏类。）

对于许多（但不是全部）情况，这可以是视图逻辑的更好的分离表示：

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

视图已经在选择命名模板，这意味着您已经将一些与导航相关的信息传递给模板层。这可能就是你所需要的一切。
您可以使用模板上下文处理器来获取有关视图的一些信息，但这只是将强耦合移动到系统的另一层，而不是停留在模板层中。

Answer 2

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

例如，如果您有以下导航元素：

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

在您的视图中，添加上下文变量current以通过id表示当前nav元素的ID：

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

然后在javascript（这里显示的jQuery）：

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

这将评估为：

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

然后将#current CSS应用于home元素。

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

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

2 个答案: