Python Academy · Lección

Plantillas con Jinja2

Renderice HTML dinámico

Plantillas con Jinja2 es una lección gratuita de Python Academy en CoddyKit. Esta es la lección 2 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Python Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Python Academy incluye 4 lecciones en total.

¿Por qué usar plantillas?

Devolver HTML desde cadenas de Python se vuelve complicado rápidamente. Las plantillas mantienen el HTML en archivos separados y completan los datos al renderizar. Flask usa el motor Jinja2.

from flask import Flask, render_template
app = Flask(__name__)
# render_template loads a file from the templates/ folder
print('Jinja2 powers Flask templates')

La carpeta templates

Flask busca las plantillas en una carpeta llamada templates/, situada junto a la aplicación. Los archivos normalmente terminan en .html.

# project/
#   app.py
#   templates/
#     index.html
print('Templates live in templates/')

render_template

render_template('index.html') carga una plantilla y devuelve el HTML renderizado como respuesta.

from flask import Flask, render_template
app = Flask(__name__)

@app.route('/')
def home():
    return render_template('index.html')
print('home renders index.html')

Pasar datos

Pase las variables como argumentos con nombre. La plantilla podrá mostrarlas.

from flask import Flask, render_template
app = Flask(__name__)

@app.route('/')
def home():
    return render_template('index.html', name='Alice')
print('name=Alice is sent to the template')

Mostrar variables

En la plantilla, {{ name }} muestra una variable. Las llaves dobles son la sintaxis de expresiones de Jinja2.

# index.html
# <h1>Hello, {{ name }}!</h1>
print('Double braces output a value')

Sentencias if

Las sentencias de control de Jinja2 usan {% %}. Un bloque if muestra contenido de forma condicional.

# {% if user %}
#   <p>Welcome back!</p>
# {% else %}
#   <p>Please log in.</p>
# {% endif %}
print('{% if %} branches the markup')

Bucles for

Recorra una lista con {% for item in items %} para renderizar marcado repetido, como una lista de productos.

# <ul>
# {% for item in items %}
#   <li>{{ item }}</li>
# {% endfor %}
# </ul>
print('{% for %} repeats markup per item')

Filtros

Los filtros transforman un valor mediante una barra vertical: {{ name|upper }} lo convierte a mayúsculas. Entre los filtros integrados se incluyen length, default y title.

# {{ name|upper }}        -> ALICE
# {{ items|length }}      -> count
# {{ bio|default('N/A') }}
print('Filters transform values with |')

Herencia de plantillas

Una plantilla base define la estructura de la página con marcadores {% block %}. Las plantillas secundarias la {% extends %} y completan los bloques.

# base.html
# <body>{% block content %}{% endblock %}</body>
#
# page.html
# {% extends 'base.html' %}
# {% block content %}<p>Hi</p>{% endblock %}
print('extends + block share a layout')

Escapado automático

Jinja2 escapa automáticamente el HTML de las variables para proteger contra el cross-site scripting. Un valor como <script> se muestra como texto, no se ejecuta.

# If name = '<b>x</b>', {{ name }} renders the literal text
# Auto-escaping is on by default for safety
print('Auto-escaping prevents XSS')

Enlazar con url_for

Dentro de las plantillas también puede llamar a url_for, a menudo para archivos estáticos: {{ url_for('static', filename='style.css') }}.

# <link rel='stylesheet'
#   href="{{ url_for('static', filename='style.css') }}">
print('url_for works inside templates too')

Comprobación rápida

Ponga a prueba sus conocimientos sobre Jinja2.

Recapitulación

Aprendió a usar plantillas con Jinja2.

render_template() renderiza archivos de templates/
{{ }} muestra valores; {% %} ejecuta if/for
Los filtros como |upper transforman valores
extends + block permiten heredar diseños
El escapado automático protege contra XSS

Preguntas frecuentes

¿La lección «Plantillas con Jinja2» es gratis?

Sí — el texto completo de «Plantillas con Jinja2» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Python Academy, actualiza a CoddyKit PRO. El curso de Python Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Plantillas con Jinja2»?

Renderice HTML dinámico Practicas Python Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar Python Academy?

No se requiere experiencia previa. Python Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 2 de 4.

¿Cuánto tiempo toma la lección «Plantillas con Jinja2»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de Python Academy?

Sí. Cada lección de Python Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

← Volver a Python Academy