在Django中如何为当前导航菜单项添加样式？

Question

我想在Django中样式化当前活动子菜单项，想知道应该如何做？有两种方法：

• Django方式：在Django模板中比较当前地址和链接，然后添加active标签。
• jQuery方式：在Django模板中不知道活动菜单项，使用jQuery进行高亮显示。

我更倾向于使用jQuery的方式，但我的思路是否正确呢？这种解决方案是否不受推荐？

- connexion20000

Answer 1

@Liarez在他的答案中写道：

在这个例子中，我区分了3个URL，如果你有一个像/posts/whatever/contacts这样的URL，那么会出现混乱，因为有两个地方会返回True（第二个和第三个li）。

所以这里是更好的处理选项：

{% with request.resolver_match.url_name as url_name %}
    <ul id="menu">
        <li class="{% if url_name == 'home' %}active{% endif %}">Home</li>
        <li class="{% if url_name == 'blog' %}active{% endif %}">Posts</li>
        <li class="{% if url_name == 'contact' %}active{% endif %}">Contact</li>
    </ul>
{% endwith %}

现在我们的url路径不再存在重复问题。假设您编写了以下这样名称的url模式，那么这将起作用：

url(r'^$', 'home_view', name=u'home'),
url(r'^posts/$', 'posts_view', name=u'blog'),
url(r'^contact/$', 'contact_view', name=u'contact'),

- amureki

Answer 2

为了在菜单和子菜单中显示活动选项卡，我在模板中使用request.path和一个名为active的类。当你这样做时：

{{request.path}}

在模板中，它返回你所在的URL地址（类似于/posts/1234）。因此，在你的HTML中，你可以这样做：

<ul id="menu">
    <li class="{% if request.path == '/' %}active{% endif %}">Home</li>
    <li class="{% if 'posts' in request.path %}active{% endif %}">Posts</li>
    <li class="{% if 'contact' in request.path %}active{% endif %}">Contact</li>
</ul>

在这个例子中，我为3个url做了区分。如果你有一个像/posts/whatever/contacts的URL，那么这可能会很混乱，因为有两个位置会返回True（第二个和第三个li）。但是，如果你有非常不同的URL，那么这可能是实现你想要的功能最简单的方法之一。

- AlvaroAV