Jinja2 include & extends not working as expected
<p>I used <code>include</code> and <code>extends</code> in the <code>base.html</code> file and expect them to be included in order. But the <code>extends</code> template is appended to the end of the file.</p>

<p>I expect my template to give me the output of:</p>

<pre class="lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;Title&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;p&gt;Test String from block !&lt;/p&gt;
&lt;footer&gt;text from footer.&lt;/footer&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>but the current result are:</p>

<pre class="lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;Title&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;footer&gt;text from footer.&lt;/footer&gt;
&lt;/body&gt;
&lt;/html&gt;
       &lt;p&gt;Test String from block !&lt;/p&gt;
</code></pre>

<p>In <code>base.html</code>, first I include <code>header.html</code>, then <code>content.html</code> and then <code>footer.html</code> but the rendered order is <code>header.html</code>, <code>footer.html</code>, <code>content.html</code>.</p>

<p><code>index.html</code></p>

<pre><code>{% extends "base.html" %}
{% block content %}
    &lt;p&gt;Test String from block !&lt;/p&gt;
{% endblock %}
</code></pre>

<p><code>base.html</code></p>

<pre><code>{% include "header.html" %}
&lt;body&gt;
    {% extends "content.html" %}
{% include "footer.html" %}
</code></pre>

<p><code>header.html</code></p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;Title&lt;/title&gt;
&lt;/head&gt;
</code></pre>

<p><code>content.html</code></p>

<pre><code>{% block content %}

{% endblock %}
</code></pre>

<p><code>footer.html</code></p>

<pre><code>&lt;footer&gt;text from footer.&lt;/footer&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>I would suggest structuring slightly differently.  I used a structure like this just recently and got the proper results.</p>

<p>index.html:</p>

<pre><code>{% extends "base.html" %}

{% block head %}
    &lt;!-- if you want to change the &lt;head&gt; somehow, you can do that here --&gt;
{% endblock head %}

{% block content %}
&lt;body&gt;
    &lt;p&gt;Test String from block !&lt;/p&gt;
    {% include 'content.html' %}
&lt;/body&gt;
{% include 'footer.html' %}
{% endblock content %}
</code></pre>

<p>base.html:</p>

<pre><code>&lt;!DOCTYPE html&gt;
    &lt;html lang="en"&gt;
    &lt;head&gt;
        {% block head %}
        &lt;meta charset="UTF-8"&gt;
        &lt;title&gt;Title&lt;/title&gt;
        {% endblock head %}
    &lt;/head&gt;
    {% block content %}
    {% endblock content %}
&lt;/html&gt;
</code></pre>

<p>content.html:</p>

<pre><code>&lt;!-- whatever you want in here --&gt;
</code></pre>

<p>footer.html:</p>

<pre><code>&lt;footer&gt;text from footer.&lt;/footer&gt;
</code></pre>

<p>Hopefully that helps.</p>

python flask jinja2