An Interest In:
Web News this Week
- April 24, 2024
- April 23, 2024
- April 22, 2024
- April 21, 2024
- April 20, 2024
- April 19, 2024
- April 18, 2024
Jinja2 - Short introduction and Sample Apps
Hello Coders,
This article is a short introduction in Jinja2, a modern templating language used by Python programmers in frameworks like Flask, Bottle, optionally in Django from 1.8 version.
For those already familiar with Jinja2, and fast-runners, I'll drop some links below to some nice Jinja2 themes, provided as super simple Flask starters (no database or hard dependencies):
- Demo Jinja2 Quick UI Kit - A modern UI kit converted to Jinja2
- Demo Jinja2 Neumorphism UI - Just another free UI Kit
- Demo Jinja2 AdminLTE - the famous OS dashboard design
- Demo Jinja CoreUI - CoreUI dashboard design
All themes are provided by the AppSeed platform and the source code can be found on Github under the MIT License.
Jinja2 - Quick UI Kit
Jinja2 - Neumorphism
Jinja2 - AdminLTE
Jinja2 - CoreUI
What is Jinja2
Jinja, is a Python template engine used to generate HTML or XML returned to the user via an HTTP response.
For those who have not been exposed to a templating language before, such languages essentially contain variables as well as some programming logic, which when evaluated (or rendered into HTML) are replaced with actual values.
Why do we need Jinja?
Sandboxed Execution - It provides a protected framework for automation of testing programs, whose behavior is unknown and must be investigated.
HTML Escaping Jinja 2 has a powerful automatic HTML Escaping, which helps to prevent Cross-site Scripting (XSS Attack). There are special characters like >,<,&, etc. which carry special meanings in the templates. So, if you want to use them as regular text in your documents then, replace them with entities. Not doing so might lead to XSS-Attack.
Template Inheritance - This feature helps us to generate new pages starting from a base template that we inherit a common structure.
How to get Jinja2
To start playing with it, just open a terminal and type:
$ pip install jinja2
Jinja in action
Simple runtime replace
>>> from jinja2 import Template>>> t = Template("Hello {{ token }}!")>>> t.render(token="Jinja2")u'Hello Jinja2!'
The engine will replace the inner token
with value Jinja2
. This is quite useful when we use this block for different token
values.
Lists iteration
In web development, we can have cases when a list should be displayed on the page: registered users, for instance, or a simple list of options. In Jinja, we can use a for structure
as bellow:
# Define data structuremy_list=[0,1,2,3,4,5] # a simple list with integers
In Jinja, we can iterate with ease, using a for
block:
... <ul> {% for n in my_list %} <li>{{n}}</li> {% endfor %} </ul>...
Template Inheritance
Templates usually take advantage of inheritance, which includes a single base template that defines the basic structure of all subsequent child templates. You use the tags { extends } and { block } to implement inheritance.
Let's take a look at a real sample:
Parent HTML - saved as
base.html
<html> <head> <title>My Jinja {% block title %}{% endblock %} </title> </head> <body> <div class="container"> <h2>This is from the base template</h2> <br> { block content }{ endblock } <br> </div> </body></html>
The Child template - saved as child.html
{ extends "base.html" }{ block title } MySample { endblock }{ block content } Cool content here{ endblock }
When Jinja loads child.html
, the { extends } block informs the engine to merge the base.html
template with the content provided by child.html
{ block title }
becomeMySample
{ block content }
becomeCool content here
Here is the final HTML generated by Jinja:
<html> <head> <title>My Jinja MySample</title> </head> <body> <div class="container"> <h2>This is from the base template</h2> <br> Cool content here <br> </div> </body></html>
This powerful feature helps us to build complex web apps with ease by using common pages and components to generated dynamic pages hydrated with real information loaded from the database or provided by users, for instance.
Thanks for reading! Let me know your thoughts in the comments.
Resources & Links
- Jinja2 - official website
- Jinja2 Theme Quick UI Kit - source code
- Jinja2 AdminLTE - source code
- Jinja2 Theme - CoreUI - source code
- Jinja2 Theme - AdminT - sources, and LIVE Demo
Original Link: https://dev.to/sm0ke/jinja2-short-introduction-and-sample-apps-nb
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To