Before you can implement
CRUD
functionality in your Flask app, you need a user-friendly front end to interact with your data. Flask's template
inheritance system, powered by Jinja2, allows you to build a clean, modular HTML structure with reusable
components.
This means that you won't have to rewrite shared code across pages such as meta data or header/footer layouts,
which will save a lot of time in larger projects.
Template inheritance like this allows you to create a base HTML template that contains common layout elements
and then extend that base template in other pages. This keeps your code
DRY, making maintenance easier.
Base.html
Inside your project_name folder, create a folder named templates. Inside here, make your base.html file.
Also in your project_name folder, create a folder named static and inside here create a css folder with
style.css inside.
In your base.html file you want to create your website with all the things that will be reused on every page of
your app. These may include:
Meta data for your website
External links to CDNs such as Bootstrap or Materialize
Jinja2 is the templating language used in Flask, so we use Jinja2 templates to generate dynamic HTML pages.
Jinja lets us write HTML mixed with special syntax to add logic, reuse code, and keep your templates clean and
maintainable.
{% extends %}
{% extends 'filename.html' %}
allows html files to use another as a base template and to expand upon them. For instance any page that will
have the head, header, and footer in will use
{% extends 'base.html' %}
at the top of the file.
{% includes %}
Whereas
{% extends 'filename.html' %}
uses a file as a base to expand upon,
{% includes 'filename_2.html' %}
draws another file into your code to use. This is phrased quite confusingly but a key example would to think
about your pages in sections. In the base.html, for example it would be clearer (and more modular) if it had the
head and main but for the header and footer just said "insert header/footer here". In this way we can make
header.html or footer.html as separate files that just consist of the header or footer elements. Then in
base.html we would have
{% includes 'header.html' %}
and
{% includes 'footer.html' %}
where we want them to be. This makes the code more readable and troubleshooting easier. Is there an issue with
something in the header? Then check out header.html instead of scrolling through base.html.
{% block %}
It's all well and good extending from a base template, but how can we add to it in our new file. This is where
{% block blockname %}{% endblock %}
comes in. In the file we are extending from we can add in a block with a descriptive name such as
{% block title %}{% endblock %}
in the title element. Then in the page that extends from base.html we can wrap some code in
{% block title %}{% endblock %}
and Flask will know to insert this into that specific space in the base template.
{% if %}
{% if %}{% else %}{% endif %}
blocks only render if a conditions is true.
{% for %}
{% for %}{% endfor %}
blocks iterate over lists of other collections such as: