Question

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

所有导航栏都非常简单，只有<a href...>标签的文字。

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

因此，例如，导航看起来像这样：

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

因此，如果我在Billing的{{1}}部分，我希望链接Systems以粗体显示，链接Systems为粗体（或其他一些简单的突出显示））

或者：

Billing

如果我在(main ->) [Systems][Invoices][Work Orders][Admin] (Work-Orders sub-nav ->) [Create New][Outstanding]的{{1}}部分，则需要突出显示链接Outstanding和链接Work Orders。

有什么想法吗？

Answer 1

假设您将render_to_response与RequestContext一起使用或使用Django 1.3的render方法或基于类的视图，您将在模板中使用请求对象。从那里，只需访问当前路径并将其与预期值进行比较即可：

<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进行部分匹配的事实。例如，如果你有像

这样的网址

/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>

您需要的是在页面加载时将CSS类应用于正确链接的一些javascript。我看起来像这样：

$(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');
    }
});

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

Answer 4

In an other similar question,我见过jpwatts'，110j，nivhab＆amp; Marcus Whybrow的答案，但他们似乎都缺乏某种东西：根路径怎么样？为什么它总是活跃的？

所以我做了另一种方式，更容易，这使得“控制器”自己决定，我认为它解决了大多数大问题。

这是我的自定义标记：

## myapp_tags.py

@register.simple_tag
def nav_css_class(page_class):
    if not page_class:
        return ""
    else:
        return page_class

然后，“控制器”声明需要的CSS类（实际上，最重要的是它向模板声明它的存在）

## views.py

def ping(request):
    context={}
    context["nav_ping"] = "active"
    return render(request, 'myapp/ping.html',context)

最后，我在导航栏中渲染它：

<!-- sidebar.html -->

{% load myapp_tags %}
...

<a class="{% nav_css_class nav_home %}" href="{% url 'index' %}">
    Accueil
</a>
<a class="{% nav_css_class nav_candidats %}" href="{% url 'candidats' %}">
    Candidats
</a>
<a class="{% nav_css_class nav_ping %}" href="{% url 'ping' %}">
    Ping
</a>
<a class="{% nav_css_class nav_stat %}" href="{% url 'statistiques' %}">
    Statistiques
</a>
...

因此每个页面都有自己设置的nav_css_class值，如果已设置，则模板呈现活动状态：模板上下文中不需要request，没有URL分区，也没有多个问题URL页面或根页。

Answer 5

扩展fabspro的答案，这是基于页面网址和vanilla js执行此操作的方法。

<div id="navbar">
    <ul>
        <li data-link-name="home">
            <a href="{% url 'home' %}"><span>Home</span></a>
        </li>
        <li data-link-name="parent">
            <a href="{% url 'myapp:index' %}"><span>Parent</span></a>
        </li>
        <li data-link-name="child1">
            <a href="/myapp/child1/grandchild1"><span>Child 1</span></a>
        </li>
    </ul>
</div>

<script>
    var path = location.pathname;
    if (path == "/") {
        pageName = "home";
    } else if (path.startsWith("/myapp/child1")){
        pageName = "child1";
    } else if (path.startsWith("/myapp")) {
        pageName = "parent";
    }

    document.querySelector("li[data-link-name='" + pageName + "']").classList += "active";
</script>

这里有很多灵活性。例如，上面的Parent链接会突出显示其中的所有网址，/child1除外。 Child 1链接会将用户带到/grandchild1页面，但grandchildren中所有child1的链接都会显示为有效。任何类型的自定义逻辑都可以写出来。

Answer 6

如果你想用 unicode 处理复杂的 url 不要忘记使用 iriencode (https://docs.djangoproject.com/en/dev/ref/templates/builtins/#iriencode)

{% url 'your_view_name_defined_in_urls.py' possible_attribute as url %}
<a class="{% if request.path|iriencode == url %}active{% endif %}" href="{{ url }}">
    Your label
</a>

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

6 个答案: