Question

我对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，我应该将它的结果作为参数传递给布局模板？（不是最优雅的解决方案......）还有其他方式吗？

编辑：谢谢你的回答，但不幸的是我还有一些疑问......我不知道将这些模板与我的flask / python代码连接的正确方法是什么......

如果我只有一个layout.html和一个子模板，它扩展了布局，那么它非常简单：在python中我编写一个函数并用'return render_template（'child.html'，my_varables）结束它。 ...）

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

Answer 1

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

<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>

让我们说你想在你的网站上找到两个页面 - ＆＃34;关于我＆＃34;和＆＃34;新闻＆＃34;。

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

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 %}

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

Answer 2

在我看来，您尝试实现的目标可以通过将当前的html用作父级，并为left-panel，right-panel和content分隔子html页面来实现。< / p>

您可以使用以下内容作为大纲来创建子页面：（此特定例如适用于block content。您可以将content替换为left-panel或right-panel）

{% extends "layout.html" %}

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

jinja2模板中的继承

2 个答案:

含

子模板