Manejar templates y vistas HTML en Django/Python
Los templates y vistas HTML en django nos permitirán crear ya aplicaciones y sitios web de manera mas facil.
Los templates nos ayudaran a englobar o contener vistas dentro de una plantilla y que todas tenga el mismo diseño por ejemplo, una plantilla puede tener las librerías CSS y JS y las vistas que usen esta plantilla podrán usarlas.
La finalidad de los templates es reutilizar y no repetir datos.
Para usar los templates y vistas es facil, solo hay que seguir los siguientes pasos.
Vamos a continuar desde donde nos quedamos en el articulo Manejo de mas vistas en Django.
Agregar la ruta de templates/plantillas
Lo primero sera agregar una ruta de nuestros templates en el archivo settings.py de nuestro proyecto, en la variable TEMPLATES en el parametro DIRS agregaremos la ruta donde vamos a guardar los templates.
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [ "proyecto1/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',
],
},
},
]En mi caso sera en la carpeta proyecto1/templates/ como ya esta establecida esta ruta, cuanto llamemos las vistas y templates ya solo tendremos que escribir el nombre de la vista/template.
Estructura del proyecto
Ahora vamos a crear 2 archivos, template.html y vista1.html solo como ejemplo.
La estructura del proyecto quedara asi, tenemos la carpeta proyecto1/templates/ donde se guardan los templates.
Adicionalmente dentro de la carpeta templates podemos tener carpetas
Archivo template.html
El archivo template.html va a tener la estructura HTML que incluye las etiquetas html, head y body, después veremos como agregar librerias CSS y JS.
<html>
<head>
<title>Probando Templates - Evilnapsis</title>
</head>
<body>
<div class="header">
<h1><a href="/proyecto1/">Evilnapsis</a></h1>
<hr>
</div>
<div class="container">
{% block mycontent %}
{% endblock %}
</div>
<hr>
<p><i>Powered by Evilnapsis</i></p>
</body>
</html>Ademas le agregamos un encabezado y pie de pagina que se va a repetir en todas las vistas que incluyan este layout/template.
En la lineas 11 y 12 llamamos a un “bloque”, este espacio va a contener la vista y creo que es posible que un template tenga diferentes bloques siempre y cuando estos tengan diferente nombre, ejemplo el bloque se llama “mycontent” y afecta un espacio en la plantilla.
Archivos de Vistas
La vista1.html va primero va a llamar la plantilla, despues vamos a abrir un identificador para el bloque que queremos incluir y dentro del bloque vamos a tener el contenido HTML.
{% extends 'proyecto1/template.html' %}
{% block mycontent %}
Hola este es mi vista 1 <br><a href="./pagina2">Ir a pagina 2</a>
{% endblock %}Tambien vamos a tener una vista2.html
{% extends 'proyecto1/template.html' %}
{% block mycontent %}
Hola este es mi vista 2<br> <a href="./">Ir a pagina 1</a>
{% endblock %}Por ultimo vamos a llamar las vistas desde el archivo vistas.py
from django.http import HttpResponse
from django.shortcuts import render
def index(request):
return render(request, 'proyecto1/vista1.html', {})
def pagina2(request):
return render(request, 'proyecto1/vista2.html', {})Desde la funcion render llamamos a la vista correspondiente, después se lee la vista, se llama el template y se ejecuta el código para cada bloque.
Si tienen dudas vallan a ver como manejar vistas en Django.