Manera seca de aplicar la clase actual a los elementos de navegación en las plantillas django

Question

Digamos que hay navegaciones, nav1, nav2, nav3 y muchos subnav dentro de cada uno de ellos.

Para el efecto CSS, debe aplicar class=current a los controles de navegación actualmente seleccionados.

¿Cuál es la manera seca de hacerlo?

Para los subnav, puede verificar si request.get_full_path es igual que la url a la que se refiere subnav, en la plantilla base.

¿Cómo se puede secar para la navegación también.

Answer 1

En su enfoque, donde agrega una clase para indicar el elemento de navegación activo para el elemento en sí, puede agregar el nombre del elemento de navegación activo en el contexto de su vista. Luego, use algunos javascript para agregar la clase current al elemento apropiado.

Por ejemplo, si usted tiene los siguientes elementos de navegación:

<a id="home" href="#">Home</a> 
<a id="about" href="#">About</a> 

en su opinión, añadir un contexto variable de current para denotar el id del elemento de navegación actual por id:

return render_to_response('template.html', 
          {'current': 'home'}) 

Luego en javascript (jQuery se muestra aquí):

$("#{{ current }}").addClass('current') 

Esto se evaluará como:

$("#home").addClass('current') 

que a su vez aplicará su #current CSS al elemento de inicio.

Otro enfoque es agregar una clase a la etiqueta body que identifica el menú de navegación actualmente activo. Luego, en su CSS, defina los estilos para cada clase de cuerpo que resalte el elemento de navegación apropiado. Luego, su plantilla inserta la variable current directamente en la lista de clases del cuerpo, y no hay necesidad de javascript.

Answer 2

Si ha organizado su proyecto en una plantilla base.html extendida por otras plantillas, p. appname/pagename.html, puede usar un enfoque centrado en la plantilla para resaltar el elemento de navegación activo.

Este enfoque ofrece algunas ventajas de desacoplamiento, que he mencionado en detalle al final de esta respuesta.

He encontrado que este enfoque es muy útil para manejar elementos de navegación amplios que permanecen iguales en la mayoría o la totalidad de un sitio. Probablemente no sea una solución adecuada para elementos de navegación más detallados, como la representación de una lista dinámica de elementos recopilados de su almacén de datos.

En su plantilla base.html, añadir un bloque a cada elemento de navegación, dando nombres únicos a los bloques:

<ul class="nav"> 
    <li class="{% block navbar_class-home %}{% endblock %}"> 
    <a href="#">Home</a> 
    </li> 
    <li class="{% block navbar_class-about %}{% endblock %}"> 
    <a href="#">About</a> 
    </li> 
    <li class="{% block navbar_class-pricing %}{% endblock %}"> 
    <a href="#">Pricing</a> 
    </li> 
</ul> 

En su plantilla appname/pagename.html, si quieres uno de los elementos de navegación a aparecer activo, anular el bloque apropiado usando active como contenido.Por ejemplo, para poner de relieve el "Acerca de" material:

{% block navbar_class-about %} current {% endblock %} 

Cuando se utiliza una vista que hace que esa plantilla, que va a render así:

<ul class="nav"> 
    <li class=""> 
    <a href="#">Home</a> 
    </li> 
    <li class=" current "> 
    <a href="#">About</a> 
    </li> 
    <li class=""> 
    <a href="#">Pricing</a> 
    </li> 
</ul> 

Esto proporciona una representación inicial que doesn' confía en JavaScript. (Puede modificar las clases de barra de navegación en su sitio utilizando JavaScript, si está haciendo una aplicación de una sola página.)

Para muchos (pero no todos) de los casos, esto puede ser una presentación mejor separación de la vista lógica:

• Puede modificar las vistas para adjuntar datos de navegación del sitio al contexto de la plantilla, pero al hacerlo combina la presentación con la capa de visualización y dificulta la creación de aplicaciones reutilizables o la integración de aplicaciones de terceros.

  La vista ya está seleccionando una plantilla con nombre, lo que significa que ya está pasando algo de información relacionada con la navegación a la capa de la plantilla. Eso puede ser todo lo que necesitas.

• Puede usar un procesador de contexto de plantilla para obtener información sobre la vista, pero esto solo mueve el acoplamiento fuerte a otra capa del sistema, en lugar de permanecer dentro de la capa de plantilla.