In this Flask Tutorial we are going to talk about Template Inheritance in Flask,
so if you have read my previous article, we have talked about using templates in flask,
if you are interested you can check this link, Introduction to Flask Templates.
we have created two html files in that article, but the problem is this that we are duplicating
our code in the html files, for example in both html files we have head, body and html tags,
so we need to remove this duplication for our templates , by this reason we are using
Template Inheritance in Flask. by using Flask Template inheritance
we are avoiding code duplication in our templates, so now let’s start our coding.
If you are interested in Web Development with Django Framework, than you can read the complete articles in this link, Django Web Development Tutorials.
OK, we are not going to bring changes in our app.py file, and this is the app.py file.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
from flask import Flask, render_template #create the object of Flask app = Flask(__name__) #creating our routes @app.route('/') def index(): return render_template('index.html') #contact routes @app.route('/contact') def Contact(): return render_template('contact.html') #run flask app if __name__ == "__main__": app.run(debug=True) |
The function render_template provided by Flask integrates the Jinja2 template engine with the application.
This function takes the filename of the template as its first argument.
Any additional arguments are key/value pairs that represent actual values for variables referenced in the template.
So now we need to create our html files, i assume that you have already created the templates folder, create three html files in the folder, index.html, contact.html and base.html, these are the codes.
This is our base.html, you can see that we have created some blocks for our title and also body, now you can change this block in your other html files. you can create as much blocks as you want according to your requirements.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>{% block title %} {% endblock %}</title> </head> <body> {% block body %} {% endblock %} </body> </html> |
And in here we have created our index.html file, the first thing you need to extends from the base.html, and after that you need to create the same block names as we have created in our base.html.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
{% extends 'base.html' %} {% block title %} Home {% endblock %} {% block body %} <h1>Home Page - Welcome to codeloop.org</h1> <h3>Tutorial Number 3 </h3> <p> In this tutorial we are going to talk about flask template inheritance. </p> {% endblock %} |
Also this is our contact.html , and we are going to perform the same process as we have done for our index.html.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
{% extends 'base.html' %} {% block title %}Contact {% endblock %} {% block body %} <h1>Contact Page - Welcome to codeloop.org</h1> <h3>Tutorial Number 3 </h3> <p> In this tutorial we are going to talk about flask template inheritance. </p> {% endblock %} |
So if you run the code, you will see the same result, but now we have avoided the code duplication in our html files, you can create as much blocks as you want. in this article we have just created two blocks but you can create more blocks according to your requirements.
http://localhost:5000/
http://localhost:5000/contact
Also you can watch my complete 4 hours training on Flask Web Development
Subscribe and Get Free Video Courses & Articles in your Email