Navigation in django

后端未结

关注

 30  1243

I\'ve just done my first little webapp in django and I love it. I\'m about to start on converting an old production PHP site into django and as part its template, there is a

相关标签:

30条回答

無奈伤痛

2020-11-27 09:39

You do not need an if to do that, have a look at the following code:

tags.py

@register.simple_tag
def active(request, pattern):
    import re
    if re.search(pattern, request.path):
        return 'active'
    return ''

urls.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>

that's it. for implementation details have a look at:
gnuvince.wordpress.com
110j.wordpress.com

0 讨论(0)

盖世英雄少女心

2020-11-27 09:39
Thanks for your answers so far, gents. I've gone for something slightly different again..

In my template:
```
<li{{ link1_active }}>...link...</li>
<li{{ link2_active }}>...link...</li>
<li{{ link3_active }}>...link...</li>
<li{{ link4_active }}>...link...</li>
```
Once I've worked out which page I'm on in the logic (usually in urls.py), I pass class="selected" as part of the context under the right name to the template.

Eg if I'm on the link1 page, I'll append {'link1_active':' class="selected"'} to the context for the template to scoop up and inject.

It appears to work and it's fairly clean.

Edit: to keep HTML out of my controller/view, I've modified this a bit:
```
<li{% if link1_active %} class="selected"{% endif %}>...link...</li>
<li{% if link2_active %} class="selected"{% endif %}>...link...</li>
...
```
It makes the template a little less readable, but I agree, it's better to not push through raw HTML from the urls file.
0 讨论(0)
发布评论:

提交评论
- 加载中...

旧巷少年郎

2020-11-27 09:40

Inspired by this solution, I started to use this approach:

**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 %}

0 讨论(0)

情深已故

2020-11-27 09:44

I used jquery to highlight my navbars. This solution simply adds the css class "active" to the item which fits the css selector.

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

0 讨论(0)

-上瘾入骨i

2020-11-27 09:46

I do it like this:

<a class="tab {% ifequal active_tab "statistics" %}active{% endifequal %}" href="{% url Member.Statistics %}">Statistics</a>

and then all I have to do is in my view add {'active_tab': 'statistics'} to my context dictionary.

If you are using RequestContext you can get current path in your template as:

{{ request.path }}

And in your view:

from django.template import RequestContext

def my_view(request):
    # do something awesome here
    return template.render(RequestContext(request, context_dict))

0 讨论(0)

伪装坚强ぢ

2020-11-27 09:46
This is just a variant of the css solution proposed by Toba above:

Include the following in your base template:
```
<body id="section-{% block section %}home{% endblock %}">
```
Then in your templates that extend the base use:
```
{% block section %}show{% endblock %}
```
You can then use css to highlight the current area based on the body tag (for example if we have a link with an id of nav-home):
```
#section-home a#nav-home{
 font-weight:bold;
}
```
0 讨论(0)
发布评论:

提交评论
- 加载中...