form - django template variable
Django: resalta la navegación según la página actual. (5)
Al expandir la respuesta aceptada de Chris, puede usar el hecho de que el lenguaje de plantilla de Django admite la coincidencia parcial. Entonces, por ejemplo, si tiene URLs como
/people/directory
/people/profiles/joe
/people/profiles/edit
y desea que el elemento principal de navegación "Personas" destaque para todos estos casos, use algo como:
{% if "/people/" in request.path %}class="active"{% endif %}
Estoy construyendo una aplicación web que tiene varias secciones principales. Cada sección tiene varias subsecciones. Tengo un archivo main_nav.html que contiene el navegador para la sección principal. Esto se agrega al archivo HTML basado en el comando {% include ... %} en la plantilla base.html . Además, tengo varios archivos de navegación de sub-sección, cada uno de los cuales se agrega a cualquier página dada con el mismo comando {% include ... %} .
Todas las barras de navegación son muy simples, solo texto con etiquetas <a href...> .
Quiero resaltar el enlace para la sección principal actual y la subsección actual. Como esta aplicación web es bastante grande, esperaba hacerlo de alguna manera sin agregar información específica de la página. Además, quiero que simplemente "funcione" a medida que la aplicación web se expande para incluir más secciones y subsecciones. Por ejemplo, ¿podría hacerse esto mirando la URL real en uso? Esperaba poner esto dentro de los archivos de navegación y no tener que cargar alguna variable o lo que sea dentro de cada vista django.
Entonces, por ejemplo, el navegador se ve así:
(main ->) [Systems][Invoices][Work Orders][Admin]
(system sub-nav ->) [Owner][Billing][Contacts]
Por lo tanto, si estoy en la sección Billing de Systems , quiero que los Systems de enlace estén en negrita y que la Billing del enlace sea negrita (o alguna otra característica destacada).
O:
(main ->) [Systems][Invoices][Work Orders][Admin]
(Work-Orders sub-nav ->) [Create New][Outstanding]
Si estoy en la sección Outstanding de Work Orders de Work Orders , el enlace Work Orders y el enlace Outstanding necesita ser resaltado.
¿Algunas ideas?
Ampliando la respuesta de fabspro, aquí hay una forma de hacerlo basada en las URL de la página y con vanilla js.
<div id="navbar">
<ul>
<li data-link-name="home">
<a href="{% url ''home'' %}"><span>Home</span></a>
</li>
<li data-link-name="parent">
<a href="{% url ''myapp:index'' %}"><span>Parent</span></a>
</li>
<li data-link-name="child1">
<a href="/myapp/child1/grandchild1"><span>Child 1</span></a>
</li>
</ul>
</div>
<script>
var path = location.pathname;
if (path == "/") {
pageName = "home";
} else if (path.startsWith("/myapp/child1")){
pageName = "child1";
} else if (path.startsWith("/myapp")) {
pageName = "parent";
}
document.querySelector("li[data-link-name=''" + pageName + "'']").classList += "active";
</script>
Hay mucha flexibilidad aquí. Por ejemplo, el enlace de Parent arriba se resaltará para todas las URL /child1 , excepto /child1 . El enlace de Child 1 llevaría al usuario a la página /grandchild1 , pero el enlace se mostraría activo para todos los grandchildren en child1 . Cualquier clase de lógica personalizada podría escribirse realmente.
Asumiendo que use render_to_response con RequestContext o use el método de render o las vistas basadas en clases de Django 1.3, tendrá el objeto de solicitud disponible en su plantilla. A partir de ahí, es solo cuestión de simplemente acceder a la ruta actual y compararla con los valores esperados:
<a href="/some/path/to/be/highlighted/"{% if request.path == ''/some/path/to/be/highlighted/'' %} class="active"{% endif %}>Some Link</a>
En Django 1.3, me gusta ahorrar redundancia y usar el operador as para la búsqueda de URL:
{% url ''some_urlpattern_name'' as url %}
<a href="{{ url }}"{% if request.path == url %} class="active"{% endif %}>Some Link</a>
Repita según sea necesario para cada enlace.
Solo pensé en lanzar mi enfoque para que otros lo consideren si lo encuentran en google.
En mis plantillas tengo algo como esto:
{% block pagename %}homepage{% endblock %}
Luego, en mi plantilla principal, algo como esto (para que el nombre de la página de la plantilla heredada esté disponible para la página renderizada):
<span id="_pageName" style="display:none">{% block pagename %}{% endblock %}</span>
Mis enlaces se ven así:
<li data-link-name="homepage"><a href="{% url "pages:home" %}">Home</a></li>
Todo lo que necesita es un poco de javascript para aplicar su clase CSS al enlace correcto cuando se carga la página. El mío se ve así:
$(function() {
var pageName = document.getElementById(''_pageName'');
if (pageName != null) { pageName = pageName.innerHTML; }
else { pageName = ''''; }
if (pageName.length > 0) {
$("li[data-link-name=''" + pageName + "'']").addClass(''active'');
}
});
Muy simple, le da control sobre qué enlace resaltar al agregar un bloque pequeño a sus plantillas.
En otra pregunta similar, he visto las jpwatts de jpwatts , 110j , nivhab y Marcus Whybrow , pero todas parecen carecer de algo: ¿qué pasa con el camino de la raíz? ¿Por qué siempre está activo?
Así que lo hice de otra manera, más fácil, lo que hace que el "controlador" decida por sí mismo y creo que resuelve la mayoría de los grandes problemas.
Aquí está mi etiqueta personalizada:
## myapp_tags.py
@register.simple_tag
def nav_css_class(page_class):
if not page_class:
return ""
else:
return page_class
Entonces, el "controlador" declara que las clases de CSS son necesarias (de hecho, la más importante es que declara su presencia a la plantilla)
## views.py
def ping(request):
context={}
context["nav_ping"] = "active"
return render(request, ''myapp/ping.html'',context)
Y finalmente, lo renderizo en mi barra de navegación:
<!-- sidebar.html -->
{% load myapp_tags %}
...
<a class="{% nav_css_class nav_home %}" href="{% url ''index'' %}">
Accueil
</a>
<a class="{% nav_css_class nav_candidats %}" href="{% url ''candidats'' %}">
Candidats
</a>
<a class="{% nav_css_class nav_ping %}" href="{% url ''ping'' %}">
Ping
</a>
<a class="{% nav_css_class nav_stat %}" href="{% url ''statistiques'' %}">
Statistiques
</a>
...
Por lo tanto, cada página tiene su propio valor nav_css_class para establecer, y si está configurada, la plantilla se representa activa: no hay necesidad de request en el contexto de la plantilla, no hay un enlace URL y no hay más problemas sobre páginas multi-URL o página raíz.