Jinja2 es un motor de plantillas escrito en Python puro. Proporciona una sintaxis no XML inspirada en Django, pero admite expresiones en línea y un entorno opcional de espacio aislado. Es pequeño pero rápido, además de ser un motor de plantillas independiente fácil de usar. Flask es un marco de web micro basado en Python que le permite escribir sus aplicaciones web de manera rápida y eficiente.
En esta serie de tres partes, comenzaré con los conceptos básicos de la plantilla de Jinja2 desde la perspectiva de Flask. En las partes subsiguientes de esta serie, cubriré temas de creación de plantillas avanzados al mismo tiempo que aprenderé a diseñar plantillas en una aplicación basada en Flask en un diseño modular y extensible..
Supongo que usted tiene un conocimiento básico de las mejores prácticas de configuración de Flask y del entorno utilizando virtualenv a seguir al desarrollar una aplicación Python.
Flask viene empaquetado con Jinja2, y por lo tanto solo necesitamos instalar Flask. Para esta serie, recomiendo usar la versión de desarrollo de Flask, que incluye un soporte de línea de comandos mucho más estable entre muchas otras características y mejoras a Flask en general.
pip instalar https://github.com/mitsuhiko/flask/tarball/master
En Flask, podemos escribir una aplicación web completa sin la necesidad de un motor de plantillas de terceros. Echemos un vistazo a un pequeño Hola Mundo
aplicación a continuación:
from flask import Flask app = Flask (__ name__) @ app.route ('/') @ app.route ('/ hello') @ app.route ('/ hello /') def hello_world (usuario = Ninguno): usuario = usuario o' Shalabh 'return " Plantillas en matraz Hola% s!
Bienvenido al mundo de Flask.!
"% user si __name__ == '__main__': app.run ()
Es obvio que el patrón anterior de escritura de una aplicación no es factible en el caso de una aplicación web real donde el código HTML, CSS y JS oscila en miles de líneas de código. Aquí, las plantillas nos ahorran porque podemos estructurar nuestro código de vista manteniendo nuestras plantillas separadas. Flask proporciona soporte para Jinja2 de forma predeterminada, pero cualquier otro motor de plantillas también se puede usar como sea adecuado.
Por defecto, Flask espera que las plantillas se coloquen en una carpeta llamada plantillas
en el nivel raíz de la aplicación. Flask luego lee automáticamente el contenido al hacer que esta carpeta esté disponible para su uso con el render_template ()
método. Voy a demostrar lo mismo reestructurando lo trivial. Hola Mundo
aplicación mostrada arriba.
La estructura de la aplicación sería como se muestra a continuación.
flask_app / my_app.py templates / - index.html
desde el matraz importar Frask, render_template, request app = Flask (__ name__) @ app.route ('/') @ app.route ('/ hello') @ app.route ('/ hello /') def hello_world (usuario = Ninguno): usuario = usuario o' Shalabh 'devuelve render_template (' index.html ', usuario = usuario)
Plantillas en matraz Hola usuario!
Bienvenido al mundo de Flask.!
Para ejecutar la aplicación, simplemente ejecute el siguiente comando en la línea de comandos:
matraz --app = my_app run
Abra http://127.0.0.1:5000/ en un navegador para ver la aplicación en acción. El resultado sería el mismo en el caso de http://127.0.0.1:5000/hello también.
Intenta abrir la URL con tu nombre como la última parte de ella. Entonces, si tu nombre es John, la URL sería http://127.0.0.1:5000/hello/John. Ahora la página se vería así:
Es bastante sencillo que en el método. Hola Mundo
la última parte de la URL después de Hola
se obtiene de la solicitud y se pasa al contexto de la plantilla que se está procesando usando render_template ()
. Este valor luego se analiza desde el contexto de la plantilla usando el marcador de posición Jinja2 usuario
. Este marcador de posición evalúa todas las expresiones que se colocan dentro de él, dependiendo del contexto de la plantilla..
Por lo general, cualquier aplicación web tendrá una cantidad de páginas web diferentes entre sí. Los bloques de código, como los encabezados y pies de página, serán iguales en casi todas las páginas del sitio. Del mismo modo, el menú también sigue siendo el mismo. De hecho, por lo general, solo cambia el bloque del contenedor central, y el resto por lo general permanece igual. Para esto, Jinja2 proporciona una gran forma de herencia entre las plantillas. Es una buena práctica tener una plantilla base donde podamos estructurar el diseño básico del sitio junto con el encabezado y el pie de página..
Crearé una pequeña aplicación para mostrar una lista de productos en diferentes categorías. Para el estilo, usaré el marco Bootstrap para dar un diseño básico a las plantillas. La estructura de la aplicación es ahora como se muestra a continuación..
flask_app / my_app.py templates / - base.html - home.html - product.html static / css / - bootstrap.min.css - main.css js / - bootstrap.min.js
aquí static / css / bootstrap.min.css
y static / js / bootstrap.min.js
Se puede descargar desde el sitio web bootstrap mencionado anteriormente. El resto del código de aplicación se muestra a continuación..
desde el matraz import Flask, render_template, abort app = Flask (__ name__) PRODUCTS = 'iphone': 'name': 'iPhone 5S', 'category': 'Phones', 'price': 699,, 'galaxy' : 'nombre': 'Samsung Galaxy 5', 'categoría': 'Teléfonos', 'precio': 649,, 'ipad-air': 'nombre': 'iPad Air', 'categoría': 'Tablets ',' precio ': 649,,' ipad-mini ': ' nombre ':' iPad Mini ',' categoría ':' Tablets ',' precio ': 549 @ app.route (' / ') @ app.route ('/ home') def home (): return render_template ('home.html', productos = PRODUCTOS) @ app.route ('/ product /') def product (key): product = PRODUCTS.get (key) si no es product: abort (404) return render_template (' product.html ', product = product)
En este archivo, he codificado la lista de productos para simplificar la aplicación y centrarme solo en la parte de las plantillas. He creado dos puntos finales, casa
y producto
, donde el primero sirve para enumerar todos los productos y el segundo abre la página individual.
body padding-top: 50px; .top-pad relleno: 40px 15px; text-align: center;
Este archivo contiene un poco de CSS personalizado que agregué para que las plantillas sean más legibles. Veamos las plantillas ahora..
Tutorial Jinja2 - Tutsplus % block container% % endblock%
Tenga en cuenta el uso de url_for ()
para crear URLs para archivos estáticos y otros enlaces. Es una herramienta muy útil que es proporcionada por Flask. Lea más sobre esto en la documentación. Otro punto importante a destacar aquí es el uso de % block container% % endblock%
, que es un componente muy importante de Jinja2 que trabaja para hacer las plantillas modulares y heredables. El próximo par de archivos lo hará más claro.
% extiende 'base.html'% % block container%% para id, producto en products.iteritems ()%% endblock%% endfor%nombre del producto'] $ producto ['precio']
Vea cómo esta plantilla se extiende base.html
y proporciona los contenidos de % block container%
. % para %
se comporta como un bucle normal para cualquier idioma que usamos aquí para crear una lista de productos.
% extiende 'home.html'% % block container%% endblock%nombre del producto'] categoria de producto']
$ producto ['precio']
La plantilla anterior implementa la página del producto individual..
Ahora ejecuta la aplicación ejecutando el siguiente comando.
matraz --app = my_app run
La aplicación en ejecución se vería como la que se muestra en la siguiente captura de pantalla. Simplemente abre http://127.0.0.1:5000/home en el navegador.
Haga clic en cualquiera de los productos para ver la página del producto individual..
En este tutorial, hemos visto cómo diseñar la estructura de la plantilla en una aplicación basada en Flask utilizando Jinja2. También vimos cómo se pueden usar los bloques para aprovechar la herencia en las plantillas.
En la siguiente parte de esta serie, veremos cómo escribir un filtro personalizado, un procesador de contexto personalizado y una macro.