Now that we’ve set up a basic route and rendered an index page, we can really start working on developing the website a little more fully. Of course, the way we’ve served the current index page is fine, but if we have lots of dynamic content, we will rapidly run into some troubles. So we need a better way of doing this – we will be using the Jinja templating engine.

4. Using HTML templates

4.1 About the Jinja Template Engine
The first thing that we will do is create a file called base.html. This will contain the code that we are going to use for HTML and Bootstrap. For Jinja, we use these placeholders

{% block title %} {% endblock %}: A block serves as a placeholder for a title, we’ll later use it in other templates to give a custom title for each page in the application without rewriting the entiresection each time.

{{ url_for(‘index’)}}: A function call that will return the URL for the index() view function. This is different from the past url_for() call we used to link a static CSS file, because it only takes one argument, which is the view function’s name, and links to the route (see the app.py file) associated with the function instead of a static file.

{% block content %} {% endblock %}: Another block that will be replaced by content depending on the child template (templates that inherit from base.html) that will override it.

4.2 In base.html
Inside templates/base.html we put this code. Much of this is standard HTML, but there are some of those contents above that we will use for inheritance purposes. There is also a link to bootstrap.

<!doctype html>

{% block content %} {% endblock %}

4.3 Updating index.html
We can now reconfigure index.html to make use of the base.html file. This is very straightforward to do.

{% extends ‘base.html’ %}

{% block content %}

{% block title %} Welcome to FlaskBlog {% endblock %}

{% endblock %}

Don’t forget to commit the changes!