Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Navigation menu using Django templates

Tags:

python

django

Trying to work with a trivial navigation menu using django templates, I'm having trouble setting the current class on a particular menu item. Here's my base template:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
 <title>{% block title %}{% endblock %}</title> 
 <meta http-equiv="content-type" content="text/html;charset=utf-8" />
 <link rel="stylesheet" type="text/css" href="/media/css/base.css" />
 <link rel="stylesheet" type="text/css" href="/media/css/login.css" />
 <link rel="stylesheet" href="/site_media/css/style.css" type="text/css" />
 <!--[if lte IE 7]><link rel="stylesheet" type="text/css" href="/media/css/ie.css" /><![endif]-->
</head>
 <body class="{% block bodyclass %}{% endblock %}">
 {% block content %}{% endblock %} 
 {% block footer %}{% endblock %}
</body> 
</html>

Then I have a nav.html:

 <ul id="top">
   <li><a class="{% block home %}{% endblock %}" href="/">Home</a></li>
   <li><a class="{% block myaccount %}{% endblock %}" href="/profile/">My Account</a></li>
   {% if perms.staffing.add_staffrequest %}
    <li><a class="{% block createsr %}{% endblock %}" 
     href="/create/staffrequest/">Staff Request</a></li>
   {% endif %}
  </ul>

And now in my home.html, I can't seem to get the class current to display:

{% extends "base.html" %}
{% block title %}Home Portal{% endblock %}
{% block content %}

<div id="content">
 {% include "nav.html" %}
    {% block home %}current{% endblock %} 
 <div id="intro">
  <p>Hello, {{ user.first_name }}.</p>
  <p>Please create a Staff Request here by filling out the form
  below.</p>
 </div> <!-- end intro -->
 <div id="logout">
  <a href="/accounts/logout" alt="Sign Off" title="Sign Off">Sign Off</a>
 </div>
</div> <!-- end content -->

{% endblock %}

The class 'current' isn't showing up in navigation for the appropriate element, letting me set visual context for a user depending what page they're on.

like image 394
randombits Avatar asked Nov 27 '09 02:11

randombits


1 Answers

I don't think you can replace a block from an included template. My suggestion is that you need to rethink the logic of your templates. IMHO it should be something like this:

base.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
 <title>{% block title %}{% endblock %}</title> 
 <meta http-equiv="content-type" content="text/html;charset=utf-8" />
  <link rel="stylesheet" type="text/css" href="/media/css/base.css" />
  <link rel="stylesheet" type="text/css" href="/media/css/login.css" />
  <link rel="stylesheet" href="/site_media/css/style.css" type="text/css" />
  <!--[if lte IE 7]><link rel="stylesheet" type="text/css" href="/media/css/ie.css" /><![endif]-->
 </head>
  <body class="{% block bodyclass %}{% endblock %}">
  {% block content %}

     <div id="content">

         {% block navigation %}
             <ul id="top">
                <li><a class="{% block home %}{% endblock %}" href="/">Home</a></li>
                <li><a class="{% block myaccount %}{% endblock %}" href="/profile/">My Account</a></li>
                {% if perms.staffing.add_staffrequest %}
                 <li><a class="{% block createsr %}{% endblock %}" 
                  href="/create/staffrequest/">Staff Request</a></li>
                {% endif %}
             </ul>
         {% endblock %}

         {% block real_content %}
         <div id="intro">
             <p>Hello, {{ user.first_name }}.</p>
             <p>Please create a Staff Request here by filling out the form below.</p>
          </div> <!-- end intro -->

          <div id="logout">
           <a href="/accounts/logout" alt="Sign Off" title="Sign Off">Sign Off</a>
          </div>
          {% endblock %}

     </div> <!-- end content -->


  {% endblock %} 
  {% block footer %}{% endblock %}
 </body> 
 </html>

and your home.html should look like

{% extends "base.html" %}
{% block title %}Home Portal{% endblock %}

{% block home %}current{% endblock %}


{% block real_content %}

<div id="content">

 <div id="intro">
  <p>Hello, {{ user.first_name }}.</p>
  <p>Please create a Staff Request here by filling out the form
  below.</p>
 </div> <!-- end intro -->
 <div id="logout">
  <a href="/accounts/logout" alt="Sign Off" title="Sign Off">Sign Off</a>
 </div>
</div> <!-- end content -->

{% endblock %}
like image 128
ikkebr Avatar answered Nov 06 '22 14:11

ikkebr