Template Inheritance in Flask
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
app = Flask(__name__)
@app.route('/')
def home():
return render_template('home.html')
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 .
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...