loading...
Cover image for Jinja2 - Short introduction and Sample Apps

Jinja2 - Short introduction and Sample Apps

sm0ke profile image Sm0ke Updated on ・7 min read

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):



All themes are provided by the AppSeed platform and the source code can be found on Github under the MIT and CCBY-4.0 licensing.


Jinja2 - Black Dashboard

Projects that use the Jinja files


Jinja2 Template - Black Design, the dashboard screen.


Jinja2 GradientAble

Projects that use the Jinja files


Vendor Notes (CodedThemes) - Gradient Able Bootstrap 4 Free/Lite Admin Template is a complete solution for your dashboard creation. The default layout version comes with limited options like Google optimized, font integration, high speed, mature & sophisticated, and extremely well-organized code which makes free Gradient Able a fully flexible solution for any backend application project.


Jinja2 GradientAble - Template project provided by AppSeed.


Jinja2 - Adminator

Projects that use the Jinja files


Vendor Notes (ColorLib) - Adminator is a responsive Bootstrap 4 Admin Template. It provides you with a collection of ready to use code snippets and utilities, custom pages, a collection of applications, and some useful widgets. The modern and clean UI makes this design a good candidate for your next project.


Jinja2 Adminator - Template project provided by AppSeed.


Jinja2 - Quick UI Kit

Jinja2 Quick UI Sources - published on Github


Vendor Notes WebPixels - The design of Quick is 100% responsive - it instantly adapts to all modern browsers and resolutions. You can now be sure you'll grab your users' attention with any of the pre-built page examples.
Plan, build, and launch beautiful and consistent user interfaces for the web that drives meaningful engagement and growth for your brand.


Jinja2 Theme Quick UI Kit - Template project provided by AppSeed.


Jinja2 - AdminT

Jinja2 AdminT Sources - published on Github


Vendor Notes (Yookits) - AdminT is the swiss army knife of the dashboard templates.
You can create applications of any kind with it. We carefully crafted every component based on a cohesive design system. Your app will look pro with Admint magic. It’s completely free & open-source. Grab it today and build beautiful apps.


Jinja2 Theme - AdminT (Free Version) - Template project provided by AppSeed.


Jinja2 - Neumorphism

Jinja2 Neumorphism Sources - published on Github


Vendor Notes (Themesberg) - Start developing neumorphism (aka. neomorphism) inspired layouts, web apps and pages with this free UI Kit. It features over 200 individual components and 5 example pages. Neumorphism UI makes use of the original neumorphism design specs. All components are perfectly in compliance with the neumorphism design trend making use of the specific shadow and coloring attributes.


Template Jinja2 Theme - Template project provided by AppSeed.


Jinja2 - AdminLTE

Related projects


Vendor Notes (ColorLib) - AdminLTE is a fully responsive administration template. Based on Bootstrap 4.4 framework and also the JS/jQuery plugin. Highly customizable and easy to use. Fits many screen resolutions from small mobile devices to large desktops


Jinja2 AdminLTE - Template project provided by AppSeed.


Jinja2 - CoreUI

Dashboards coded with Jinja files


Vendor Notes (ColorLib) - CoreUI is an Open Source Bootstrap Admin Template. But CoreUI is not just another Admin Template. It goes way beyond hitherto admin templates thanks to transparent code and file structure. And if that's not enough, let’s just add that CoreUI consists bunch of unique features and over 1000 high-quality icons.


Jinja2 Theme - CoreUI (Free Version) - Template project provided by AppSeed.


What is Jinja2

Jinja2 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 structure
my_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 } become MySample
  • { block content } become Cool 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 Theme - AdminT (Free Version) - Template project provided by AppSeed.

Posted on by:

sm0ke profile

Sm0ke

@sm0ke

#Automation, my favorite programming language

Discussion

markdown guide
 

I enjoyed reading this introduction.
Looking forward to read more from you.

 

Thanks for reading Mostafa. :)

 
 

Thank you! :)
Nunjunks is also super nice. I'm using it with 11ty

 

Niceeee. Thanks for writing.
Also, samples are great.