Using templates in Python Flask framework

Flask will look for templates in the templates folder. So if your application is a module, this folder is next to that module, if it’s a package it’s actually inside your package:

Currently our application is developed as module. We will see the difference between module and package later.

Adding Templates

Now let us add a folder called templates inside application directory and add required html files here. Update application file to use html files

from flask import Flask
from flask import render_template
app = Flask(__name__)

def index():
	return render_template('index.html')

def aboutus():
	return render_template('aboutus.html', name="")

def contactus():
	return render_template('contactus.html')

Please note  following changes to the base file:

  1. we have imported “render_template”
  2. usage of render_template for creating output
  3. Usage of parameter “name” while rendering the html file. This keyword will be accessible in template and will be displayed within {{}}

This is simple example  of using separate template files for each route. Here none of the code is shared across views

Advanced templates

Many times we have few fixed parts of the website, irrespective of the page, such as navigation bar and footer. If you have to keep this code in each html page, making any change in this code will be cumbersome process. Flask has a great feature to make this change once and apply this to all pages. This is achieved by creating base template and extending the base template for individual pages.

Here we will create a base template having navigation bar, footer and different section. When we have to render different pages, we will simple reuse this base template and replace the required section run time.

Here is sample folder structure

└── templates
     ├── aboutus.html
     ├── base.html
     ├── contactus.html
     └── index.html

Base file structure

<!doctype html>
<title>{% block title %}{% endblock %}</title>
<a href="/">home</a>
<a href="/aboutus">about us</a>
<a href="/contactus">contact us</a>

{% block header %}{% endblock %}
{% block content %}{% endblock %}

About us file is as below

{% extends 'base.html' %}

{% block title %} about us{% endblock %}

{% block header %}
<h1>About us header</h1>
{% endblock %}

{% block content %}
<h4>About us</h4>
<p>lorum ipsum text here</p>
<p>this is {{ name }}</p>
{% endblock %}

Now whenever you want to  change header or footer, you need to change only at one place.

Please note following

  • I have created blocks in base file. More the number of blocks, more the flexibility
  • Blocks will be replaced in the individual templates.
  • Base code outside the blocks gets copied as is.
  • If base block is not placed in individual template, base block will be displayed

Leave a Reply

Your email address will not be published. Required fields are marked *