Viet Phan X

Building MVP with Flask Day 4 – Using Children Templates

👨‍💻 Software Development
1627
Mar 23, 2019

Hi all. We managed to add Bootstrap 4 styling to our MVP in the last session.

We also prepared index.html to be our base template, which will be used as an extension for all our future children templates. Header design is also done.

So today, I would like to add footer and body content to our landing page.

Let's execute.

Updating base template

First, rename dynamic body content block in base template index.html from

{% block landingLayout %}
{% endblock %}

to

{% block content %}
{% endblock %}

It is for clarity purposes. In all online tutorials, the block is named as content.

And I found out why. You can have only one base template and body block should have a common name, that will be used in all our children templates. Content is a reasonable name and will not confuse anyone in the future when looking at my code.

In landingLayout.html file, wrap HTML content with Jinja2 content tag.

{% block content %}
    <h1>Hello, {{ user.username }}!</h1>
{% endblock %}

Restart Gunicorn and let's hope our landing page will display Hello username.

Nope.

Design is of landing page has not changed and Hello username string is not displayed. Maybe our route in routes.py is wrong and it points to the wrong HTML file?

return render_template('index.html', title='Home', user=user)

Let's try to change the template file from index.html to landingLayout.html

return render_template('landingLayout.html', title='Home', user=user)

This change broke the whole thing.

500 Internal Server Error 2019 02 27 17 01 13

File landingLayout.html is located in a different folder than index.html so maybe changing the path to HTML template will help?

return render_template('landingpage/landingLayout.html', title='Home', user=user)

Yep, it does!

Hey You 2

Extending a children template

Now landingLayout content is displayed, but the header disappeared? Maybe we forgot to extend landingLayout with index.html base template?

Because the header is included there. So let's add extension to landingLayout.html at the start of the file.

{% extends 'index.html' %}

Okay, the header is displayed, but body content disappeared, omg.

Header Menu 2019 02 19 18 40 00 1024x140 2

Let's check HTML source code if the body content is not hidden behind the header. I saw this behavior before. Bootstrap 4 sticky headers will overlay part of body HTML content and I always had to add a top margin to the body element.

So add top margin to body content in landingLayout.html.

<h1 class="mt-5">Hello, {{ user.username }}!</h1>

It worked!

Home Financia 2019 02 27 17 10 21

Ok, I was right. Now I can safely start to design body content with Bootstrap 4 grid components.

Add Bootstrap 4 grid

Bootstrap 4 grid is created with rows and columns like so.

<div class="row mt-5"></div>
<div class="row mt-5">
    <div class="col-2"></div>
    <div class="col-8">
        <h1 class="mt-5">Hello, {{ user.username }}!</h1>
    </div>
    <div class="col-2"></div>
</div>

Yeah, now it looks much better.

Home Financia 2019 02 27 17 29 27 1024x220

Body content placeholder is done for now.

Add footer to finish this coding session.

Footer 2019 03 04 17 20 14

Beautiful, we have header, body and footer layouts ready. Next time, we can fill the body with some meaningful content.

See you in the next post!


You need a

Innovation Advisor

Fresh eyes help generate new perspectives. Book a free call in which we identify hidden opportunities.

15 min call

Get product feedback


If You Like what I do
You can buy me a coffee 👇
Send via PayPalSend with Bitcoin

🤙 Let's connect

Made by Viet Phan © 2018-2024Privacy Policy