Django - Sistema de plantillas

Django hace posible separar python y HTML, python va en vistas y HTML en plantillas. Para vincular los dos, Django se basa en la función de renderizado y el lenguaje de plantilla de Django.

La función de renderizado

Esta función toma tres parámetros:

Request - La solicitud inicial.
The path to the template - Esta es la ruta relativa a la opción TEMPLATE_DIRS en las variables settings.py del proyecto.
Dictionary of parameters- Un diccionario que contiene todas las variables necesarias en la plantilla. Esta variable se puede crear o puede usar locals () para pasar todas las variables locales declaradas en la vista.

Lenguaje de plantillas Django (DTL)

El motor de plantillas de Django ofrece un mini-lenguaje para definir la capa de la aplicación de cara al usuario.

Visualización de variables

Una variable se ve así: {{variable}}. La plantilla reemplaza la variable por la variable enviada por la vista en el tercer parámetro de la función de renderizado. Cambiemos nuestro hello.html para mostrar la fecha de hoy:

hello.html

<html>
   
   <body>
      Hello World!!!<p>Today is {{today}}</p>
   </body>
   
</html>

Entonces nuestra vista cambiará a -

def hello(request):
   today = datetime.datetime.now().date()
   return render(request, "hello.html", {"today" : today})

Ahora obtendremos el siguiente resultado después de acceder a la URL / myapp / hello -

Hello World!!!
Today is Sept. 11, 2015

Como probablemente habrá notado, si la variable no es una cadena, Django usará el método __str__ para mostrarla; y con el mismo principio puedes acceder a un atributo de objeto tal como lo haces en Python. Por ejemplo: si quisiéramos mostrar la fecha del año, mi variable sería: {{today.year}}.

Filtros

Le ayudan a modificar las variables en el momento de la visualización. La estructura de los filtros se parece a la siguiente: {{var | filtros}}.

Some examples -

{{string|truncatewords:80}} - Este filtro truncará la cadena, por lo que solo verá las primeras 80 palabras.
{{string|lower}} - Convierte la cadena a minúsculas.
{{string|escape|linebreaks}} - Escapa del contenido de la cadena y luego convierte los saltos de línea en etiquetas.

También puede establecer el valor predeterminado para una variable.

Etiquetas

Etiquetas le permite realizar las siguientes operaciones: condición if, bucle for, herencia de plantilla y más.

Etiquetar si

Al igual que en Python, puede usar if, else y elif en su plantilla -

<html>
   <body>
   
      Hello World!!!<p>Today is {{today}}</p>
      We are
      {% if today.day == 1 %}
      
      the first day of month.
      {% elif today.day == 30 %}
      
      the last day of month.
      {% else %}
      
      I don't know.
      {%endif%}
      
   </body>
</html>

En esta nueva plantilla, dependiendo de la fecha del día, la plantilla representará un cierto valor.

Etiqueta para

Al igual que "si", tenemos la etiqueta "for", que funciona exactamente como en Python. Cambiemos nuestra vista de saludo para transmitir una lista a nuestra plantilla -

def hello(request):
   today = datetime.datetime.now().date()
   
   daysOfWeek = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
   return render(request, "hello.html", {"today" : today, "days_of_week" : daysOfWeek})

La plantilla para mostrar esa lista usando {{for}} -

<html>
   <body>
      
      Hello World!!!<p>Today is {{today}}</p>
      We are
      {% if today.day == 1 %}
      
      the first day of month.
      {% elif today.day == 30 %}
      
      the last day of month.
      {% else %}
      
      I don't know.
      {%endif%}
      
      <p>
         {% for day in days_of_week %}
         {{day}}
      </p>
		
      {% endfor %}
      
   </body>
</html>

Y deberíamos conseguir algo como ...

Hello World!!!
Today is Sept. 11, 2015
We are I don't know.
Mon
Tue
Wed
Thu
Fri
Sat
Sun

Bloquear y extender etiquetas

Un sistema de plantillas no puede estar completo sin herencia de plantillas. Es decir, cuando diseñe sus plantillas, debe tener una plantilla principal con huecos que la plantilla del niño llenará de acuerdo con sus propias necesidades, como si una página pudiera necesitar un CSS especial para la pestaña seleccionada.

Cambiemos la plantilla hello.html para heredar de un main_template.html.

main_template.html

<html>
   <head>
      
      <title>
         {% block title %}Page Title{% endblock %}
      </title>
      
   </head>
	
   <body>
   
      {% block content %}
         Body content
      {% endblock %}
      
   </body>
</html>

hello.html

{% extends "main_template.html" %}
{% block title %}My Hello Page{% endblock %}
{% block content %}

Hello World!!!<p>Today is {{today}}</p>
We are
{% if today.day == 1 %}

the first day of month.
{% elif today.day == 30 %}

the last day of month.
{% else %}

I don't know.
{%endif%}

<p>
   {% for day in days_of_week %}
   {{day}}
</p>

{% endfor %}
{% endblock %}

En el ejemplo anterior, al llamar a / myapp / hello obtendremos el mismo resultado que antes, pero ahora confiamos en las extensiones y bloques para refactorizar nuestro código.

En main_template.html definimos bloques usando el bloque de etiquetas. El bloque de título contendrá el título de la página y el bloque de contenido tendrá el contenido principal de la página. En home.html usamos extensiones para heredar de main_template.html y luego llenamos el bloque definido arriba (contenido y título).

Etiqueta de comentario

La etiqueta de comentario ayuda a definir comentarios en plantillas, no comentarios HTML, no aparecerán en la página HTML. Puede ser útil para la documentación o simplemente para comentar una línea de código.

↰ Previous page Next page ↱