前端模板的继承是为了解决前端代码重复问题。前端代码重复问题可以用include标签来实现,也可用前端模板的继承来实现。
前端模板继承原理:在父模版中定义一个block接口,然后子模版再去实现。
{% include 'fubiao.html' %}#include只是导入文件
#继承可用{% block %}{% endblock %}
{% block 'fubiao.html' %}
{% endblock %}
在父模版base.html模块中,定义好两个 block接口,子模板然后通过extends标签来实现。extends标签必须放在模版的第一行,子模板中的代码必须放在block中。
父模块:
<main>
<div class="container">
<div class="row">
{% block body %}
{% endblock %}
</div>
</div>
</main>
子模块:
{% extends 'base.html' %}
{% block body %}
<div class="col-lg-8">
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="3"></li>
</ol>
</div>
</div>