Introducción a las plantillas de Django

7 minutos

Las plantillas son archivos de texto que se pueden usar para generar formatos basados en texto, como HTML o XML. Cada plantilla contiene algunos datos estáticos que se comparten en todo el sitio, pero también puede contener marcadores de posición para los datos dinámicos. Las plantillas contienen variables y etiquetas que controlan el comportamiento y lo que aparecerá como la página final.

Vamos a explorar cómo funcionan las plantillas en Django.

Variables

Las variables de una plantilla se comportan de la misma forma que en cualquier otro lenguaje de programación. Podemos usarlas para indicar un valor que se evalúa en tiempo de ejecución.

Django proporciona una manera de mostrar las variables de una plantilla mediante la sintaxis {{ }}. Cualquier variable colocada dentro de las llaves dobles se evalúa para obtener su contenido de texto y, después, se coloca en la plantilla. Si quisiéramos mostrar el nombre del perro, por ejemplo, podríamos usar {{dog.name}}.

La vista pasa variables a una plantilla mediante la función render, que exploraremos en un módulo posterior. Puede pasar valores y otros datos a una plantilla, incluido un conjunto de consultas del ORM de Django. Esto le permite mostrar datos de la base de datos de la aplicación.

Filtros

Los filtros son una excelente manera de controlar cómo aparecen los datos cuando se solicitan en una plantilla. Dado que los filtros ya se han creado, son una manera fácil de dar formato a los datos sin tener que escribir ningún código especial.

Por ejemplo, supongamos que tenemos que imprimir los nombres de las razas de perro y queremos asegurarnos de que la primera letra de cada nombre esté en mayúsculas.

{{ dog.name | capfirst }}

La variable está a la izquierda del símbolo de barra vertical (|) y el filtro está a la derecha. Este es solo uno de los muchos filtros que puede usar para manipular los datos al usar filtros de plantilla de Django.

Etiquetas

Puede usar etiquetas para realizar bucles, crear texto o proporcionar otros tipos de comandos al motor de plantillas. Las etiquetas suelen ser similares a la sintaxis de Python. Sin embargo, dado que se ejecutan dentro de la plantilla (en lugar de ejecutarse en el intérprete de Python), observará algunas pequeñas diferencias en la sintaxis. Puesto que no podemos basarnos en pestañas como lo haríamos con Python, cada instrucción de bloque requerirá un elemento end correspondiente.

Podemos usar instrucciones if para la lógica booleana y bucles for para la iteración. La sintaxis básica de las instrucciones if es similar a la siguiente:

{% if dogs %}
    <h2>There are {{ dogs | length }} ready for adoption!</h2>
{% else %}
    <h2>We have no dogs ready for adoption. Please check back later!</h2>
{% endif %}

Nota:

La instrucción elif se usa de la misma manera que elif en Python.

Del mismo modo, podemos usar un bucle for para mostrar los nombres de todos los perros en una lista:

<ul>
    {% for dog in dogs %}
        <li>{{ dog.name }}</li>
    {% endfor %}
<ul>

Herencia de plantillas

Las plantillas se usan para generar el código HTML que quiere que el usuario vea al usar la aplicación. Normalmente, las páginas de una aplicación comparten una estructura común, por ejemplo con la navegación a la izquierda, un título en la parte superior y una hoja de estilos coherente. Las plantillas de Django admiten estructuras compartidas mediante la herencia.

Creación de una página primaria

Crear una página primaria es igual que crear cualquier plantilla HTML de Django. Debe proporcionar la estructura externa y, después, incluir marcadores de posición {% block %}. Estos marcadores de posición permiten a los elementos secundarios proporcionar el contenido que se va a colocar en esos marcadores de posición.

Vamos a crear una página primaria para importar una hoja de estilos, proporcionar un título predeterminado y proporcionar un encabezado que queremos mostrar en todas las páginas:

<html>
<head>
    <link rel="stylesheet" href="site.css">
    <title>{% block title %}Shelter site{% endblock %}</title>
</head>
<body>
    <h1>Shelter site</h1>
    {% block content %}
    {% endblock %}
</body>
</html>

Creación de una página secundaria

Podemos crear una página secundaria desde el elemento primario mediante la palabra clave extends. Con esta palabra clave, proporcionamos el nombre del archivo HTML de la plantilla primaria. Después, usamos las instrucciones {% block %} adecuadas para agregar el contenido específico de esa página.

{% extends "parent.html" %}

{% block title %}
Welcome to the Shelter site!
{% endblock %}

{% block content %}
Thank you for visiting our site!
{% endblock %}

Cuando se muestra la página, tiene el aspecto siguiente:

<html>
<head>
    <link rel="stylesheet" href="site.css">
    <title>Welcome to the shelter site</title>
</head>
<body>
    <h1>Shelter site</h1>
    Thank you for visiting our site!
</body>
</html>

Observe cómo los marcadores de posición se reemplazan por el contenido de la página secundaria.