Tornado webapp page has elements from extended template but missing all other elements

Question

I'm creating a webapp with Tornado, and I'm having this issue where an .html page I have is extending another .html page like so:

{%extends "sitebase.html" %}
<div id="about">
 <p>hello</p>
</div>

When I serve this page, I see the correct content from 'sitebase.html' (a simple nav bar), however I don't see the 'hello' on the web page. I've inspected the page and don't even see an element with this 'hello', and there are no errors in the console. When I remove the extends block and just paste the contents of sitebase.html I see the expected result.

Has anyone else had this experience with tornado where using an extend block causes other pieces of the page to be not rendered?

Answer 1

From docs (emphasis mine):

{% extends *filename* %}

Inherit from another template. Templates that use extends should contain one or more block tags to replace content from the parent template. Anything in the child template not contained in a block tag will be ignored. For an example, see the {% block %} tag.

This means that when you extend a template, the content within a {% block %} tag is rendered, anything outside the tag is ignored.

Example:

base.html:

<title>{% block title %}Default title{% end %}</title>

{% block content %}
{% end %}

mytemplate.html:

{% block title %}Title for this page{% end %}

{% block content %}
  Some data to render in the content block
{% end %}

This will not be rendered because it is outside a block tag