在 Bootstrap 选项卡中使用 Jinja 块答案

【问题标题】：Use Jinja blocks in Bootstrap tabs在 Bootstrap 选项卡中使用 Jinja 块
【发布时间】：2014-08-03 07:07:47
【问题描述】：

我有一个主 layout.html，它有一个导航栏，我的所有页面都从该导航栏扩展。我在 test.html 中有内容。我想将引导选项卡添加到 test.html（不更改 layout.html）。

计划：我的计划： tabs.html 扩展 layout.html text.html 扩展 tabs.html

结果： Tabs.html 很好地继承了导航栏。但是 text.html 中的任何内容都没有显示出来。代码如下。

layout.html：

<!DOCTYPE html PUBLIC "-//IETF//DTD HTML 2.0//EN">
<html>
<head>
</head>
<body>
[navbar code]
<div class="container">
    {% block body %}        
    {% endblock body %}
</div>
</body>
</html>

在 tabs.html 中：

{% extends "layout.html" %}
{% block body %}

<div id="content">
<ul id="tabs" class="nav nav-tabs" data-tabs="tabs">
    <li class="active"><a href="#checklist" data-toggle="tab">Checklist</a></li>
</ul>
<div id="my-tab-content" class="tab-content">
    <div class="tab-pane active" id="checklist">
        {% block overview %}
        {% endblock overview%}
    </div>
</div>
</div>
<script type="text/javascript">
jQuery(document).ready(function ($) {
    $('#tabs').tab();
});
</script>    
</div> 
{% endblock body%}

在 text.html 中

{% extends "tabs.html" %}
{% block overview %}
[content]
{% endblock %}

【问题讨论】：

标签： html twitter-bootstrap jinja2 extends

【解决方案1】：

将 text.html 重命名为 _text.html 并删除 {% extends "tabs.html"}。

接下来，在 tabs.html 中替换：

{% block overview %}
{% endblock %}

与：

{% include '_text.html' %}

【讨论】：