Plantillas Django

Las plantillas de Django son archivos HTML con sintaxis adicional para permitir el uso de variables, bucles y otras estructuras de control. Cuando una vista llama a la función render (), pasa datos a la plantilla y la plantilla genera el HTML para mostrárselo al usuario. Este es un concepto muy similar en muchos frameworks web MVC y MVT. Django hace uso de un backend incorporado para su propio sistema de plantillas que se llama Django Template Language o DTL. Dado que este es el sistema de plantillas predeterminado con el que Django se envía y utiliza, ese es el que aprenderemos en este tutorial de plantillas de Django.

Sintaxis de la plantilla de Django

La sintaxis de las plantillas de Django tiene tres partes. Estas son variables, etiquetas y variables con filtros.

{{ variable }}El valor de una variable se muestra cuando el nombre de la variable se usa dentro de llaves dobles. Esta es una forma de interpolación.
{% tag %} Las etiquetas de plantilla están encerradas entre llaves con signos de porcentaje y se utilizan para crear bucles, si no, elementos estructurales, así como para cierta lógica de control.
{{ variable|filter }}En las plantillas de Django, una variable también puede tener un carácter de tubería después de ella para usar un filtro de plantilla. Los filtros de plantilla toman una cadena como entrada y devuelven una cadena como salida.

Los filtros de plantilla funcionan de manera similar a la tubería en los scripts de shell. Los filtros se utilizan para formatos de datos, como establecer texto en título o en mayúsculas.

Ejemplo de variable de plantilla

Como ejemplo del uso de variables en una plantilla, podemos ver la plantilla dog_detail.html que creamos en el último tutorial. Dependiendo de la URL que visitemos, se pasa un perro diferente a la plantilla. Aquí hay una etiqueta h2 y usamos las llaves dobles para representar el atributo de nombre del perro. El resultado es la cadena Winnie dentro de una etiqueta h2.
djangodogs / templates / dog_detail.html

1
<h2>{{ dog.name }}</h2>

resultado

<h2> Winnie </h2>

Cómo recorrer los datos en las plantillas de Django

Si tiene varios elementos que necesita mostrar, necesitará la capacidad de recorrer la colección para mostrar cada elemento. Este suele ser el caso en una plantilla de inicio. En nuestro caso, tenemos varios Perros que queremos mostrar al visitar la página de inicio. En este ejemplo, tenemos un conjunto de consultas de instancias de Dog en la variable dogsque la vista de inicio está pasando a la plantilla. Usamos la etiqueta de plantilla para recorrer cada instancia. Tenga en cuenta que la etiqueta al final de este fragmento es necesaria para marcar el final del ciclo. Si lo deja, obtendrá un error. Dentro del ciclo, podemos usar la variable, y aquí, estamos representando el nombre del perro usando una etiqueta h1. El resultado es una etiqueta h1 para cada perro que está en la base de datos, cada uno con su nombre.for dogendfordogdog.name

djangodogs / templates / home.html

1
2
3
4
5
<body>
{% for dog in dogs %}
    <h1>{{ dog.name }}</h1>
{% endfor %}
</body>

resultado

<h1> Winnie </h1>

<h1> Mosely </h1>

<h1> Bella </h1>

Etiqueta de plantilla de URL

Algunas etiquetas de plantilla no tienen una etiqueta final correspondiente y solo representan una cadena en su lugar y la urletiqueta es un ejemplo de esto. Esta etiqueta toma el nombre del patrón de URL como argumento y devuelve la ruta a ese patrón. Aquí es donde el argumento de nombre de un patrón de URL se vuelve útil. En el código siguiente, la etiqueta url muestra la ruta a la vista de detalles del perro para cualquier identificación que se proporcione. Entonces, dependiendo de la identificación proporcionada, la url puede traducirse a / dogs / 1 /, / dogs / 2 /, / dogs / 3 /, etc. Es posible que se pregunte por qué se usa la etiqueta url en lugar de simplemente codificar el href para la vista de inicio y para los enlaces de detalles del perro. Lo que proporciona la etiqueta de URL es un poco de protección para el futuro. Al usar la etiqueta url en lugar de la codificación rígida, podemos decidir cambiar un patrón de URL más adelante y los enlaces que usamos en nuestras plantillas seguirán funcionando.

1
2
3
4
5
6
7
<body>
{% for dog in dogs %}
    <a href="{% url 'dog_detail' dog.id %}">
        <h1>{{ dog.name|capfirst }}</h1>
    </a>
{% endfor %}
</body>

resultado

<cuerpo>

    <a href="/dogs/1/">
        <h1> Winnie </h1>
    </a>

    <a href="/dogs/2/">
        <h1> Mosely </h1>
    </a>

    <a href="/dogs/3/">
        <h1> Bella </h1>
    </a>

</body>

Filtros de plantilla

Los filtros de plantilla permiten el formato de salida para las variables que se pasan a las plantillas para que se representen en la página. Ahora, en nuestro caso, ya habíamos agregado algunos perros a la base de datos con la primera letra en mayúscula. Entonces, cuando mostramos los perros, vemos que su nombre tiene una letra mayúscula que se muestra arriba. Un filtro de plantilla es simplemente una cadena después del carácter de barra vertical. Podemos hacer que los nombres de los perros sean todos en minúsculas con el filtro de plantilla inferior. He aquí un ejemplo de eso.

1
2
3
4
5
6
7
8
<body>
{% for dog in dogs %}
    <a href="{% url 'dog_detail' dog.id %}">
        <h1>{{ dog.name|lower }}</h1>
    </a>
{% endfor %}
</body>
</body>

resultado

<cuerpo>

    <a href="/dogs/1/">
        <h1> winnie </h1>
    </a>

    <a href="/dogs/2/">
        <h1> mosely </h1>
    </a>

    <a href="/dogs/3/">
        <h1> bella </h1>
    </a>

</body>

Probemos con otro ejemplo de filtro de plantilla. Esta vez usaremos el filtro superior, que debería formatear nuestras variables en mayúsculas.

1
2
3
4
5
6
7
8
<body>
{% for dog in dogs %}
    <a href="{% url 'dog_detail' dog.id %}">
        <h1>{{ dog.name|upper }}</h1>
    </a>
{% endfor %}
</body>
</body>

resultado

<cuerpo>

    <a href="/dogs/1/">
        <h1> WINNIE </h1>
    </a>

    <a href="/dogs/2/">
        <h1> MOSAMENTE </h1>
    </a>

    <a href="/dogs/3/">
        <h1> BELLA </h1>
    </a>

</body>

Hay muchos filtros de plantilla disponibles en Django. Algunos de ellos incluyen add, addedlashes, capfirst, center, cut, date, default, default_if_none, dictsort, dictsortreversed, divisibleby, escape, escapejs ,format, first, floatformat, force_escape, get_digit, iriencode, join, json_script, last, length, length_is, saltos de línea, linebreaksbr, números de lino, ljust, más bajo, make_list, phone2numeric, pluralizar, pprint, aleatorio, rjust, seguro, safeseq, rebanar, slugify, formato de cadena, striptags, tid, tiempo desde, tiempo hasta, título, truncatechars, truncatechars_html, truncar palabras truncatewords_html, unordered_list, upper, urlencode, urlize, urlizetrunc, wordcount, wordwrap y yesno. Para aprender cómo funcionan todos estos, puede consultar la referencia de filtros y etiquetas de plantilla de Django.

Herencia de plantilla de Django

La herencia de plantillas es una característica de las plantillas de Django que usan las etiquetas extendsy block. Nunca es bueno repetir el código una y otra vez si no es necesario y en Django, podemos usar una plantilla base con los elementos que usará cada plantilla, como metaetiquetas, cualquier CSS o JavaScript global, u otros elementos estructurales. que no queremos volver a declarar en cada plantilla. En este ejemplo, estamos definiendo un código HTML estándar en el archivo de plantilla llamado base.html. En su etiqueta de cuerpo, tenemos una etiqueta de plantilla de bloque para proporcionar un lugar para que las plantillas secundarias definan su contenido único.

base.html

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html>
  <head>
    <!-- meta tags, etc.. -->
  </head>
  <body>
    {% block content %} 
    
    {% endblock content %}
  </body>
</html>

Ahora podemos ajustar la plantilla de inicio y hacer uso de la extendsetiqueta con base.html como parámetro. Esto configura la plantilla de inicio para usar la plantilla base.html como su padre. La declaración de extensión tiene que ser la primera línea de la plantilla. Así es como nos aseguramos de que cualquier etiqueta de bloqueo en esta plantilla se use para indicar un área de contenido que anulará y completará las secciones del padre. En el ejemplo, anulamos el bloque llamado contenido. Cuando se renderice, la plantilla de inicio tendrá el HTML de la plantilla base y su etiqueta de cuerpo se rellenará con lo que esté colocado en el bloque de contenido. Aquí está en acción.

home.html

1
2
3
4
5
6
7
8
9
{% extends 'base.html' %}
 
{% block content %}
    {% for dog in dogs %}
        <a href="{% url 'dog_detail' dog.id %}">
            <h1>{{ dog.name }}</h1>
        </a>
    {% endfor %}
{% endblock content %}

resultado

<! DOCTYPE html>
<html>
  <cabeza>
    <! - metaetiquetas, etc. ->
  </head>
  <cuerpo>
    
        <a href="/dogs/1/">
            <h1> Winnie </h1>
        </a>
    
        <a href="/dogs/2/">
            <h1> Mosely </h1>
        </a>
    
        <a href="/dogs/3/">
            <h1> Bella </h1>
        </a>
    
  </body>
</html>

Usando Bootstrap en la plantilla de Django

Ahora que sabemos cómo implementar una plantilla base.html que puede contener cualquier código repetitivo repetitivo, agreguemos un poco de estilo Bootstrap a nuestros ejemplos para que se vean un poco mejor que el HTML sin formato. Primero, podemos agregar el marcado de la plantilla de inicio para bootstrap en el archivo base.html. Tenga en cuenta las etiquetas block y endblock que muestran dónde se insertará el contenido dinámico.

base.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!doctype html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
          integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
 
    <title>Hello, world!</title>
</head>
<body class="container mt-4">
{% block content %}
 
{% endblock content %}
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
        integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
        crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
        integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
        crossorigin="anonymous"></script>
</body>
</html>

Ahora, en nuestro archivo home.html, podemos usar esa extendsetiqueta para heredar todo el marcado del archivo base.html. Dado que ese archivo tiene enlaces a Bootstrap CSS CDN, podemos hacer uso de las clases Bootstrap en nuestros elementos Html en la plantilla home.html.

home.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
{% extends 'base.html' %}
 
{% block content %}
    {% for dog in dogs %}
        <div class="card mb-4">
            <div class="card-body">
                <h4 class="card-title">{{ dog.name }}</h4>
                <h6 class="card-subtitle mb-2 text-muted">Dog number {{ dog.id }}</h6>
                <p class="card-text">{{ dog.name }} is a wonderful dog!</p>
                <a href="{% url 'dog_detail' dog.id %}" class="btn btn-primary">Learn more about {{ dog.name }}</a>
            </div>
        </div>
    {% endfor %}
{% endblock content %}

plantilla de bootstrap django

También podemos actualizar la plantilla dog_detail.html para que al ver un perro individual, el estilo se vea bien.

dog_detail.html

1
2
3
4
5
6
7
8
9
{% extends 'base.html' %}
 
{% block content %}
    <div class="jumbotron">
        <h1 class="display-4">Hello, {{ dog.name }}!</h1>
        <p class="lead">The breed of this dog is {{ dog.breed }}</p>
        <p>Description: {{ dog.description }}</p>
    </div>
{% endblock content %}

vista de detalle de la plantilla de django

Cómo agregar archivos estáticos

Tenemos un sitio web decente para perros pequeños en este momento, pero aún no hemos hablado sobre cómo agregar nuestros propios archivos CSS, imágenes o JavaScript. Estos son los que se conocen como archivos estáticos en el ámbito de un proyecto web. En cualquier aplicación basada en web, deberá incluir archivos estáticos. Entonces, para incluir archivos estáticos en nuestro proyecto Django, podemos agregar una nueva carpeta en el directorio raíz del proyecto llamado static. Dentro de esa carpeta, podemos crear más carpetas según sea necesario. En la mayoría de los escenarios, tendrá una carpeta para sus imágenes, una para sus archivos CSS y otra para incluir cualquier archivo JavaScript.

Configuración de STATICFILES_DIRS

Los archivos estáticos se pueden configurar por aplicación y también por proyecto. En nuestro caso, veremos cómo agregar archivos estáticos al proyecto. De esta manera, esos archivos estáticos se pueden compartir entre aplicaciones si lo desea. Para configurar esto, vamos a djangotutorial / settings.py y agregamos el siguiente código.

1
2
3
4
5
STATIC_URL = '/static/'
 
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'static')
]

Con la configuración anterior en su lugar, podremos acceder fácilmente a los archivos y carpetas en el directorio estático.

archivos estáticos de django para plantillas

{% load static%}

Ahora, ajustemos el archivo base.html del que heredan todos los demás archivos de plantilla. Podemos eliminar los enlaces CDN que teníamos anteriormente y poner referencias a nuestros archivos estáticos en su lugar.

base.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!doctype html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 
    {% load static %}
    <link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
 
    <link rel="stylesheet" href="{% static 'css/main.css' %}">
 
    <title>Hello, world!</title>
</head>
<body class="container mt-4">
{% block content %}
 
{% endblock content %}
</body>
</html>

home.html
En el archivo home.html, también usamos la palabra clave estática para cargar una imagen.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{% extends 'base.html' %}
 
{% block content %}
    {% load static %}
    <img class="img-custom" src="{% static "images/dog.png" %}" alt="My image">
    {% for dog in dogs %}
        <div class="card mb-4">
            <div class="card-body">
                <h4 class="card-title">{{ dog.name }}</h4>
                <h6 class="card-subtitle mb-2 text-muted">Dog number {{ dog.id }}</h6>
                <p class="card-text">{{ dog.name }} is a wonderful dog!</p>
                <a href="{% url 'dog_detail' dog.id %}" class="btn btn-primary">Learn more about {{ dog.name }}</a>
            </div>
        </div>
    {% endfor %}
{% endblock content %}

resultado

<! doctype html>
<html lang = "en">
<cabeza>
    <! - Metaetiquetas requeridas ->
    <meta charset = "utf-8">
    <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">

    <link rel = "stylesheet" href = "/ static / css / bootstrap.min.css">

    <link rel = "stylesheet" href = "/ static / css / main.css">

    <title> ¡Hola, mundo! </title>
</head>
<body class = "contenedor mt-4">
 
    <img class = "img-custom" src = "/ static / images / dog.png" alt = "Mi imagen">
    
        <div class = "tarjeta mb-4">
            <div class = "card-body">
                <h4 class = "card-title"> Winnie </h4>
                <h6 class = "card-subtitle mb-2 text-muted"> Perro número 1 </h6>
                <p class = "card-text"> ¡Winnie es un perro maravilloso! </p>
                <a href="/dogs/1/" class="btn btn-primary"> Más información sobre Winnie </a>
            </div>
        </div>
    
        <div class = "tarjeta mb-4">
            <div class = "card-body">
                <h4 class = "card-title"> Mosely </h4>
                <h6 class = "card-subtitle mb-2 text-muted"> Perro número 2 </h6>
                <p class = "card-text"> ¡Mosely es un perro maravilloso! </p>
                <a href="/dogs/2/" class="btn btn-primary"> Más información sobre Mosely </a>
            </div>
        </div>
    
        <div class = "tarjeta mb-4">
            <div class = "card-body">
                <h4 class = "card-title"> Bella </h4>
                <h6 class = "card-subtitle mb-2 text-muted"> Perro número 3 </h6>
                <p class = "card-text"> ¡Bella es un perro maravilloso! </p>
                <a href="/dogs/3/" class="btn btn-primary"> Más información sobre Bella </a>
            </div>
        </div>

</body>
</html>

resultados del archivo estático django

Resumen de la plantilla de Django

En este tutorial, echamos un vistazo al lenguaje de plantillas de Django, que es el propio sistema de plantillas de Django. Hay otros sistemas de plantillas de terceros disponibles para trabajar con Django, pero probablemente sea mejor usar DTL ya que es el estándar para Django. El uso de DTL hará que sea mucho más fácil crear aplicaciones que se puedan conectar a otros proyectos y lo ayudará a crear más plantillas reutilizables.

Header Ads Widget

Plantillas Django

Sintaxis de la plantilla de Django

Ejemplo de variable de plantilla

Cómo recorrer los datos en las plantillas de Django

Etiqueta de plantilla de URL

Filtros de plantilla

Herencia de plantilla de Django

Usando Bootstrap en la plantilla de Django

Cómo agregar archivos estáticos

Configuración de STATICFILES_DIRS

{% load static%}

Resumen de la plantilla de Django

Publicar un comentario

0 Comentarios

Random Posts

Información relevante

Colaboraciones

Menu Footer Widget