突出显示侧栏中的当前菜单项

Question

我在Twitter Bootstrap上使用django.我当前的观点类似于提供的示例之一.查看示例,可以想象用户单击侧栏中的一个链接以查看不同的视图,每个视图都使用相同的侧边栏框架.可以想象,选择的链接将被突出显示,就像使用代码的示例一样:

<li class="active"><a href="/sample/link/here/">Link</a></li>

活动类需要附加到正确的菜单项.如何将此"活动"类分配给正确的菜单项？最初,我尝试使用视图中的变量为jquery分配它:

$(document).ready(function() {
    $("#{{ current_view }}_nav").addClass('active');
});

<li id="linkone_nav"><a href="/sample/link/here/">Link</a></li>

这看起来很麻烦.它要求我从视图中将id传递给模板.还有很多要管理的ID.是否有更好/更优先的方式来分配此活动类？

Answer 1

我认为你#在示例代码中使用href会使问题蒙上阴影.我假设您的真实场景是实际的真实链接,并根据活动URL自动突出显示它们.如果这是正确的,那么就这样做:

{% url something as url %}
<li{% if request.path == url %} class="active"{% endif %}><a href="{{ url }}">Link1</a></li>

其中,"something"是urlpattern的名称或视图的虚线路径等.这假设你正在反转URL,所以如果你使用的是静态URL,你只需对其进行硬编码:

<li{% if request.path == "/my/full/url/path/" %} class="active"{% endif %}><a href="/my/full/url/path/">Link1</a></li>

Answer 2

如果您已将项目组织到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模板中,如果您希望其中一个nav元素显示为活动状态,请使用相应的块active作为内容.例如,要突出显示"关于"项:

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

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

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

这提供了不依赖于JavaScript的初始呈现.(如果您正在使用单页应用程序,则可以使用JavaScript修改导航栏类.)

对于许多(但不是全部)情况,这可以是视图逻辑的更好的分离表示:

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

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

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