Django：在导航栏中突出显示当前页面

Question

在我的 layout.html（有时称为 base.html）中，我有一个这样的导航栏：

    <li class="dropdown"><a href="{% url 'index' %}" >Home </a></li>
    <li class="dropdown"><a href="{% url 'house_list' %}">Your houses</a></li>
    <li class="dropdown"><a href="{% url 'agency_list' %}">Agencies</a></li>
    <li class="dropdown"><a href="/admin">Admin</a></li>
    <li class="dropdown"><a href="{% url 'logout' %}"><i class="fa fa-lock"></i> Log ud</a></li>
    <li class="dropdown"><a href="{% url 'login' %}"><i class="fa fa-lock"></i> Log ind</a></li>

我想在导航栏中突出显示当前页面，这是通过将 <li class="dropdown"> 更改为 <li class="dropdown active"> 来完成的

有没有办法让 Django 为用户所在的页面插入活动？非常感谢任何帮助！

我正在使用 Django 1.9 和 Python 3.5。

Answer 1

我的代码库（Django + bootstrap4）遇到了同样的问题。 我不想自己指定所有突出显示的路线，并且想要一些支持嵌套路径的东西。以下解决方案使用带有 xpath 选择器的 vanilla JS 来搜索所有导航项并将它们与文档的位置路径进行比较。

let navItemsIter = document.evaluate('//li[@class="nav-item"]//a', document);
function getPathBase(path) {
    let pathBase = path.split('/').filter(function(e){return e})
    if(pathBase.length===0) return null;

    return pathBase[0];
}
try {
    const pathBase = getPathBase(document.location.pathname);
    var navNode = navItemsIter.iterateNext;

    while(navNode) {
        navNode = navItemsIter.iterateNext();
        if(pathBase===getPathBase(navNode.attributes.href.nodeValue)) {
            navNode.attributes.class.nodeValue = navNode.attributes.class.nodeValue+' active'
            break;
        }
    }
} catch(err) {
    console.log('Error: Document tree modified during iteration', err)
}

您可能需要根据 html 的结构更改 xpath 选择器。

Answer 2

我有一个简单的解决方案： 在您的 views.py 中，在您的上下文字典中传递一个附加参数

def home(request):
    return render(request, 'template_name', {'home_page': 'active'})

然后在你的 base.html（你有导航栏的地方）：

<li class="nav-item {{home_page}}">                
  <a class="nav-link" href="{% url 'home' %}">Home</a>
</li>

这样，每当您通过调用 home 函数时，它也会发送“home_page”，这将使当前 URL 处于活动状态。

请注意，我在这里使用的是引导程序。

Answer 3

当不使用专用的template tag 生成菜单时，如果当前请求的view_name 与链接项的view_name 匹配，我将设置active 菜单项类：

伪代码：

<a 
  class="{% if request.resolver_match.view_name == 'foo' %}active{% endif %}"
  href="{% url 'foo' %}"
>Foo</a>

---

不是很干，但是当不处理很多导航项时，它就可以了：

<a class="nav-item nav-link {% if request.resolver_match.view_name == 'core:dashboard' %}active{% endif %}" href="{% url 'core:dashboard' %}">Dashboard</a>
<a class="nav-item nav-link {% if request.resolver_match.view_name == 'publications:index' %}active{% endif %}" href="{% url 'publications:index' %}">Publications</a>

Answer 4

您可以获得 url 的名称（在您的 urlpatterns 中引用）。如果 url 匹配，则设置 'active' 类。

{% with url_name=request.resolver_match.url_name %}
<li class="dropdown {% if url_name == 'index' %}active{% endif %}"
   <a href="{% url 'index' %}" >Home </a>
</li>
<li>...</li>
{% endwith %}

Answer 5

您需要在 HTML 文件中指定以下脚本。这里我们检索当前窗口锚标记，然后将活动类添加到相应的<li> 标记中。

$(document).ready(function(e){
         var pathname = window.location.pathname;
         atag = $('.dropdown a[href="'+pathname+'"]'); #Here you should mention your <li> class name "dropdown"
         atag.parent().addClass("active");
       });

Answer 6

我有一个类似的问题，发现使用 Django 模板解决了我的问题。 通过创建一个包含导航栏的“基本”模板，让每个页面都填充活动标志。

像这样：

包含这个的base.html文件

<li {% block nav_index%}{% endblock %}><a href="{% url 'index' %}" >Home </a></li>
<li {% block nav_house_list%}{% endblock %}><a href="{% url 'house_list' %}">Your houses</a></li>
<li {% block nav_agency_list%}{% endblock %}><a href="{% url 'agency_list' %}">Agencies</a></li>
<li {% block nav_admin%}{% endblock %}><a href="/admin">Admin</a></li>
<li {% block nav_logout%}{% endblock %}><a href="{% url 'logout' %}"><i class="fa fa-lock"></i> Log ud</a></li>
<li {% block nav_login%}{% endblock %}><a href="{% url 'login' %}"><i class="fa fa-lock"></i> Log ind</a></li>

然后在每个页面上引用它。为每个网址插入“活动”：

{% extends "base.html" %}

{% block nav_index%}
    class="active"
{% endblock %}

（替换每个页面的nav_index）

Django 有一些很好的文档：https://docs.djangoproject.com/en/1.7/topics/templates/