Django - using a common header with some dynamic elements

Question

Django - using a common header with some dynamic elements

I plan to create a site using django that will have a common heading throughout the website. I read the django documentation on template inheritance, but I cannot find an elegant solution for the "dynamic" elements in my header.

For example, the title on the website will include tabs, for example, http://www.google.com/ (where it has "Internet", Images ", etc.), where the selected tab will describe your current location on website.

Using django template inheritance, it looks like you will create a basic template like this:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <link rel="stylesheet" href="style.css" />
    <title>{% block title %}My Amazing Site{% endblock %}</title>
</head>
<body>
<div id="header">
    {% block header %}
     .... html to create tabs ...
    {% endblock header %}
</div>

and then on all my other pages I would do the following:

{% extends "base.html" %}
{% block header % }
 .... html to create tabs with one tab "selected" ...
{% endblock header %}

, HTML , . , , HTML .

, , :

1 - , , , HTML, : {% block header%} {% mycustomtag abc%} {% endblock header%}

, HTML python .

2 - X base.html, . , .

, , X- HTML-, - .

3 - javascript (, jquery), , "" .

, , javascript. , HTML- HTML.

?

!

+3

javascript python django

lawdawg 22 . '09 23:20

3

Alasdair · Answer 1 · 2009-09-23T00:47:22+0000

, base.html.

<ul>
    <li>Tab 1</li>
    <li>Tab 2</li>
    ...
</ul>

li.

<ul>
    <li class="{% block class_tab1 %}inactive{% endblock %}">Tab 1</li>
    <li class="{% block class_tab2 %}inactive{% endblock %}">Tab 2</li>
    <li class="{% block class_tab3 %}inactive{% endblock %}">Tab 3</li>
    ...
</ul>

, 1:

{% extends "base.html" %}

{% block class_tab1 %}active{% endblock %}
...

, html, 1,:

<ul>
    <li class="active">Tab 1</li>
    <li class="inactive">Tab 2</li>
    <li class="inactive">Tab 3</li>
    ...
</ul>

CSS li .active, .

vikingosegundo · Answer 2 · 2009-09-23T00:22:03+0000

# 1 - .

, "" "".

class Category(models.Model):
    title           = models.CharField(_("Name"), max_length=200)
    introduction    = models.TextField(blank=True, null=True)
    slug            = models.SlugField(help_text=_("Used for URLs"))
    sort_order      = models.IntegerField(_("Sortierung"))

class Article(models.Model):
    title = models.CharField(_("Full Name"), max_length=255)
    slug = models.SlugField(_("Slug Name"), unique=True, help_text=_("This is a short, descriptive name of article that will be used in the URL link to this item"))
    text = models.TextField(_("Text of Article"), blank=True, null=True)
    category = models.ForeignKey(Category)

, :

@render_to('cat_index.html')
def category_view(request,string):

    cat = Category.objects.get(slug=string)
    articles = Article.objects.filter(category = cat).order_by('date')
    return {
             'articles':articles,
             'category':cat,
             }

(: annoying render_to -decorator - , render_to_response)

include_tag :

@register.inclusion_tag('snippets/navigation.html')
def navigation(cat=None):
    return {'cats':Category.objects.order_by('sort_order'),
            'cat':cat
            }

( base.html)

{% navigation category %}

inclusions_tags (snippets/navigation.html) cats, cat,

    <ul>    
      {% for c in cats %}
          <li{% ifequal c cat %} class="active"{% endifequal %}>
              <a href="{{c|url}}">{{ c }}</a>
          </li>
      {% endfor %}
    </ul>

T. Stone · Answer 3 · 2009-09-23T01:41:37+0000

, .

, 3 . , , , . , , .

1 -

( ), ( ). , 1 : . ...

// In base.html...

<li class="tab {% is_tab_active r'^/cars/' %}"><a>Cars</a></li>
<li class="tab {% is_tab_active r'^/trucks/' %}"><a>Trucks</a></li>

. , css "active", "" ( - , CSS).

. , urls.py, .

2 - CSS

[body] , , , CSS , . :

body.cars_section .navigation #cars_tab { color: #00000; }
body.truck_section .navigation #trucks_tab { color: #00000; }

...

<body class="{% block category %}{% endblock %}">

...

<ul class="navigation">
    <li id="cars_tab"><a>Cars</a></li>
    <li id="trucks_tab"><a>Trucks</a></li>

( CSS)...

{% extends "base.html" %}

...

{% block category %}cars_section{% endblock %}

3 - Bloated Middleware

Django Middleware, , . , , .

Django - using a common header with some dynamic elements

More articles: