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.

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

Todas las plantillas pueden leer request, la solicitud que se está atendiendo, porque settings.py incluye el procesador de contexto request en TEMPLATES. request.resolver_match describe la ruta que coincidió: url_name es su nombre sin el espacio de nombres ("contact"), y view_name el nombre completo ("menu:contact"). Una plantilla puede mostrar una línea en una sola página:

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

Desafío

Intermedio

En base.html, crea los enlaces de navegación Home, Menu, Drinks, Hours y About, en ese orden, y construye cada dirección con {% url %}. En cada página, solo el enlace a esa página debe tener class="active".

Aplica un estilo a nav a.active en style.css, como texto en negrita; después, pulsa Ejecutar y navega haciendo clic en los enlaces.

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