Building MVP with React Flask Full Stack – Day 4 – Extending children templates

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

We also prepared index.html to be our base template, which will be used as 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.

 

Extending 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 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 wrong html file?

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

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

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

This change broke whole thing.

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

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

Yep it does!

Now landingLayout content is displayed, but header disappeared?

Maybe we forgot to extend landingLayout with index.html base template?

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

{% extends 'index.html' %}

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

Let’s check html source code if body content is not hidden behind header.

I saw this behaviour before. Bootstrap 4 sticky headers will overlay part of body html content and i always had to add top margin to body element.

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

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

It worked!

Ok, I was right.

Now i can safely start to design body content with Bootstrap 4 grid components.

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.

Body content placeholder is done for now.

Add footer to finish this coding session.

Beautiful, we have header, body and footer layouts ready.

Next time, we can fill body with some meaningful content.

See you in the next post!

Share it!


Want to support me in my journey 🚀? You can send me a donation below 👇.

Donate with Paypal

Leave a Reply

avatar

Want to support me in my journey 🚀? You can send me a donation below 👇.

Donate with Paypal

Made with 🔥 by Viet Phan 2018