首页 文章

jinja2模板中的继承

提问于
浏览 次
0

我对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个来获取我的输出页面？

python flask jinja2

2 回答

  • 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 ，并使用基本模板扩展它们 .

    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 块） .

    回复于
  • 2

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

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

    {% extends "layout.html" %}

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

相关问题