jinja2 模板中的继承答案

【问题标题】：Inheritance in jinja2 templatesjinja2 模板中的继承
【发布时间】：2015-04-14 08:02:37
【问题描述】：

我对 jinja2 中的继承有疑问。

这是我的 layout.html 的样子：

<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 个 div（左右面板和内容）是动态的，应该填充一些功能。

现在的问题是：我应该怎么做才能以正确的方式实现我的目标？

我应该在这里创建一些子模板吗？或者也许我的函数，为这 3 个 div 创建内容应该返回 HTML，我应该将它的结果作为参数传递给布局模板？（不是最优雅的解决方案......）还有其他方式吗？

编辑：感谢您的回答，但不幸的是我仍然有一些疑问......我不知道将这些模板与我的烧瓶/python代码连接起来的正确方法是什么......

如果我只有一个 layout.html 和一个扩展布局的子模板，那真的很简单：在 python 中，我编写一个函数并以类似 'return render_template('child.html', my_varables. ...)

但在这里我需要 3 个功能：一个用于渲染主“内容”div 的内容，另外 2 个用于创建左右面板。如何加入所有 3 个以获取我的输出页面？

【问题讨论】：

标签： python flask jinja2

【解决方案1】：

请注意，您应该通过添加 {% endblock %} 标签来关闭 {% block %} 标签。
所以应该是这样的：

<div id='left-panel'>{% block lpanel %}{% endblock %}</div>

有includes，也有child templates。

包括

您有一个名为 layout.html 的模板。
如果您想拆分 lpanel、content 和 rpanel 块，可以为其创建单独的模板，然后将其包含在内：

<div id='left-panel'>{% include 'lpanel.html' %}</div>

在 lpanel.html 中做任何你想在 left-panel div 中放置的东西。

子模板

您还可以创建一个基本模板（假设您的左侧面板和右侧面板始终相同）。您只想更改content。

您可以创建一个基本模板（例如，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>

假设您希望网站上有两个页面 - “关于我”和“新闻”。

您创建两个模板：about.html 和 news.html，并使用基本模板扩展它们。

关于.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 %}

您不必在这些子模板中添加任何其他内容 - 它们只会覆盖您在其中放置的任何内容（在此示例中，我们仅覆盖了 content 块）。

【讨论】：

【解决方案2】：

在我看来，您想要实现的目标可以通过使用您当前的 html 作为父级并为您的 left-panel、right-panel 和 content 单独的子 html 页面来实现。

您可以使用以下内容作为大纲来创建您的子页面：（这个具体的例子是block content。你可以用left-panel或right-panel替换content）

{% extends "layout.html" %}

{% block content/l %}
<!--what ever html you want fill-->
{% endblock %}

【讨论】：