Inheritance in jinja2 templates
Question
I've question about inheritance in jinja2.
Here is my layout.html looks like:
<html>
<body>
<div id='header'>Some header stuff</div>
<div id='left-panel'>{% block lpanel %}</div>
<div id='content'>{% block content %}</div>
<div id='right-panel'>{% block rpanel %}</div>
<div id='footer'>Some footer stuff</div>
</body>
</html>
3 divs (left and right panels and content) are dynamical and should be filled with some functions.
Now the question: what should i do, to achieve my goal in proper way?
Should I create some child templates here? Or maybe my functions, which create content for those 3 divs should return HTML and I should pass it's result as parameters to layout template? (not the most elegant solution...) Any other way?
EDIT: thanks for your answers, but unfortunatelly i still have some doubts... i don't know what's the proper way to connect those templates with my flask/python code...
If i had just a layout.html and one child template, which extends the layout, then it's really simple: in python i write a function and end it with something like 'return render_template('child.html', my_varables....)
but here i need 3 functions: one for rendering content of main 'content' div and additional 2 funtions for creating left and right panel. how can i join all 3 of them to get my output page?
2 answers
solution1
2 2015-02-13 10:08:28
Note that you should close {% block %} tags by adding a {% endblock %} tag.
So it should be like:
<div id='left-panel'>{% block lpanel %}{% endblock %}</div>
There are includes and there are child templates .
Includes
You've got a template named layout.html .
If you'd like to split your lpanel , content and rpanel blocks, you can create a separate template for it, and then include it:
<div id='left-panel'>{% include 'lpanel.html' %}</div>
In the lpanel.html do whatever you want to place in that left-panel div.
Child templates
You could also create a base template (let's say your left panel and right panel are always the same). You want to change just the content .
You can create a base template (for example, layout.html ).
<html>
<body>
<div id='header'>Some header stuff</div>
<div id='left-panel'>Some stuff</div>
<div id='content'>{% block content %}{% endblock %}</div>
<div id='right-panel'>More stuff</div>
<div id='footer'>Some footer stuff</div>
</body>
</html>
Let's say you want two pages on your site - "About me" and "News".
You create two templates: about.html and news.html , and extend them with the base template.
about.html:
{% extends "layout.html" %}
{% block content %}Hey! I'm mkay and I'm learning about Jinja2!{% endblock %}
news.html:
{% extends "layout.html" %}
{% block content %}2015-02-13: I joined StackOverflow.{% endblock %}
You don't have to put anything else in these child templates - they'll just overwrite whatever you have placed in it (in this example, we overwrote just the content block).
solution2
1 2015-02-13 14:28:56
In my view, what you are trying to achieve can be accomplished by using your current html as a parent and separate child html pages for your left-panel , right-panel and content .
You can use the below as an outline to create your child pages : (This specific eg. is for block content . You can replace content with left-panel or right-panel )
{% extends "layout.html" %}
{% block content/l %}
<!--what ever html you want fill-->
{% endblock %}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.