Template Inheritance in Flask with Example

What is template inheritance? A web application has a minimum of four to five pages. These pages contain common components like header, footer, background, etc. So, these components collectively put into a template for reusability.

Other pages of the application inherit these templates, hence the process is called template inheritance. Let’s see how we can do the same in Flask.

Every webpage has a header specifically a navigation bar and a footer displaying the business’s objective and important hyperlinks to different services.

Let’s say we have a directory structure that looks like the following:

flask_project/

|- app.py

|- templates

|- base_layout.html

|- about.html

|- product.html

|- static

We need to create a Flask app to serve our templates. Add the following code into the app.py file.

from flask import Flask, render_template

app = Flask(__name__)

@app.route("/")

def home():

return render_template("base_layout.html")

@app.route("/about")

def about():

return render_template("about.html")

@app.route("/products")

def products():

return render_template("product.html")

if __name__ == "__main__":

app.run(debug=True)

We have three templates that will be rendered on their respective URLs that’s why we created three routes (/, /about, and /products) in our app.

Here’s a simple navbar and footer using Bootstrap.

<!DOCTYPE html>

<head>

<title>Template Inheritance</title>

</head>

<body>

<a class="navbar-brand" href="#">Navbar</a>

<a class="nav-link" href="#">Products</a>

<a class="nav-link" href="#">About</a>

</div>

</nav>

{% block content %}

<h1> This is Homepage </h1>

{% endblock %}

</div>

</footer>

</body>

</html>

Now run the app and go to this URL http://127.0.0.1:5000.

Our webpage now has a simple layout. The next goal is to avoid explicitly including the identical components (navbar and footer) on each page (about.html and product.html).

As a result, we will use base_layout.html as our base template to include the navbar and footer on subsequent web pages.

How’ll we do that? Of course, by using template inheritance. Let’s start things off.

Here, we’ll use Jinja syntax to achieve our goal. In the about.html add the following code.

{% extends 'base_layout.html' %}

{% block content %}

<h1> This is About Page </h1>

{% endblock %}

This line ({% extends 'base_layout.html' %}) indicates that the about.html template will use the base_layout.html template as its base. This means that about.html inherits the structure and layout defined in base_layout.html.

If you’ve noticed, we inserted the content block ({% block content %}{% endblock %}) in our base template, this will help us serve the dynamic content. This is what we’ve done after extending the base layout.

Now, we can insert anything within the content block using the above syntax, in this case, we’ve inserted a simple <h1> tag.

This is the result we got, about.html serving on http://127.0.0.1:5000/about.