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

您可以获取url的名称（在urlpatterns中引用）。然后设置“有效”＆＃39;如果网址匹配，则为class。

{% 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 2

我有一个类似的问题，发现使用Djangos模板解决了我的问题。通过创建一个基础＆＃39;包含导航栏的模板，保留每个页面填充的活动标志。

像这样：

包含此

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

然后在每个页面上引用它。插入＆＃39;有效＆＃39;对于每个网址：

{% extends "base.html" %}

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

（替换每页的nav_index）

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

Answer 3

您需要在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 4

我有一个简单的解决方案：在您的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将使当前URL有效。

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

Answer 5

当不使用专用的template tag进行菜单生成时，如果当前请求的active与链接的view_name相匹配，则会设置view_name菜单项类项目：

伪代码：

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

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

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选择器。

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

6 个答案: