Skip to content
Related Articles

Related Articles

Improve Article
Template Inheritance in Flask
  • 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 .

 Attention geek! Strengthen your foundations with the Python Programming Foundation Course and learn the basics.  

To begin with, your interview preparations Enhance your Data Structures concepts with the Python DS Course. And to begin with your Machine Learning Journey, join the Machine Learning – Basic Level Course

My Personal Notes arrow_drop_up
Recommended Articles
Page :