Es bastante engorroso tener que añadir la clase active en cada página, en el enlace adecuado de tu menú. El recurso fácil de cualquier programador es usar Javascript, pero… ¿es necesario?. Si estamos con Django, usemos sus herramientas. La solución es realmente sencillo. Tal solo deberemos crear un filtro personalizado y aplicarlo en el enlace. Dejo a continuación un pequeño tutorial.
Paso 1
Dentro de nuestra aplicación (a la altura de migrations, templates, views…), creamos la carpeta templatetags. Y dentro de ella el archivo menu.py. Introducimos el siguiente código.
import re
from django import template
from django.urls import reverse, NoReverseMatch
register = template.Library()
@register.simple_tag(takes_context=True)
def active(context, pattern_or_urlname):
try:
pattern = '^' + reverse(pattern_or_urlname)
except NoReverseMatch:
pattern = pattern_or_urlname
path = context['request'].path
if re.search(pattern, path):
return 'active'
return ''
Ya tenemos nuestro primer filtro personalizado de Django. Ahora lo utilizaremos en nuestro menú.
Paso 2
En la plantilla le diremos que queremos usar nuestro filtro.
{% load menu %}
<html>
<body>
</body>
</html>
Paso 3
Añadimos nuestros enlaces, y lo acompañamos de un active dentro de un atributo de clase. Siempre con el mismo nombre de la ruta. Aquí esta la magia. Si estás en ese enlace, añadirá la clase.
{% load menu %}
<html>
<body>
<ul>
<li>
<a class="{% active 'prepare trip' %}" href="{% url 'prepare trip' %}">Planear viaje</a>
</li>
<li>
<a class="{% active 'search' %}" href="{% url 'search' %}">Buscar viajeros</a>
</li>
<li>
<a class="{% active 'blog' %}" href="{% url 'blog' %}">Blog</a>
</li>
</ul>
</body>
</html>
Paso 4
Para terminar, solo nos queda insertar un poco de CSS y listo.
{% load menu %}
<html>
<head>
<style>
.active {
color: blue;
}
</style>
</head>
<body>
<ul>
<li>
<a class="{% active 'prepare trip' %}" href="{% url 'prepare trip' %}">Planear viaje</a>
</li>
<li>
<a class="{% active 'search' %}" href="{% url 'search' %}">Buscar viajeros</a>
</li>
<li>
<a class="{% active 'blog' %}" href="{% url 'blog' %}">Blog</a>
</li>
</ul>
</body>
</html>
Resultado
{{ comments.length }} comentarios