Django - Como añadir la clase active en tu menu automáticamente | Programador Web Valencia

Django - Como añadir la clase active en tu menu automáticamente

2 minutos

Django

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

Menu con active 1 Menu con active 2 Menu con active 3

Esta obra está bajo una Licencia Creative Commons Atribución-NoComercial-SinDerivadas 4.0 Internacional.

Atribución/Reconocimiento-NoComercial-SinDerivados 4.0 Internacional

¿Me invitas a un café? ☕

Puedes hacerlo usando el terminal.

ssh customer@andros.dev -p 5555

Comentarios

{{ comments.length }} comentarios

Nuevo comentario

Nueva replica  {{ formatEllipsisAuthor(replyComment.author) }}

Acepto la política de Protección de Datos.

Escribe el primer comentario

Tal vez también te interese...