Template Inheritance in Flask

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



filter_none

edit
close

play_arrow

link
brightness_4
code

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)

chevron_right


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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


  

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

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


      

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.




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


Article Tags :

1


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.