Herencia de Plantillas y Bootstrap en Django

En esta lección, aprenderemos cómo utilizar la herencia de plantillas en Django para crear un diseño consistente en nuestras páginas web y cómo integrar Bootstrap para mejorar la apariencia de la interfaz de usuario.

Conceptos Clave

Herencia de Plantillas

En Django el sistema de herencia de plantillas es una técnica que permite a los desarrolladores crear una plantilla base que contiene elementos comunes a todas las páginas web de un sitio. Luego, se pueden crear plantillas secundarias que heredan de la plantilla base y agregan elementos específicos para cada página web.

Para usar la herencia de plantillas en Django, primero debes crear una plantilla base. Esta plantilla debe contener todo lo que es común a todas las páginas web de tu sitio, como el encabezado y el pie de página. Luego, puedes crear plantillas secundarias que heredan de la plantilla base y agregan elementos específicos para cada página web.

Para heredar una plantilla en Django, debes usar la directiva {% extends %}. Esta directiva le dice a Django que la plantilla actual hereda de otra plantilla. La plantilla actual puede invalidar bloques de contenido definidos en la plantilla base usando la directiva {% block %}.

En un sistema de tareas creado con Django, puedes heredar cualquier cosa que sea común a todas las páginas web del sitio. Por ejemplo, puedes heredar el encabezado y el pie de página, así como cualquier estilo CSS o JavaScript utilizado en todo el sitio.

También puedes agregar elementos específicos para cada página web, como el título y el contenido de la tarea.

Bootstrap.

Bootstrap es un marco de diseño de código abierto que proporciona estilos y componentes predefinidos para mejorar la apariencia y la usabilidad de un sitio web.

Vamos a continuar donde nos quedamos en el proyecto anterior,

En este punto vamos a crear un archivo base que permita heredar a las demás plantillas parámetros generales, para este ejemplo.
Configuraremos un bloque title que será remplazado por el título del sitio de cada plantilla que herede de la plantilla base.
Finalmente agregamos el bloque de contenido donde aparecerá toda nuestra inforamción.
Un punto adicional es utilizar una instalación conocida como CDN del Framework de frontend Bootstrap

Ejemplo de Plantilla Base.

<!DOCTYPE html>
<html>
<head>
    <title>{% block title %}Mi Sitio Web{% endblock %}</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css">
</head>
<body>
    <div class="container">
        <header>
            <h1>Mi Sitio Web</h1>
        </header>
        <nav>
            <ul class="nav">
                <li class="nav-item"><a class="nav-link" href="/">Inicio</a></li>
                <li class="nav-item"><a class="nav-link" href="/tareas/">Tareas</a></li>
            </ul>
        </nav>
        <main>
            {% block content %}
            {% endblock %}
        </main>
    </div>
</body>
</html>

Plantilla que hereda de base.html para la página de inicio (inicio.html).

Ahora creamos una plantilla my básica que va a ser nuestra plantilla de Inicio, es decir el lugar donde llegarán los usuarios con sus peticiones cuando ingresen a nuestro proyecto.

Las plantillas que hereden de base deben adoptar esta estructura base, de esa forma cada elemento que se encuentre en el archivo base será heredado a las plantillas hijas sin la necesidad de copiar y pegar código como una mala práctica.

# Plantilla para la página de inicio que hereda de "base.html"
{% extends "base.html" %}

{% block title %}Inicio - Mi Sitio Web{% endblock %}

{% block content %}
    <h2>Bienvenido a la página de inicio</h2>
    <p>Esta es la página de inicio de mi sitio web.</p>
{% endblock %}

Es necesario modificar un poco los archivos views.py y urls.py de la aplicación y el archivo urls.py del proyecto para hacer uso de las nuevas plantillas.

# En el archivo urls.py de la aplicación Django
from django.urls import path
from . import views

urlpatterns = [
    path('', views.lista_tareas2, name='inicio'),
    path('tareas/', views.lista_tareas, name='lista_tareas'),
    path('tareas_2/', views.lista_tareas2, name='lista_tareas'),
]

# Vista en Django para mostrar la lista de tareas
from django.shortcuts import render
from .models import Tarea

def lista_tareas(request):
    tareas = Tarea.objects.all()
    return render(request, 'lista_tareas.html', {'lista_tareas': tareas})

def lista_tareas2(request):
    tareas = Tarea.objects.all()
    return render(request, 'inicio.html', {'lista_tareas': tareas})

def inicio(request):
    return render(request, 'inicio.html', 'inicio' )

# urls.py del proyecto
from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('tarea.urls')),
]

Con estos cambios podemos correr el servidor y observar los cambios realizados.

Explicación

En este ejemplo, hemos creado una plantilla base llamada base.html que define la estructura común de todas las páginas. Luego, creamos una plantilla específica para la página de inicio que hereda de base.html. Utilizamos Bootstrap para mejorar el aspecto de la página.

Actividad Práctica

Crea una plantilla base llamada base.html que incluya un menú de navegación y un pie de página.
Crea una plantilla llamada lista_notas.html que herede de base.html y muestre una lista de notas utilizando Bootstrap.

Solución

Creación de Plantillas Base y Específica en Django

Resumen:

En esta actividad práctica, se crearán plantillas en Django. Primero, se creará una plantilla base llamada base.html que contendrá un menú de navegación y un pie de página. Luego, se creará una plantilla específica llamada lista_notas.html que heredará de base.html y mostrará una lista de notas utilizando Bootstrap.

Código:

Crear la Plantilla Base base.html:

En la carpeta de plantillas de tu aplicación (artículos en este ejemplo), crea un archivo llamado base.html con el siguiente contenido:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>{% block title %}Título por Defecto{% endblock %}</title>
    <!-- Agregar enlaces a Bootstrap y otros recursos aquí -->
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <a class="navbar-brand" href="#">Mi Aplicación de Notas</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav">
                <li class="nav-item active">
                    <a class="nav-link" href="#">Inicio <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Notas</a>
                </li>
                <!-- Agregar más elementos de menú si es necesario -->
            </ul>
        </div>
    </nav>

    <div class="container">
        {% block content %}{% endblock %}
    </div>

    <footer class="footer mt-auto py-3">
        <div class="container">
            <span class="text-muted">© 2023 Mi Aplicación de Notas</span>
        </div>
    </footer>
    <!-- Agregar enlaces a Bootstrap y otros recursos aquí -->
</body>
</html>

Crear la Plantilla Específica lista_notas.html:

Crea un archivo llamado lista_notas.html en la misma carpeta de plantillas de tu aplicación (“artículos” en este ejemplo). Esta plantilla heredará de base.html y mostrará una lista de notas utilizando Bootstrap:


    {% extends "base.html" %}

    {% block title %}Lista de Notas{% endblock %}

    {% block content %}
        <h1>Lista de Notas</h1>
        <ul class="list-group">
            {% for nota in notas %}
                <li class="list-group-item">{{ nota.titulo }}</li>
                <p class="list-group-item">{{ nota.contenido }}</p>
            {% endfor %}
        </ul>
    {% endblock %}

Explicación:

Hemos creado una plantilla base llamada “base.html” que incluye un menú de navegación en la parte superior y un pie de página en la parte inferior. Esta plantilla utiliza Bootstrap para el estilo del menú y el pie de página.
Luego, hemos creado una plantilla específica llamada “lista_notas.html” que hereda de “base.html” utilizando {% extends “base.html” %}. Esto significa que “lista_notas.html” incluirá todo el contenido de “base.html”.
En “lista_notas.html,” hemos definido bloques {% block … %} para personalizar el título de la página (“Lista de Notas”) y el contenido de la lista de notas. Dentro del bloque de contenido, iteramos sobre las notas y las mostramos utilizando clases de Bootstrap para dar formato a la lista.

¿Qué aprendimos?

Aprendimos cómo utilizar la herencia de plantillas en Django para crear un diseño consistente en nuestras páginas web y cómo integrar Bootstrap para mejorar la apariencia de la interfaz de usuario. Esta práctica facilitará la creación de páginas similares en tu aplicación Django y mejorará la experiencia del usuario.