Skip to content
Related Articles

Related Articles

Template Inheritance in Flask

View Discussion
Improve Article
Save Article
Like Article
  • Difficulty Level : Easy
  • Last Updated : 05 Sep, 2020

Template inheritance is a very good feature of Jinja templating . Jinja is a web template engine for the Python programming language . We have seen that webpages of a website contains same footer , navigation bar etc.  So instead of making same footer and navigation bar in all webpages separately , we make use of template inheritance , which allows us to create the part which is same in all webpages (eg. footer,navigation bar) only once and we also don’t need to write the html , head , title tag again and again . Lets define the common structure of web pages in base.html file. First of all we will render  template using flask from main.py file .

Prerequisite –  Flask – (Creating first simple application)

 

Step 1 – Create a flask app to render the main template 

Python3




from flask import Flask, render_template
  
# Setting up the application
app = Flask(__name__)
  
# making route
  
  
@app.route('/')
def home():
    return render_template('home.html')
  
  
# running application
if __name__ == '__main__':
    app.run(debug=True)

Step 2 – Create HTML Files

Now we will set up our base.html file in which we have one heading which will be common in all webpages. 

Syntax : 

{% block content %}
{% endblock %}

The code above and below these lines will be the same for every web pages and the code between them will be for a specific web page . 

HTML




<!DOCTYPE html>
<html lang="en">
<head>
    <title>Template Inheritance</title>
</head>
<body>
    <h1> This heading is common in all webpages </h1>
    {% block content %}
    {% endblock %}
  
</body>
</html>

  

Now we will set up our home.html file in which we will inherit template from “base.html” file and will write some code for 

home page also . 

Syntax :

  {% extends "base.html" %}
        {% block content %}
          write code here for home page only 
        {% endblock %}

HTML




{%extends "base.html" %}
{%block content%}
  
<h1>Welcome to Home</h1>
  
{% endblock %}

      

Run your main.py file . 

Output – 

Below is the output.

        

This article is just a simple example. We can also add navigation bar , footer , etc to base.html file and can inherit to home.html file and many others .


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!