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

时间:2016-09-22 12:36:48

标签: html django python-3.x django-templates

在我的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。

6 个答案:

答案 0 :(得分:11)

您可以获取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 %}

答案 1 :(得分: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/

答案 2 :(得分:1)

您需要在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");
       });

答案 3 :(得分:1)

我有一个简单的解决方案: 在您的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有效。

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

答案 4 :(得分:0)

当不使用专用的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>

答案 5 :(得分:0)

我的代码库(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选择器。