Question

我有一个主layout.html，它有一个导航栏，我的所有页面都可以从中扩展。我在test.html中有内容。我想为test.html添加bootstrap选项卡（不更改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 %}

Answer 1

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

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

{% block overview %}
{% endblock %}

使用：

{% include '_text.html' %}

在Bootstrap选项卡中使用Jinja块

1 个答案: