Django - 根据当前页面突出显示导航？

Question

我正在构建一个包含几个主要部分的webapp.每个部分都有几个子部分.我有一个main_nav.html文件,其中包含主要部分的导航.HTML使用模板中的{% include ... %}命令将其添加到基础文件中base.html.此外,我有几个子部分导航文件,每个文件都使用相同的{% include ... %}命令添加到任何给定的页面.

所有导航栏都非常简单,只带有<a href...>标签的文本.

我想强调当前主要部分和当前子部分的链接.由于这个webapp相当大,我希望以某种方式这样做而不添加特定于页面的信息.另外,我希望它随着webapp的扩展而"工作",以包含更多的部分和子部分.例如,可以通过查看正在使用的实际URL来完成吗？我希望将这可以放在导航文件本身内,而不必在每个django视图中加载一些变量或其他内容.

因此,例如,导航看起来像这样:

(main ->)            [Systems][Invoices][Work Orders][Admin]
(system sub-nav ->)  [Owner][Billing][Contacts]

因此,如果我在该Billing部分Systems,我希望链接Systems以粗体显示,链接Billing为粗体(或其他一些简单的突出显示)

要么:

(main ->)                 [Systems][Invoices][Work Orders][Admin]
(Work-Orders sub-nav ->)  [Create New][Outstanding]

如果我在该Outstanding部分Work Orders,则需要突出显示链接Work Orders和链接Outstanding.

有任何想法吗？

Answer 1

假设你用render_to_response用RequestContext或使用render的Django 1.3基于类的方法或意见,你必须在你的模板中提供的请求对象.从那里,只需访问当前路径并将其与预期值进行比较即可:

<a href="/some/path/to/be/highlighted/"{% if request.path == '/some/path/to/be/highlighted/' %} class="active"{% endif %}>Some Link</a>

在Django 1.3中,我喜欢保存冗余并使用as运算符进行URL查找:

{% url 'some_urlpattern_name' as url %}
<a href="{{ url }}"{% if request.path == url %} class="active"{% endif %}>Some Link</a>

根据需要重复每个链接.

Answer 2

扩展了Chris接受的答案,您可以使用Django模板语言支持in部分匹配的事实.例如,如果你有像这样的URL

/people/directory
/people/profiles/joe
/people/profiles/edit

并且您希望为所有这些情况突出显示主"People"导航元素,请使用以下内容:

{% if "/people/" in request.path %}class="active"{% endif %}

Answer 3

只是以为我会在其他人的方法中考虑他们是否在Google中找到了这个.

在我的模板中,我有这样的事情:

{% block pagename %}homepage{% endblock %}

然后在我的主模板中,这样的东西(以便继承模板的页面名称可用于呈现的页面):

<span id="_pageName" style="display:none">{% block pagename %}{% endblock %}</span>

我的链接看起来像这样:

<li data-link-name="homepage"><a href="{% url "pages:home" %}">Home</a></li>

您只需要一些javascript就可以在页面加载时将CSS类应用到正确的链接.我看起来像这样:

$(function() {
    var pageName = document.getElementById('_pageName');
    if (pageName != null) { pageName = pageName.innerHTML; }
    else { pageName = ''; }
    if (pageName.length > 0) {
        $("li[data-link-name='" + pageName + "']").addClass('active');
    }
});

非常简单,通过在模板中添加一个小块,可以控制要突出显示的链接.