{"id":1738,"date":"2024-08-01T20:16:36","date_gmt":"2024-08-01T14:46:36","guid":{"rendered":"https:\/\/geekpython.in\/?p=1738"},"modified":"2024-08-01T20:16:37","modified_gmt":"2024-08-01T14:46:37","slug":"template-inheritance-in-flask","status":"publish","type":"post","link":"https:\/\/geekpython.in\/template-inheritance-in-flask","title":{"rendered":"Template Inheritance in Flask with Example"},"content":{"rendered":"\n
What is template inheritance? A web application has a minimum of four to five pages. These pages contain common components like header, footer, background, etc. So, these components collectively put into a template for reusability.<\/p>\n\n\n\n
Other pages of the application inherit these templates, hence the process is called template inheritance<\/strong>. Let’s see how we can do the same in Flask<\/strong>.<\/p>\n\n\n\n
Every webpage has a header specifically a navigation bar and a footer displaying the business’s objective and important hyperlinks to different services.<\/p>\n\n\n\n
Let’s say we have a directory structure that looks like the following:<\/p>\n\n\n\n
We have three templates that will be rendered on their respective URLs that’s why we created three routes (\/<\/code>, \/about<\/code>, and \/products<\/code>) in our app.<\/p>\n\n\n\n
Here’s a simple navbar and footer using Bootstrap.<\/p>\n\n\n\n
Now run the app and go to this URL http:\/\/127.0.0.1:5000<\/code>.<\/p>\n\n\n\n<\/figure>\n\n\n\n
Our webpage now has a simple layout. The next goal is to avoid explicitly including the identical components (navbar and footer) on each page (about.html<\/code> and product.html<\/code>).<\/p>\n\n\n\n
As a result, we will use base_layout.html<\/code> as our base template to include the navbar and footer on subsequent web pages.<\/p>\n\n\n\n
How’ll we do that? Of course, by using template inheritance<\/strong>. Let’s start things off.<\/p>\n\n\n\n
Here, we’ll use Jinja<\/strong> syntax to achieve our goal. In the about.html<\/code> add the following code.<\/p>\n\n\n\n
<!-- about.html -->\n\n<!-- Base template layout -->\n{% extends 'base_layout.html' %}\n\n<!-- Main Content of Page -->\n{% block content %}\n<h1> This is About Page <\/h1>\n{% endblock %}<\/pre><\/div>\n\n\n\n
This line ({% extends 'base_layout.html' %}<\/code>) indicates that the about.html<\/code> template will use the base_layout.html<\/code> template as its base. This means that about.html<\/code> inherits the structure and layout defined in base_layout.html<\/code>.<\/p>\n\n\n\n
If you’ve noticed, we inserted the content block ({% block content %}{% endblock %}<\/code>) in our base template, this will help us serve the dynamic content. This is what we’ve done after extending the base layout.<\/p>\n\n\n\n
Now, we can insert anything within the content block using the above syntax, in this case, we’ve inserted a simple <h1><\/code> tag.<\/p>\n\n\n\n
This is the result we got, about.html<\/code> serving on http:\/\/127.0.0.1:5000\/about<\/code>.<\/p>\n\n\n\n<\/figure>\n\n\n\n
Similarly, we can do this in product.html<\/code> as well.<\/p>\n\n\n\n
<!-- product.html -->\n\n<!-- Base template layout -->\n{% extends 'base_layout.html' %}\n\n<!-- Main Content of Page -->\n{% block content %}\n<h1> This is Product Page <\/h1>\n{% endblock %}<\/pre><\/div>\n\n\n\n
This time we are serving different content. Here’s the result.<\/p>\n\n\n\n<\/figure>\n\n\n\n\n\n\n\n
\ud83c\udfc6Other articles you might be interested in if you liked this one<\/strong><\/p>\n\n\n\n
![\"Base](\"https:\/\/geekpython.in\/wp-content\/uploads\/2024\/08\/image.png\")
<\/figure>\n\n\n\n![\"About](\"https:\/\/geekpython.in\/wp-content\/uploads\/2024\/08\/image-1.png\")
<\/figure>\n\n\n\n![\"Product](\"https:\/\/geekpython.in\/wp-content\/uploads\/2024\/08\/image-2.png\")
<\/figure>\n\n\n\n