Learn

If you go to any website you may notice certain elements exist across different web pages.

The navigation bar is a good example of a common page element. This is the banner at the top of most sites that has links to different pages. No matter what page you’re on the navigation bar is there.

Imagine having separate files for each web page and wanting to make a change to the navigation bar. Would you have to change the content of every template of the site? No, that would take too long.

To solve this problem template files are used to share content across multiple templates. The simplest case is a file that includes the top portion of the templates through the <body> tag and then the closing </body> and </html> tags. Jinja2 statement delimiters are then used to identify the area of the template where specific content will be substituted in.

<html>
  <head>
    <title>MY WEBSITE</title>
  </head>
  <body>
  {% block content %}{% endblock %}
  </body>
</html>

For this exercise we will name the above template base.html.

To inherit this content in another template we will use the extends statement. The code to be substituted should then be surrounded by {%block content%} and {%endblock%}. All together this looks like the following template:

{% extends "base.html"  %}

{% block content %}
    <p>This is my paragraph for this page.</p>
{% endblock %}

This template is named index.html.

When a route returns render_template("index.html") the rendered page will have this content.

<html>
  <head>
    <title>MY WEBSITE</title>
  </head>
  <body>
    <p>This is my paragraph for this page.</p>
  </body>
</html>

Instructions

Look in index.html and recipe.html and identify the common HTML at the top and bottom of the templates.

Copy the common HTML from one of those files and paste it into the blank base.html file. Don’t forget to include the closing tags, </body> and </html>.

Now in base.html identify where you want to put {%block content%}{%endblock%}. It is your choice whether {%block content%} and {%endblock%} are on the same line or separate lines. Both work as long as there is nothing in between.

Now go to index.html and:

Delete the duplicate text
Extend base.html at the top
Surround the index.html specific template with an {%block content%} and {%endblock%}

Remember you start the block with {%block content%} and close it with {%endblock%} with the HTML in between.

Do the same in recipe.html. Be sure to extend base.html and replace the duplicate text with the inheritance blocks.

Sign up to start coding

By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.

Or sign up using:

Already have an account?