Herencia de templates

Resumen

Macro: son un conjunto de comandos que se invocan con una palabra clave, opcionalmente seguidas de parámetros que se utilizan como código literal. Los Macros son manejados por el compilador y no por el ejecutable compilado.

Los macros facilitan la actualización y mantenimiento de las aplicaciones debido a que su re-utilización minimiza la cantidad de código escrito necesario para escribir un programa.

En este ejemplo nuestra macro se vería de la siguiente manera:

{% macro nav_link(endpoint, text) %}
    {% if request.endpoint.endswith(endpoint) %}
        <li class="active"><a href="{{ url_for(endpoint) }}">{{text}}a>li>
    {% else %}
        <li><a href="{{ url_for(endpoint) }}">{{text}}a>li>
    {% endif %}
{% endmacro %}

Un ejemplo de uso de macros en Flask:

{% from "macros.html" import nav_link with context %}

<html lang="en">
    <head>
    {% block head %}
        <title>My applicationtitle>
    {% endblock %}
    head>
    <body>
        <ul class="nav-list">
            {{ nav_link('home', 'Home') }}
            {{ nav_link('about', 'About') }}
            {{ nav_link('contact', 'Get in touch') }}
        ul>
    {% block body %}
    {% endblock %}
    body>
html>

Como podemos observar en la primera línea estamos llamando a macros.html que contiene todos nuestros macros, pero queremos uno en específico así que escribimos import nav_link para traer el macro deseado y lo renderizamos de esta manera en nuestro menú {{ nav_link('home', 'Home') }}.

Royer Guerrero Pinilla

student•

Si usan Vs code les recomiendo las extencion Jinja para que les coloree los tags de jinja

Jorge Chirinos

student•

Excelente aporte!

Fredy Mendoza Vargas

student•

Gracias x el aporte

Miguel Rodriguez

student•

explicas bien pero te vas directamente a la practica con un poco de teoría previa se entendería mas rápido y mejor

Carmen Sánchez Salgado

student•

Coincido totalmente con tu comentario.

Miguel Rodriguez

student•

eessm01 te recomiendo que leas la documentacion oficial de flask y jinja2 ambas estan muy completas, haslo y te convertiras en un pro

Matias Gabriel Pierri

student•

Si alguno ya le resulto tedioso estar escriiendo {% %} en cada linea que hay que aplicar jinja les recomiendo usar Jinja2 Snipper Kit para VScode ya que es tan facil como,por ejemplo, poner jif+ enter y ya te arma toda la estructura de un if

Gerardo Alberto Soto Alvarez del Castillo

student•

uffff Tremenda ayuda que nos has dado!!!!!!! Gracias! <3 <3 <3

Cristian Camilo Hernández Ramirez

student•

Muchísimas gracias por tu aporte Matías

Rabi Leonel Leon Chan

student•

les comparto el codigo de la clase:

hello.html

{% extends 'base.html' %}
{% import 'macros.html' as macros %}

{% block title %} 
    {{ super() }}
    Bienvenido 
{% endblock %}

{% block content %}
    {% if user_ip %}
    &lt;h1&gt;
        Hello, tu ip es {{ user_ip }}
    &lt;/h1&gt;
    {% else %}
        &lt;a href=&quot;{{ url_for('index') }}&quot;&gt;ir a inicio&lt;/a&gt;
    {% endif %}

    &lt;ul&gt;
        {% for todo in todos %}
            {{ macros.render_todo(todo) }}
        {% endfor %}
    &lt;/ul&gt;
{% endblock %}

base.html

&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
    &lt;title&gt;
        {% block title %}Flask Platzi |{% endblock %}
    &lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
    {% block content %}
    {% endblock %}    
&lt;/body&gt;
&lt;/html&gt;

macros.html

{% macro render_todo(todo) %}
    &lt;li&gt; Descripción: {{ todo }} &lt;/li&gt;
{% endmacro %}

main.py

from flask import Flask, request,make_response, redirect, render_template

app = Flask(__name__)

todos = ['Comprar Cafe', 'Enviar Solicitud de compra', 'Entregar video a productor']
@app.route('/')
def index():
    user_ip = request.remote_addr

    response = make_response(redirect('/hello'))
    response.set_cookie('user_ip', user_ip)

    return response


@app.route('/hello')
def hello():

    user_ip = request.cookies.get('user_ip')
    context = {
        'user_ip': user_ip,
        'todos': todos
    }

    return render_template('hello.html',**context)

Carlos Enrique Ramírez Flores

student•

Muchas gracias, copiare base.html

Ingerman Paez

student•

Muchas gracias

Edward Toledo López

student•

El profe diciendo la palabra "macros". Yo, simple mortal que empezó en esto con excel: Recuerdos de Vietnam vienen a mí

Reinaldo Mendoza

student•

jaja,me too

Carlos Enrique Arrieta Fierro

student•

jaja yo igual pensé en excel

Jean Nuñez

student•

Herencis de Template: La parte más poderosa de Jinja es la herencia de plantillas. La herencia de plantillas le permite crear una plantilla de "esqueleto" de base que contiene todos los elementos comunes de su sitio y define los bloques que las plantillas secundarias pueden anular.

Carlos Enrique Ramírez Flores

student•

Excelente, me siento tan cómodo como con laravel, y creo que flask es mucho mas rápido jiji!!

Julio César Zaravia Paredes

student•

¡Hola Comunidad! . Copio la forma de ++cómo podemos aplicar estilos a nuestra plantilla ya que es una de las cosas que se necesitarán si o si++ al momento de hacer una página web, ++seguro este punto se toca en algún video posterior, pero nunca está de más++ leer algo antes. . Primero debemos saber que todos los archivos públicos, es decir aquellos que no serán procesados como las plantillas que están en /templates o los archivos de extensión .py, deberán colocarse en una carpeta de nombre static. El motor de templates de ++Jinja2 reconoce de forma predeterminada la carpeta static++ (al igual que lo hace con templates) para extraer de allí los archivos complementarios. . Dicho esto. Actualicemos los estilos de nuestro ejemplo: . Creamos la carpeta static dentro de nuestra carpeta de proyecto. Deberíamos terminar con algo así: .

. Una vez creada la carpeta, podemos colocar ene lla nuestro archivo CSS, sin embargo yo colocaré otra carpeta de nombre css, de tal manera que mi archivo style.css estará en una ruta similar a esta: C:\tu_ruta\python\flask\static\css\style.css. . Para este ejemplo quisiera modificar, de manera simple, los colores del listado que cargamos en la vista hello. Así que escribiré unos estilos básicos en style.css:

ul li {
	color: red;
	text-decoration: underline;
}

Luego, asociaré este archivo CSS con nuestra plantilla base.html ¿Por qué a base.html y no a las demás? Porque depende, en mi caso considero que este CSS se aplicará a todas mis plantillas, la mayoría de veces es así. . Para poder hacer la asociación escribimos lo siguiente en base.html, entre las etiquetas head:

<head>
	<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
</head>

Nota que ++en mi ejemplo yo solo estoy colocando mi línea de código++, obviamente tenemos más código allí, pero creo que se entiende. . Con esto ya deberíamos poder abrir nuestro navegador y ver los cambios aplicados. Deberíamos ver algo así:

Bueno, es un ejemplo muy sencillo 🙂, seguramente hay diferentes maneras de hacerlo. Si conoces otra compártela y así aprendemos algo más. Aquí está el enlace a la documentación dónde puedes indagar más. . Espero les sirva. . ¡Saludos!

Eliaz Bobadilla

student•

Muy util, gracias!

Luis Ernesto Domínguez Velásquez

student•

Gracias, me funcionó. Saludos

brandon james grimaldo moscote

student•

listo sin errores , cosa extraña por que siempre tengo errores :'c

Royer Guerrero Pinilla

student•

Eso solo significa que has mejorado al principio me pasaba lo mismo lo peor es que no encontraba el error en mi código con el tiempo aprendí que leer lo soluciona todo ademas creo que a nosotros los programadores un ojo se convierte en debugger y encuentra los errores facilmente, Suerte!

Pablo Aquino

student•

Excelente clase, super práctica.

Para extender un template tenemos que hacer uso de {{ extends base.html }}
Para agregar un bloque de código de python en html hacemos uso de {% block nameblock %}contenido{% endblock %}
Si se quiere concatenar el contenido html con el contenido en python se debe de agregar {{ super() }}, para que extienda el contenido html al contenido en python.
Los macros son pequeños pedazos que código, que se usaran a lo largo del proyecto, son como funciones. Para ello hacemos uso de {% macro nombremacro(parametro) %} contenido {{ parametro}} {% endmacro %}
Para importar un macro hacemos uso de {% import archivomacro as variable %}

Alexander Moreno Córdoba

student•

Cuando creamos una página web es una práctica común crear una estructura de la página que será compartida por todas las vistas del sistema. Esta estructura generalmente incluye la cabecera y el pie de la página. La herencia de templates nos permite la creación de templates padres que podrán ser heredados por cada vista particular.

Esta herencia se logra a través de la creación de bloques. Los bloques de Jinja2 tienen un nombre único designado y pueden o no tener contenido. Al crear un template hijo e indicar la herencia los bloques definidos ocuparan el espacio asignado a dicho bloque en el template padre.

Se define el comienzo de un bloque con la palabra block seguida de su nombre y se indica su final con la palabra endblock.

<!DOCTYPE html>
<html lang="es">
  <head>
      <meta charset="UTF-8">
      {% block head %}
      <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
      <title>Titulo</title>
      {% endblock %}
  </head>
  <body>

{% block menu %}
<nav class="navbar navbar-expand-md navbar-dark bg-dark navbar-fixed-top">
  <a class="navbar-brand" href="#">Título</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Enlace</a>
      </li>
    </ul>
  </div>

  <div class="navbar-collapse collapse w-100 order-3 dual-collapse2">
       <ul class="navbar-nav ml-auto">
         <li class="nav-item">
           {% if nombre != "" %}
             <span class="navbar-text">Hola {{nombre}}</span>
           {% else %}
             <a class="btn btn-info">Iniciar sesion</a>
           {% endif %}
         </li>
       </ul>
   </div>
</nav>
{% endblock %}
  <br/>
  {% block contenido %}
  {% endblock %}
  <br/>

  {% block pie %}
  <footer class="footer">
    <div class="container-fluid text-center text-md-left">
      <div class="row">
        <div class="col-md-2"></div>
        <div class="col-md-2">
            <ul>
              <li>
                <a href="#">Enlace 1</a>
              </li>
              <li>
                <a href="#">Enlace 2</a>
              </li>
              <li>
                <a href="#">Enlace 3</a>
              </li>
              <li>
                <a href="#">Enlace 4</a>
              </li>
          </ul>
        </div>
        <div class="col-md-6">
            <p>Aenean purus mi, laoreet et aliquam quis, imperdiet non risus. Nulla id luctus enim, convallis laoreet urna. Curabitur iaculis dictum ante, eget sodales massa elementum quis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed tempor facilisis nisi at commodo.</p>
        </div>

        <div class="col-md-2"></div>
      </div>
    </div>
  </footer>
 {% endblock %}

En este template se encuentran definidos los siguientes bloques:

head: Contiene los enlaces a hojas de estilos, js, etc
menú: Contiene el menú de navegación
contenido: Bloque vacío
pie: Contiene el pie de la página

Al crear un template hijo es necesario especificar el template del cual hereda utilizando la sentencia extends seguida del nombre del archivo padre. Luego es posible definir el contenido de cada bloque pudiendo :

Heredar el contenido del padre sin modificarlo
Heredar el contenido pero permitir el agregado de contenido propio del hijo a través de la función super
Generar contenido nuevo a partir de los bloques vacíos en el template padre.

{% extends 'main.html'%}  {# Herencia #}
{% block head %}
    {{ super() }} {# Heredar el contenido del bloque padre #}
    <link rel="stylesheet" href="{{url_for('.static', filename='css/style.css')}}"> {# Nuevo contenido del bloque #}
{% endblock %}

{% block contenido %}
<div class="container">
  <div class="row">
    <div class="col-md-12">
        <h3>{{subtitulo}}</h3>
    </div>
  </div>
  <div class="row">
    <div class="col-md-4">
      <img src="https://via.placeholder.com/330x250">
    </div>
    <div class="col-md-5">
      <p>{{texto}}</p>
    </div>
    <div class="col-md-3">
      <ul class="list-group">
      {% for valor in lista %}
        <li class="list-group-item"> {{ valor }}</li>
      {% endfor %}
      </ul>
      <a href="#" class="btn btn-primary btn-block btn-lg">${{precio}}</a>
    </div>
  </div>
</div>
{% endblock %}

Qué sucede con la herencia de los diferentes bloques en el template hijo:

head: Al utilizar la función super se hereda el contenido del template padre pero permite agregar contenido nuevo
menú: Al no hacer referencia a este bloque se hereda directamente del template padre
contenido: El template hijo genera todo el contenido
pie: Al no hacer referencia a este bloque se hereda directamente del template padre

Leonardo Cruz Beltrán

student•

Excelente, utilizo Visual Studio Code y todo el texto tenia el mismo formato, instale la extensión jinja para visualizar el texto con colores y un mejor formato. Se los recomiendo.

Carlos A. Lobo R.

student•

Si desean hacer una pagina donde puedan establecer el titulo de manera dinamica, hagan lo siguiente:

@app.route("/hello")
def hello():
    user_ip = request.cookies.get("user_ip")
    context = {"user_ip": user_ip, "todos": todos, "title": "Hello"}

    """
    Aqui expandimos el dicionario context para poder
    acceder a sus varibles sin la necesidad de hacer
    uso de 'content.the_thing_you_wanna_call'
    """
    return render_template("hello.html", **context)

 <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	{% if title %}
	<title>Flask | {{ title }}</title>
	{% else %}
	<title>Flask | Bienvenido</title>
	{% endif %}
</head>
<body>
	{% block content %}{% endblock %}
</body>
</html>

Hugo Gomez Tinoco

student•

Python Template Snippets es una extension que te ayuda a no tener que escribir toda la sentencia {{ % ... % }} también tiene soporte para django

Aquí los principales shortcuts

Luis Gerardo Hernández Pintor

student•

¿es importante la separación entre "{%" y el código?

Antonio Gomez

student•

En Jinja puede generar cualquier formato, pero te recomiendo seguir la estandarización del mismo proveedor que es como lo mencionas. Te paso la url de la pagina oficial para mirar los ejemplo: https://jinja.palletsprojects.com/en/2.11.x/templates/

David Campos

student•

Template padre:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>
        {% block title %} Flask | {% endblock %}
    </title>
</head>
<body>
    {% block content %}
    {% endblock %}
</body>
</html>

Extends: Conectar dos templates e insertar contenido en el bloque correspondiente del template padre.

Import: Importar macros de otro archivo, son similares a las funciones y ayudan a no repetir código.

{% extends 'base.html' %}
{% import 'macros.html' as macros %}

{% block title %} 
    {{ super() }}
    Bienvenido 
{% endblock %}

{% block content %}
    <h2>Hello world template</h2>
    {% if user_ip %}
        <h3>Tu IP es {{ user_ip }}</h3>
    {% else %}
        <a href="{{ url_for('index') }}">Inicio</a>
    {% endif %}

    <ul>
        {% for todo in todos %}
            {{ macros.render_todo(todo) }} # usando el macro
        {% endfor %}
    </ul>
{% endblock %}

Archivo de macros:

{% macro render_todo(todo) %}
    <li>{{ todo }}</li>
{% endmacro %}

Nicolas Koriakos

student•

que significa renderear?

Gerardo Alberto Soto Alvarez del Castillo

student•

Hola Nicolas! El significado de Render (Renderizar) es el proceso para construir algo, piénsalo como un molde, con el cual, le pones cualquier cosa y te lo regresa con la misma figura (pero con el contenido con el que fue ingresado)

Nicolas Koriakos

student•

muchas gracias :)

Ernesto Davogustto

student•

Cuando cierro mi terminal y quiero volver a trabajar en el proyecto y ejecutar flask run, debo volver a declarar export FLASK_APP y activar el debugging. Hay alguna forma de que quede guardado y no tener que ejecutar de nuevo los comandos?

Hugo Gomez Tinoco

student•

Si utilizas linux lo puedes declarar en el bash.rc, pero pienso que la forma más fácil es incluir esta línea de código al final de main. py

if __name__ == '__main__':
    app.run(port = 5000, debug = True)

Así lo corres como cualquier otro archivo por terminal llamando a python (...$ python3 main. py)

Miguel Angel Reyes Moreno

student•

Herencia de templates

Podemos exportar e importar templates.

Creamos un archivo 'base.html':

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{% block title %} Curso Flask | {% endblock %}</title>
</head>
<body>
{% block content %}
{% endblock %}
</body>
</html>

El contenido será hello.html:

{% extends 'base.html' %}
{% import 'macros.html' as macros %}

{% block title %}
    {{ super() }}
    Bienvenido
{% endblock %}

{% block content %}
    {% if user_ip %}
        <h2>Tu dirección IP, (después de haberla obtenida con una cookie 🍪) es {{user_ip}}</h2>
    {% else %}
        <a href="{{ url_for('index') }}">Ir a inicio</a>
    {% endif %}

    <ul>
        {% for todo in todos %}
            {{ macros.render_todo(todo) }} | índice -> {{ loop.index }}
        {% endfor %}
    </ul>
{% endblock %}

Podemos crear archivos que tendrán código que será usado muchas veces, comunmente llamados macros;

{% macro render_todo(todo) %}
  <li>{{ todo }}</li>
{% endmacro %}

Juan R. Vergara M.

student•

🥇🔥👍

Alexander Moreno Córdoba

student•

Las macros son similares a las funciones en Python. La función de las macros es reutilizar el código en las plantillas para evitar la redundancia del código (una definición, usos múltiples).