Menu
CoddyTech

Navegación del sitio

Parte de la sección Conceptos básicos de Django del Journey de Django de Coddy. Lección 23 de 23.

Ahora el sitio tiene cinco páginas con el diseño compartido (About también tiene una plantilla), pero la navegación de base.html muestra tres y nunca indica dónde estás.

Todas las plantillas pueden leer request, la solicitud de la página. Django lo añade al contexto de todas las plantillas porque TEMPLATES en settings.py incluye el procesador de contexto request, una función que añade un nombre a todos los contextos. request.resolver_match describe la ruta que coincidió: url_name es su nombre sin el espacio de nombres ("contact"), y view_name es el nombre completo ("menu:contact"). Un marco puede mostrar una línea solo en una página:

{% if request.resolver_match.url_name == "contact" %}
    <p>We reply within a day.</p>
{% endif %}

La etiqueta también puede colocarse dentro de una etiqueta <a> para añadir un atributo solo en una página:

<a href="/contact/"{% if request.resolver_match.url_name == "contact" %} class="active"{% endif %}>Contact</a>
challenge icon

Desafío

Intermedio

Haz que la barra de navegación muestre dónde estás.

  1. En base.html, haz que los enlaces de navegación sean Inicio, Menú, Bebidas, Horario y Acerca de, en ese orden, cada uno con la dirección construida con {% url %}. En cada página, solo el enlace a esa página tiene class="active".
  2. En style.css, pon en negrita nav a.active.

Haz clic en cada enlace de navegación: solo el enlace de la página en la que estás se pone en negrita.

Pruébalo tú mismo

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>{% block title %}Corner Café{% endblock %}</title>
    <link rel="stylesheet" href="{% static 'menu/style.css' %}">
</head>
<body>
    <nav>
        <a href="{% url 'menu:home' %}">Home</a>
        <a href="{% url 'menu:drinks' %}">Drinks</a>
        <a href="{% url 'menu:about' %}">About</a>
    </nav>
    <main>
        {% block content %}{% endblock %}
    </main>
</body>
</html>
quiz iconPonte a prueba

Esta lección incluye un breve cuestionario. Empieza la lección para responderlo y registrar tu progreso.

Todas las lecciones de Conceptos básicos de Django

Practica por tu cuenta: Playground de Django