Hey Guys!! Welcome to another tutorial of our Flask series. In this article, we will learn about Templates in the Flask web framework and how to use them. So let’s get started!
What are templates?
Templates are the HTML, CSS, JS files that are used to display content on the website. Templates beautify the web pages and make them presentable.
Hence all the websites comprise of Front-end (consisting of Templates) and Back-end(Flask framework codes and applications)
Web Templating System
A web templating system comprises a template engine, data source, and a template processor.
In many cases, the website also displays data from the DB on their webpages. Web Templating Systems do this. It combines the data from the file/DB and the HTML (using Template languages) and then displays it on the webpage.
The exact working of a web template system is as follows:
- Extracts required data from DB
- Combine the Data into the HTML file(using the template language) with the template engine
- Template Processor then processes it and outputs the resulting template file
Flask uses Jinja2 as its default templating engine. We will look at it further in the next section.
Jinga Templating Language (JTL)
The template engine provides a template language with which we can add data into the HTML files.
Jinja2 is a modern and designer-friendly templating language for python, modeled after Django’s Templates.
We will now see the syntax of this template language. It consists of 4 types:
| Types | Syntax |
|---|---|
| 1) Statement Tags | {% %}: {% if…..else %} – {% endif %} |
| 2) Variable Tags | {{ }}: {{ variable }} |
| 3) Commenting Tags | {#…..#}: {# comment ….para #} |
| 4)Line Comment Tags | #: #comment line |
Adding Templates in our application
Flask searches for templates stored in a folder named – templates located beside the main application file. So create the folder before we move on to the next section.
1. Render_template() function
Flask application renders templates using the function render_template()
The syntax is:
render_template('<template_file_name.html>', variables = <values> )
2. Coding our Flask app
Add the code into your file flask main file (see introduction to flask)
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/blogs/<int:id>')
def blogs(id):
return render_template('blog.html', number=id)
app.run(host='localhost', port=5000)
Create the template blog.html:
<html>
<body>
<h1>This is a Blog Webpage</h1>
<h2>Blog {{number}}</h1>
<h3>Test Blog</h1>
</body>
</html>
Notice how we used the variable tag of jinja2 language.
3. Running the Flask application
Run the server and hit the URL
Voila!
Conclusion
That’s it, guys, for this article! This was all about Flask Templates. Try doing the above examples on your own for a better understanding. Till then, Happy coding!!