我刚刚在 django 中完成了我的第一个小 webapp,我喜欢它。我即将开始将一个旧的生产 PHP 站点转换为 django,作为其模板的一部分,有一个导航栏。
在 PHP 中,我在模板代码中根据当前 URL 检查每个导航选项的 URL,如果它们对齐,则应用 CSS 类。太乱了。
有没有更好的 django 或处理模板中代码的好方法?
首先,我将如何获取当前 URL?
我刚刚在 django 中完成了我的第一个小 webapp,我喜欢它。我即将开始将一个旧的生产 PHP 站点转换为 django,作为其模板的一部分,有一个导航栏。
在 PHP 中,我在模板代码中根据当前 URL 检查每个导航选项的 URL,如果它们对齐,则应用 CSS 类。太乱了。
有没有更好的 django 或处理模板中代码的好方法?
首先,我将如何获取当前 URL?
您不需要 if 来执行此操作,请查看以下代码:
标签.py
@register.simple_tag
def active(request, pattern):
import re
if re.search(pattern, request.path):
return 'active'
return ''
网址.py
urlpatterns += patterns('',
(r'/$', view_home_method, 'home_url_name'),
(r'/services/$', view_services_method, 'services_url_name'),
(r'/contact/$', view_contact_method, 'contact_url_name'),
)
base.html
{% load tags %}
{% url 'home_url_name' as home %}
{% url 'services_url_name' as services %}
{% url 'contact_url_name' as contact %}
<div id="navigation">
<a class="{% active request home %}" href="{{ home }}">Home</a>
<a class="{% active request services %}" href="{{ services }}">Services</a>
<a class="{% active request contact %}" href="{{ contact }}">Contact</a>
</div>
就是这样。有关实施细节,请查看:
gnuvence.wordpress.com
110j.wordpress.com
我使用模板继承来自定义导航。例如:
base.html
<html>
<head>...</head>
<body>
...
{% block nav %}
<ul id="nav">
<li>{% block nav-home %}<a href="{% url 'home' %}">Home</a>{% endblock %}</li>
<li>{% block nav-about %}<a href="{% url 'about' %}">About</a>{% endblock %}</li>
<li>{% block nav-contact %}<a href="{% url 'contact' %}">Contact</a>{% endblock %}</li>
</ul>
{% endblock %}
...
</body>
</html>
about.html
{% extends "base.html" %}
{% block nav-about %}<strong class="nav-active">About</strong>{% endblock %}
我喜欢上面 110j 的清洁度,所以我采用了大部分并进行了重构,以解决我遇到的 3 个问题:
这里是:
标签.py:
from django import template
register = template.Library()
@register.tag
def active(parser, token):
args = token.split_contents()
template_tag = args[0]
if len(args) < 2:
raise template.TemplateSyntaxError, "%r tag requires at least one argument" % template_tag
return NavSelectedNode(args[1:])
class NavSelectedNode(template.Node):
def __init__(self, patterns):
self.patterns = patterns
def render(self, context):
path = context['request'].path
for p in self.patterns:
pValue = template.Variable(p).resolve(context)
if path == pValue:
return "active" # change this if needed for other bootstrap version (compatible with 3.2)
return ""
网址.py:
urlpatterns += patterns('',
url(r'/$', view_home_method, {}, name='home_url_name'),
url(r'/services/$', view_services_method, {}, name='services_url_name'),
url(r'/contact/$', view_contact_method, {}, name='contact_url_name'),
url(r'/contact/$', view_contact2_method, {}, name='contact2_url_name'),
)
base.html:
{% load tags %}
{% url home_url_name as home %}
{% url services_url_name as services %}
{% url contact_url_name as contact %}
{% url contact2_url_name as contact2 %}
<div id="navigation">
<a class="{% active request home %}" href="home">Home</a>
<a class="{% active request services %}" href="services">Services</a>
<a class="{% active request contact contact2 %}" href="contact">Contact</a>
</div>
我是专门为解决这个问题而写的django-lineage的作者:D
我在自己的项目中使用(完全可以接受的)jpwatts 方法感到恼火,并从 110j 的回答中汲取了灵感。血统看起来像这样:
{% load lineage %}
<div id="navigation">
<a class="{% ancestor '/home/' %}" href="/home/">Home</a>
<a class="{% ancestor '/services/' %}" href="/services/">Services</a>
<a class="{% ancestor '/contact/' %}" href="/contact/">Contact</a>
</div>
ancestor
如果参数与当前页面 URL 的开头匹配,则简单地替换为“活动”。
{% url %}
还支持可变参数和完整类型的反向解析。我撒了一些配置选项,把它充实了一点,打包起来供大家使用。
如果有人感兴趣,请在以下位置阅读更多信息:
在所有通用的基于类的视图(或任何从 ContextMixin 继承的基于类的视图)中,上下文字典包含一个指向 View 实例的视图变量。
因此,如果您使用此类视图,您可以添加类似的内容breadcrumbs
作为类级别字段并在模板中使用它。
示例视图代码:
class YourDetailView(DetailView):
breadcrumbs = ['detail']
(...)
在您的模板中,您可以这样使用它:
<a href="/detail/" {% if 'detail' in view.breadcrumbs %}class="active"{% endif %}>Detail</a>
如果要另外“突出显示”父导航项,则需要扩展breadcrumbs
列表:
class YourDetailView(DetailView):
breadcrumbs = ['dashboard', 'list', 'detail']
(...)
...并在您的模板中:
<a href="/dashboard/" {% if 'dashboard' in view.breadcrumbs %}class="active"{% endif %}>Dashboard</a>
<a href="/list/" {% if 'list' in view.breadcrumbs %}class="active"{% endif %}>List</a>
<a href="/detail/" {% if 'detail' in view.breadcrumbs %}class="active"{% endif %}>Detail</a>
这是一个简单而干净的解决方案,并且与嵌套导航配合得很好。
您可以将 class 或 id 应用于页面的 body 元素,而不是特定的导航项。
HTML:
<body class="{{ nav_class }}">
CSS:
body.home #nav_home,
body.about #nav_about { */ Current nav styles */ }
我这样做:
<a class="tab {% ifequal active_tab "statistics" %}active{% endifequal %}" href="{% url Member.Statistics %}">Statistics</a>
然后我所要做的就是在我看来添加{'active_tab': 'statistics'}
到我的上下文字典中。
如果您正在使用RequestContext
,您可以在模板中获取当前路径:
{{ request.path }}
在您看来:
from django.template import RequestContext
def my_view(request):
# do something awesome here
return template.render(RequestContext(request, context_dict))
我从上面的 nivhab 中获取了代码并删除了一些奇怪的东西,并将其制成一个干净的模板标签,修改它以便 /account/edit/ 仍然使 /account/ 选项卡处于活动状态。
#current_nav.py
from django import template
register = template.Library()
@register.tag
def current_nav(parser, token):
import re
args = token.split_contents()
template_tag = args[0]
if len(args) < 2:
raise template.TemplateSyntaxError, "%r tag requires at least one argument" % template_tag
return NavSelectedNode(args[1])
class NavSelectedNode(template.Node):
def __init__(self, url):
self.url = url
def render(self, context):
path = context['request'].path
pValue = template.Variable(self.url).resolve(context)
if (pValue == '/' or pValue == '') and not (path == '/' or path == ''):
return ""
if path.startswith(pValue):
return ' class="current"'
return ""
#template.html
{% block nav %}
{% load current_nav %}
{% url home as home_url %}
{% url signup as signup_url %}
{% url auth_login as auth_login_url %}
<ul class="container">
<li><a href="{{ home_url }}"{% current_nav home_url %} title="Home">Home</a></li>
<li><a href="{{ auth_login_url }}"{% current_nav auth_login_url %} title="Login">Login</a></li>
<li><a href="{{ signup_url }}"{% current_nav signup_url %} title="Signup">Signup</a></li>
</ul>
{% endblock %}
这只是上面 Toba 提出的 css 解决方案的一种变体:
在基本模板中包含以下内容:
<body id="section-{% block section %}home{% endblock %}">
然后在扩展基本用途的模板中:
{% block section %}show{% endblock %}
然后,您可以使用 css 根据 body 标签突出显示当前区域(例如,如果我们有一个 id 为 nav-home 的链接):
#section-home a#nav-home{
font-weight:bold;
}
您可以使用带有适当参数的reverse 函数来获取当前 url。
感谢您到目前为止的回答,先生们。我又去了一些稍微不同的东西..
在我的模板中:
<li{{ link1_active }}>...link...</li>
<li{{ link2_active }}>...link...</li>
<li{{ link3_active }}>...link...</li>
<li{{ link4_active }}>...link...</li>
一旦我确定了我在逻辑中的哪个页面(通常在 urls.py 中),我将 class="selected"
作为上下文的一部分以正确的名称传递给模板。
例如,如果我在 link1 页面上,我将附加{'link1_active':' class="selected"'}
到模板的上下文中以舀取并注入。
它似乎工作并且相当干净。
编辑:为了将 HTML 排除在我的控制器/视图之外,我对此进行了一些修改:
<li{% if link1_active %} class="selected"{% endif %}>...link...</li>
<li{% if link2_active %} class="selected"{% endif %}>...link...</li>
...
它使模板的可读性降低了一点,但我同意,最好不要从 urls 文件中推送原始 HTML。
我发现最好的方法是使用包含标签:
templates/fnf/nav_item.html
<li class="nav-item">
<a class="nav-link {% if is_active %}active{% endif %}" href="{% url url_name %}">{{ link_name }}</a>
</li>
这只是我希望渲染的基本引导导航项目。
它获取 href 值,以及可选的 link_name 值。is_active
是根据当前请求计算的。
templatetags/nav.py
from django import template
register = template.Library()
@register.inclusion_tag('fnf/nav_item.html', takes_context=True)
def nav_item(context, url_name, link_name=None):
return {
'url_name': url_name,
'link_name': link_name or url_name.title(),
'is_active': context.request.resolver_match.url_name == url_name,
}
然后在导航中使用它:
templates/fnf/nav.html
{% load nav %}
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<ul class="navbar-nav mr-auto">
{% nav_item 'dashboard' %}
</ul>
我在同一页面上有多个通过循环动态创建的菜单。上面与上下文相关的帖子给了我一个快速修复。希望这可以帮助某人。(除了活动模板标签外,我还使用它——我的修复解决了动态问题)。这似乎是一个愚蠢的比较,但它确实有效。我选择将变量命名为 active_something-unique 和 something-unique,这样它就可以与嵌套菜单一起使用。
这是视图的一部分(足以理解我在做什么):
def project_list(request, catslug):
"render the category detail page"
category = get_object_or_404(Category, slug=catslug, site__id__exact=settings.SITE_ID)
context = {
'active_category':
category,
'category':
category,
'category_list':
Category.objects.filter(site__id__exact=settings.SITE_ID),
}
这是来自模板:
<ul>
{% for category in category_list %}
<li class="tab{% ifequal active_category category %}-active{% endifequal %}">
<a href="{{ category.get_absolute_url }}">{{ category.cat }}</a>
</li>
{% endfor %}
</ul>
我的解决方案是编写一个简单的上下文处理器来根据请求路径设置一个变量:
def navigation(request):
"""
Custom context processor to set the navigation menu pointer.
"""
nav_pointer = ''
if request.path == '/':
nav_pointer = 'main'
elif request.path.startswith('/services/'):
nav_pointer = 'services'
elif request.path.startswith('/other_stuff/'):
nav_pointer = 'other_stuff'
return {'nav_pointer': nav_pointer}
(不要忘记将您的自定义处理器添加到 settings.py 中的 TEMPLATE_CONTEXT_PROCESSORS。)
然后在基本模板中,我为每个链接使用一个 ifequal 标记来确定是否附加“活动”类。当然,这种方法严格限于路径结构的灵活性,但它适用于我相对适度的部署。
我只是想分享我对 nivhab 帖子的小改进。在我的应用程序中,我有子导航,我不想只使用 CSS 来隐藏它们,所以我需要某种“if”标签来显示某个项目的子导航。
from django import template
register = template.Library()
@register.tag
def ifnaviactive(parser, token):
nodelist = parser.parse(('endifnaviactive',))
parser.delete_first_token()
import re
args = token.split_contents()
template_tag = args[0]
if len(args) < 2:
raise template.TemplateSyntaxError, "%r tag requires at least one argument" % template_tag
return NavSelectedNode(args[1:], nodelist)
class NavSelectedNode(template.Node):
def __init__(self, patterns, nodelist):
self.patterns = patterns
self.nodelist = nodelist
def render(self, context):
path = context['request'].path
for p in self.patterns:
pValue = template.Variable(p).resolve(context)
if path == pValue:
return self.nodelist.render(context)
return ""
您可以基本上以与活动标签相同的方式使用它:
{% url product_url as product %}
{% ifnaviactive request product %}
<ul class="subnavi">
<li>Subnavi item for product 1</li>
...
</ul>
{% endifnaviactive %}
只是原始解决方案的另一个增强。
这接受多种模式,最好也是未命名的模式,写成用 '"' 包裹的相对 URL,如下所示:
{% url admin:clients_client_changelist as clients %}
{% url admin:clients_town_changelist as towns %}
{% url admin:clients_district_changelist as districts %}
<li class="{% active "/" %}"><a href="/">Home</a></li>
<li class="{% active clients %}"><a href="{{ clients }}">Clients</a></li>
{% if request.user.is_superuser %}
<li class="{% active towns districts %}">
<a href="#">Settings</a>
<ul>
<li><a href="{{ towns }}">Towns</a></li>
<li><a href="{{ districts }}">Districts</a></li>
</ul>
</li>
{% endif %}
标签是这样的:
from django import template
register = template.Library()
@register.tag
def active(parser, token):
args = token.split_contents()
template_tag = args[0]
if len(args) < 2:
raise template.TemplateSyntaxError, "%r tag requires at least one argument" % template_tag
return NavSelectedNode(args[1:])
class NavSelectedNode(template.Node):
def __init__(self, urls):
self.urls = urls
def render(self, context):
path = context['request'].path
for url in self.urls:
if '"' not in url:
cpath = template.Variable(url).resolve(context)
else:
cpath = url.strip('"')
if (cpath == '/' or cpath == '') and not (path == '/' or path == ''):
return ""
if path.startswith(cpath):
return 'active'
return ""
我使用 jquery 来突出显示我的导航栏。此解决方案只是将 css 类“活动”添加到适合 css 选择器的项目。
<script type="text/javascript" src="/static/js/jquery.js"></script>
<script>
$(document).ready(function(){
var path = location.pathname;
$('ul.navbar a.nav[href$="' + path + '"]').addClass("active");
});
</script>
对@tback的答案进行了一点改进,没有任何%if%
标签:
# navigation.py
from django import template
from django.core.urlresolvers import resolve
register = template.Library()
@register.filter(name="activate_if_active", is_safe=True)
def activate_if_active(request, urlname):
if resolve(request.get_full_path()).url_name == urlname:
return "active"
return ''
像这样在您的模板中使用它:
{% load navigation %}
<li class="{{ request|activate_if_active:'url_name' }}">
<a href="{% url 'url_name' %}">My View</a>
</li>
并包含"django.core.context_processors.request"
在您的TEMPLATE_CONTEXT_PROCESSORS
设置中。
稍微修改 Andreas 的答案,看起来您可以将 urls.py 中的路由名称传递给模板标签。在我的示例my_tasks
中,然后在模板标记函数中使用反向函数来计算 URL 应该是什么,然后您可以将其与请求对象中的 URL 进行匹配(在模板上下文中可用)
from django import template
from django.core.urlresolvers import reverse
register = template.Library()
@register.tag
def active(parser, token):
args = token.split_contents()
template_tag = args[0]
if len(args) < 2:
raise template.TemplateSyntaxError, "%r tag requires at least one argument" % template_tag
return NavSelectedNode(args[1:])
class NavSelectedNode(template.Node):
def __init__(self, name):
self.name = name
def render(self, context):
if context['request'].path == reverse(self.name[1]):
return 'active'
else:
return ''
网址.py
url(r'^tasks/my', my_tasks, name = 'my_tasks' ),
模板.html
<li class="{% active request all_tasks %}"><a href="{% url all_tasks %}">Everyone</a></li>
我知道我迟到了。我不喜欢任何流行的解决方案:
块方法似乎是错误的:我认为导航应该是自包含的。
template_tag 方法似乎是错误的:我不喜欢我必须先从 url-tag 获取 url。另外,我认为 css-class 应该在模板中定义,而不是标签。
因此,我编写了一个没有上述缺点的过滤器。如果 url 处于活动状态,它会返回True
,因此可以用于{% if %}
:
{% load navigation %}
<li{% if request|active:"home" %} class="active"{% endif %}><a href="{% url "home" %}">Home</a></li>
编码:
@register.filter(name="active")
def active(request, url_name):
return resolve(request.path_info).url_name == url_name
只需确保RequestContext
在带有导航的页面上使用或在您的settings.py
TEMPLATE_CONTEXT_PROCESSORS = (
...
'django.core.context_processors.request',
)
我看过jpwatts、110j、nivhab和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 页面或根页面的问题。
受此解决方案的启发,我开始使用这种方法:
**Placed in templates as base.html**
{% block tab_menu %}
<ul class="tab-menu">
<li class="{% if active_tab == 'tab1' %} active{% endif %}"><a href="#">Tab 1</a></li>
<li class="{% if active_tab == 'tab2' %} active{% endif %}"><a href="#">Tab 2</a></li>
<li class="{% if active_tab == 'tab3' %} active{% endif %}"><a href="#">Tab 3</a></li>
</ul>
{% endblock tab_menu %}
**Placed in your page template**
{% extends "base.html" %}
{% block tab_menu %}
{% with active_tab="tab1" %} {{ block.super }} {% endwith %}
{% endblock tab_menu %}
这是我的尝试。我最终在我的视图中实现了一个包含我的导航结构(带有一些元数据)的类。然后我将它注入模板并渲染出来。
我的解决方案涉及 i18n。它可能应该再抽象一点,但我并没有真正为此烦恼。
视图.py:
from django.utils.translation import get_language, ugettext as _
class Navi(list):
items = (_('Events'), _('Users'), )
def __init__(self, cur_path):
lang = get_language()
first_part = '/' + cur_path.lstrip('/').split('/')[0]
def set_status(n):
if n['url'] == first_part:
n['status'] == 'active'
for i in self.items:
o = {'name': i, 'url': '/' + slugify(i)}
set_status(o)
self.append(o)
# remember to attach Navi() to your template context!
# ie. 'navi': Navi(request.path)
我使用这样的包含定义了模板逻辑。基本模板:
{% include "includes/navigation.html" with items=navi %}
实际包含(includes/navigation.html):
<ul class="nav">
{% for item in items %}
<li class="{{ item.status }}">
<a href="{{ item.url }}">{{ item.name }}</a>
</li>
{% endfor %}
</ul>
希望有人会发现这很有用!我想扩展这个想法来支持嵌套层次结构等会很容易。
创建一个包含模板“intranet/nav_item.html”:
{% load url from future %}
{% url view as view_url %}
<li class="nav-item{% ifequal view_url request.path %} current{% endifequal %}">
<a href="{{ view_url }}">{{ title }}</a>
</li>
并将其包含在 nav 元素中:
<ul>
{% include "intranet/nav_item.html" with view='intranet.views.home' title='Home' %}
{% include "intranet/nav_item.html" with view='crm.views.clients' title='Clients' %}
</ul>
您需要将其添加到设置中:
from django.conf import global_settings
TEMPLATE_CONTEXT_PROCESSORS = global_settings.TEMPLATE_CONTEXT_PROCESSORS + (
'django.core.context_processors.request',
)
这是非常简单的解决方案,https://github.com/hellysmile/django-activeurl
从这个SO 问题
{% url 'some_urlpattern_name' as url %}
<a href="{{url}}"{% if request.path == url %} class="active"{% endif %}>Link</a>
根据需要对每个链接重复。
我还使用 jQuery 来突出显示它,发现它比使用非语义 Django 模板标签混乱模板更优雅。
下面的代码适用于引导程序 3 中的嵌套下拉菜单(突出显示父元素和子<li>
元素。
// DOM Ready
$(function() {
// Highlight current page in nav bar
$('.nav, .navbar-nav li').each(function() {
// Count the number of links to the current page in the <li>
var matched_links = $(this).find('a[href]').filter(function() {
return $(this).attr('href') == window.location.pathname;
}).length;
// If there's at least one, mark the <li> as active
if (matched_links)
$(this).addClass('active');
});
});
为当前页面添加click
事件return false
(或将href
属性更改为)也很容易,无需更改模板/html 标记:#
var matched_links = $(this).find('a[href]').filter(function() {
var matched = $(this).attr('href') == window.location.pathname;
if (matched)
$(this).click(function() { return false; });
return matched;
}).length;
我将此 mixin 组合用于基于类的视图:
class SetActiveViewMixin(object):
def get_context_data(self, **kwargs):
context = super(SetActiveViewMixin, self).get_context_data(**kwargs)
context['active_nav_menu'] = {
self.request.resolver_match.view_name: ' class="pure-menu-selected"'
}
return context
在模板中使用这个:
<ul>
<li{{active_nav_menu.node_explorer }}><a href="{% url 'node_explorer' '' %}">Explore</a></li>
<li{{active_nav_menu.node_create }}><a href="{% url 'node_create' path %}">Create</a></li>
<li{{active_nav_menu.node_edit }}><a href="{% url 'node_edit' path %}">Edit</a></li>
<li{{active_nav_menu.node_delete }}><a href="{% url 'node_delete' path %}">Delete</a></li>
</ul>
我的有点类似于之前提交的另一种 JS 方法......只是没有 jQuery......
假设我们在 base.html 中有以下内容:
<div class="pure-u-1 pure-menu pure-menu-open pure-menu-horizontal header" >
<ul class="">
<li id="home"><a href="{% url 'article:index' %}">Home</a></li>
<li id="news"><a href="{% url 'article:index' %}">News</a></li>
<li id="analysis"><a href="{% url 'article:index' %}">Analysis</a></li>
<li id="opinion"><a href="{% url 'article:index' %}">Opinion</a></li>
<li id="data"><a href="{% url 'article:index' %}">Data</a></li>
<li id="events"><a href="{% url 'article:index' %}">Events</a></li>
<li id="forum"><a href="{% url 'article:index' %}">Forum</a></li>
<li id="subscribe"><a href="{% url 'article:index' %}">Subscribe</a></li>
</ul>
<script type="text/javascript">
(function(){
loc=/\w+/.exec(window.location.pathname)[0];
el=document.getElementById(loc).className='pure-menu-selected';
})();
</script>
</div>
我只是让我的层次结构遵循特定的 URL 模式......在主机地址之后......我有我的主要类别,例如家庭、新闻、分析等,而正则表达式只是将第一个单词拉出位置
**
只需像这样以 jinja 格式添加 url 和 name
**
<ul class="nav navbar-nav"> <li> <a href="{% url 'index' %}">Cities</a> </li> <li> <a href="{% url 'all_cafes' %}">Cafes</a> </li> </ul>