Manejo de templates/plantillas en Django

 

Una de las confirguraciones más importantes y con la que trabajaremos bastante en el desarrollo de aplicaciones web, son las plantillas; estas nos van a permitir realizar el diseño visual y definir la forma de interactuar con el usuario.

Django viene con un manejador de plantillas llamado Jinja lo usaremos apara aplicar el sistema de plantillas en nuestro proyecto.

Primero, crearemos una carpeta llamada “templates” (debe llamarse así) dentro de nuestra aplicación, para crear un estilo propio para ella, o también podemos crear la carpeta “templates” en el directorio raíz para aplicar un solo estilo de plantillas para todas las apps. En este caso la crearemos en el directorio raíz.

Dentro de la carpeta templates vamos a crear un archivo llamado base.html donde colocaremos una estructura básica de html 5.

Ahora, vamos a Bootstrap y copiamos los CDNs para aplicarlo a nuestro proyecto https://getbootstrap.com/docs/5.3/getting-started/download/

Este archivo base.html contendrá la plantilla compartida que se mostrará en las demás páginas, pero el contenido es el que va a variar, para ello le diremos que el contenido proviene de otras páginas de la siguiente manera con Jinja:

{% block content %}

 

{% endblock %}

Nos quedará de la siguiente manera:

Teniendo ya la plantilla, procederemos a crear una carpeta “templates” dentro de nuestra aplicación, ya que es esta tendremos todas las páginas que se mostrarán, desde la página de inicio, para actualizar datos y demás; crearemos un archivo index.html y llamaremos a nuestra plantilla de la siguiente manera:

{% extends 'base.html' %}

 

    {% block content %}

        <h1>Hola Mundo!</h1>

    {% endblock %}

{% extends 'base.html' %} con esto llamaremos el archivo donde tenemos la estructura de la plantilla.

{% block content %} {% endblock %} aquí colocaremos el contenido de nuestra página.

 

Ahora tenemos que configurar la función en la vista en el archivo views.py de la aplicación:

Con el método render retornamos la página que queremos mostrar, que en este caso es index.html

from django.shortcuts import render

 

# Create your views here.

def index(request):

    return render(request, 'index.html')

Para que el gestor de plantillas Jinja reconozca donde está nuestra plantilla, debemos decriselo en el archivo settings.py de la carpeta del proyecto principal:

TEMPLATES = [

    {

        'BACKEND': 'django.template.backends.django.DjangoTemplates',

        'DIRS': ['templates'],

        'APP_DIRS': True,

        'OPTIONS': {

            'context_processors': [

                'django.template.context_processors.debug',

                'django.template.context_processors.request',

                'django.contrib.auth.context_processors.auth',

               'django.contrib.messages.context_processors.messages',

            ],

        },

    },

]

'DIRS': ['templanes'], aquí colocamos la dirección donde se encuentra nuestra plantilla, como creamos la carpeta dentro del directorio raíz, sólo colocamos el nombre de la carpeta y Jinja sabrá que se refiere a esa.

Con estas configuraciones, solo resta ejecutar el servidor y listo, ya se aplicarán los estilos y demás que agreguemos al archivo base.html

• En la carpeta templates del directorio raiz colocamos el archivo base.html para tener la estructura de nuestra plantilla.

• Cada aplicación puede tener una carpeta templates, en esa guardarán sus páginas que donde mostrarán los datos.

• En el archivo setting.py agregamos la dirección donde está guardada nuestra plantilla.

• En cada html de las aplicaciones, llamaremos el archivo de nuestra plantilla, donde agregaremos un menú y demás.

Nos veremos para un próximo Shot 🐍🍸