Menú de navegación usando plantillas de Django

Al tratar de trabajar con un menú de navegación trivial usando plantillas de django, tengo problemas para configurar la clase actual en un elemento de menú en particular. Aquí está mi plantilla base:Menú de navegación usando plantillas de Django

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

entonces tengo una 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>

Y ahora en mi home.html, me parece que no puede obtener la corriente de clase para mostrar:

La clase 'actual' no se muestra en la navegación para el elemento apropiado, lo que me permite establecer el contexto visual para un usuario según la página en la que se encuentre.

Fuente

2009-11-27 randombits

He cambiado mi respuesta. Espero eso ayude. – sergzach

No creo que pueda reemplazar un bloque de una plantilla incluida. Mi sugerencia es que necesites replantearte la lógica de tus plantillas. En mi humilde opinión que debe ser algo como esto:

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>

y su home.html debería parecerse

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

Fuente

2009-11-27 02:43:48 ikkebr

La otra manera la gente maneja esto es simplemente usar el cuerpo. clase en el archivo CSS ...

nav.html

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

home.html

{% block bodyclass %}home{% endblock %}

su archivo css

body.home li.home { font-weight: bold; color: blue; } 
body.myaccount li.myaccount { font-weight: bold; color: blue; } 
body.createsr li.createsr { font-weight: bold; color: blue; }

Rompe seco, pero a veces es más simple que la de jugar con un poco de locura plantillas bloqueado.

Fuente

2009-11-27 05:53:52

Puede resolver el problema de duplicación utilizando la etiqueta de plantilla personalizada del menú DRY. Resuelve el problema de la clase de menú activo/inactivo también. Ver la descripción a continuación, por favor. El código fuente: http://djangosnippets.org/snippets/2722/

Descripción de la etiqueta de la plantilla de menú DRY.

Esta es la descripción de una etiqueta de plantilla personalizada para crear el menú DRY. Resuelve el problema de la duplicación de marcado en las plantillas de su sitio. El menú siempre tiene una opción activa y una o varias opciones inactivas.

COMO USAR

definir una estructura de su menú en una plantilla padre:.

{% defmenu "menu1" %} 

{% active %}<span class='active'>{{text}}</span>{% endactive %} 
{% inactive %}<a href='{{url}}'>{{text}}</a>{% endinactive %} 

{% opt "opt1" "/opt1/" %}Go to opt1{% endopt %} 
{% opt "opt2" "/opt2/" %}Go to opt2{% endopt %} 
{% opt "opt3" "/opt3/" %}Go to opt3{% endopt %} 

{% enddefmenu %}

El menú tiene es nombre (primer parámetro de la etiqueta 'defmenu'

primer parámetro de una etiqueta 'opt' es el nombre de la opción del menú. 'texto' dentro de 'activo'/'inactivo' se sustituirá por el texto interno de una etiqueta 'opt' (Ir a optar ...), 'url' indide de 'activo'/'inactivo' será sustituido por el segundo parámetro de una etiqueta de 'opt'

Para generar menú con una opción seleccionada en plantilla hija hacer:

{% menu "menu1" "opt1" %}

Aquí: "menú1" es un nombre del menú que fue definido por la etiqueta 'defmenu', la opción "opt1" está seleccionada.

Resultado del 'menú' de aplicar es la siguiente:

<span class='active'> Go to opt1</span> <a href='"/opt2/"'>Go to opt2</a> <a href='"/opt3/"'>Go to opt3</a>

Fuente

2012-03-21 08:59:16 sergzach

Menú de navegación usando plantillas de Django

Respuesta

Cuestiones relacionadas