This tutorial is from open-source community. Access the source code
En este laboratorio, aprenderemos cómo crear y usar plantillas en Flask. Las plantillas son una parte crucial de las aplicaciones web. Nos permiten generar páginas HTML dinámicas que pueden mostrar diferentes datos cada vez que se cargan. Utilizaremos el motor de plantillas Jinja2 que viene empaquetado con Flask.
Nota: Debes crear el archivo de código por ti mismo y ejecutarlo en el entorno. Puedes previsualizar el estado del servicio Flask en Web 5000.
Nuestro primer paso es crear una plantilla base que se utilizará para todas nuestras páginas. Esta plantilla base incluirá los elementos comunes de nuestra aplicación, como la barra de navegación y el título de la página.
<!-- flaskr/templates/base.html -->
<!doctype html>
<title>{% block title %}{% endblock %} - Flaskr</title>
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}" />
<nav>
<h1>Flaskr</h1>
<ul>
{% if g.user %}
<li><span>{{ g.user['username'] }}</span></li>
<li><a href="{{ url_for('auth.logout') }}">Cerrar Sesión</a> {% else %}</li>
<li><a href="{{ url_for('auth.register') }}">Registrarse</a></li>
<li>
<a href="{{ url_for('auth.login') }}">Iniciar Sesión</a>
{% endif %}
</li>
</ul>
</nav>
<section class="content">
<header>{% block header %}{% endblock %}</header>
{% for message in get_flashed_messages() %}
<div class="flash">{{ message }}</div>
{% endfor %} {% block content %}{% endblock %}
</section>A continuación, crearemos una plantilla para la página de registro. Esta plantilla extenderá nuestra plantilla base y llenará el contenido específico de esta página.
<!-- flaskr/templates/auth/register.html -->
{% extends 'base.html' %} {% block header %}
<h1>{% block title %}Registrarse{% endblock %}</h1>
{% endblock %} {% block content %}
<form method="post">
<label for="username">Nombre de usuario</label>
<input name="username" id="username" required />
<label for="password">Contraseña</label>
<input type="password" name="password" id="password" required />
<input type="submit" value="Registrarse" />
</form>
{% endblock %}De manera similar, crearemos una plantilla para la página de inicio de sesión. Esta plantilla también extenderá nuestra plantilla base y llenará el contenido específico de esta página.
<!-- flaskr/templates/auth/login.html -->
{% extends 'base.html' %} {% block header %}
<h1>{% block title %}Iniciar Sesión{% endblock %}</h1>
{% endblock %} {% block content %}
<form method="post">
<label for="username">Nombre de usuario</label>
<input name="username" id="username" required />
<label for="password">Contraseña</label>
<input type="password" name="password" id="password" required />
<input type="submit" value="Iniciar Sesión" />
</form>
{% endblock %}En este laboratorio, aprendimos cómo crear y usar plantillas en Flask. Creamos una plantilla base que incluye los elementos comunes de nuestra aplicación, y luego creamos plantillas específicas para las páginas de registro e inicio de sesión que extienden esta plantilla base y llenan su contenido específico. Esto nos permite mantener nuestro código DRY (No te repitas), lo que lo hace más mantenible y menos propenso a errores.