其实就是利用{%块xxx %},,{% endblock %}的方式定义一个块,相当于占位。存放在某个html中,比如base.html
然后在需要实现这些块的文件中,使用继承{%延伸”基地。html " %}的方式引入母板文件,然后在{%块xxx %}……{% endblock %}块定义中实现具体的内容。
base.html示例:注意块的定义。
& lt; !DOCTYPE html>
& lt; html lang=坝τ谩北?
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt;元http-equiv=癤-UA-Compatible”内容=癐E=边缘”比;
& lt;元name=笆哟啊蹦谌?翱矶?设备宽度,初始=1”比;
& lt; !——上述3个元标签*必须*放在最前面,任何其他内容都*必须*跟随其后!——比;
& lt;元名称=懊枋觥蹦谌?氨?
& lt;元名称=白髡摺蹦谌?氨?
& lt;链接rel="偶像" href=" http://v3.bootcss.com/favicon.ico " rel=巴獠縩ofollow”比;
& lt;链接rel="样式表" href=" https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css " rel=巴獠縩ofollow”比;
& lt; title>所有的书都在这里& lt;/title>
{%块page_css %}
{% endblock %}
{%块page_js %}
{% endblock %}
& lt; !——引导核心CSS——比;
& lt;链接的href=" https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css " rel=巴獠縩ofollow”rel=把奖怼北?
& lt; !——IE10浏览器视窗黑客表面/桌面Windows 8的bug——比;
& lt;链接的href=" http://v3.bootcss.com/assets/css/ie10-viewport-bug-workaround.css " rel=巴獠縩ofollow”rel=把奖怼北?
& lt; !——这个模板的定制款式比;
& lt;链接的href=" http://v3.bootcss.com/examples/dashboard/dashboard.css " rel=巴獠縩ofollow”rel=把奖怼北?
& lt; !——只是用于调试目的。实际上并不复制这两行!——比;
& lt; !——(如果lt IE 9)祝辞& lt;脚本src=" http://v3.bootcss.com/assets/js/ie8-responsive-file-warning.js "祝辞& lt;/script> & lt; ! [endif]——比;
& lt;脚本src=" http://v3.bootcss.com/assets/js/ie-emulation-modes-warning.js "祝辞& lt;/script>
& lt; !——HTML5垫片和回应。js IE8支持HTML5元素和媒体查询——比;
& lt; !——(如果lt IE 9)比;
& lt;脚本src=" https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js "祝辞& lt;/script>
& lt;脚本src=" https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js "祝辞& lt;/script>
& lt; ! [endif]——比;
& lt;/head>
& lt; body>
{%包括“导航。html“%}
& lt; div类=癱ontainer-fluid”比;
& lt; div类="行"比;
& lt; div class=" col-sm-3 col-md-2栏“比;
& lt; ul类=皀av nav-sidebar”比;
& lt;李类="{%块book_class %} {% endblock %}”祝辞& lt; a href=" https://www.yisu.com/book_list/" rel=巴獠縩ofollow”祝辞所有的书& lt;跨类=皊r-only祝辞(当前)& lt;/span> & lt;/a>
& lt;/li>
& lt;李类="{%块publisher_class %} {% endblock %}”祝辞& lt; a href=" https://www.yisu.com/publisher_list/" rel=巴獠縩ofollow”在出版社& lt;/a> & lt;/li>
& lt;李类="{%块author_class %} {% endblock %}”祝辞& lt; a href=" https://www.yisu.com/author_list/" rel=巴獠縩ofollow”在作者& lt;/a> & lt;/li>
& lt;/ul>
& lt;/div>
& lt; div class=" col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2主要“比;
{%块main_body %}
{#这里是每个页面不同的部分#}
{% endblock %}
& lt;/div>
& lt;/div>
& lt;/div>
& lt; !——引导核心JavaScript==================================================?
& lt; !——放置在文档的最后网页加载更快,比;
& lt;脚本src=" https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js "祝辞& lt;/script>
& lt; script>窗口。jQuery | | document . write (' & lt;脚本src=" http://v3.bootcss.com/assets/js/vendor/jquery.min.js "祝辞& lt; \/script>”) & lt;/script>
& lt;脚本src=" https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js "祝辞& lt;/script>
& lt; !——让我们的图像占位符的工作。实际上并不复制下一行!——比;
& lt;脚本src=" http://v3.bootcss.com/assets/js/vendor/holder.min.js "祝辞& lt;/script>
& lt; !——IE10浏览器视窗黑客表面/桌面Windows 8的bug——比;
& lt;脚本src=" http://v3.bootcss.com/assets/js/ie10-viewport-bug-workaround.js "祝辞& lt;/script>
& lt;/body>
& lt;/html>
某个继承页:
{#继承母板#}
{%延伸的基础。html ' %}
{%块book_class %}
活跃的
{% endblock %}
{%块page_css %}
{%加载静态%}
& lt;链接rel="样式表" href=" https://www.yisu.com/zixun/{% get_static_prefix %} book_list_only。css " rel="外部nofollow”比;
{% endblock %}
{#把自己页面的内容,填入母板里面相应的位置#}
{%块main_body %}
& lt; div类="面板panel-primary "比;
& lt; div类=皃anel-heading”比;
& lt; h4类="面板标题"在我是自定义内容,用来替换母板中指定的位置& lt;/h4>
& lt;/div>
& lt; div类=皃anel-body”比;
& lt; div类="行"比;
& lt; div类=癱ol-md-8”比;& lt;/div>
& lt; div类=" col-md-4 "祝辞& lt; a href=" https://www.yisu.com/add_book/" rel=巴獠縩ofollow”rel=巴獠縩ofollow”class=癰tn btn-primary祝辞& lt;我类=癴a fa-plus-square祝辞& lt;/i>添加新书& lt;/a>
& lt; a href=" https://www.yisu.com/add_publisher/" rel=巴獠縩ofollow”rel=巴獠縩ofollow”class=癰tn btn-success祝辞& lt;我类=癴a fa-plus-square”祝辞& lt;/i>添加出版社& lt;/a> & lt;/div>
& lt;/div>
& lt;表类="表table-dark table-hover”比;
& lt; thead>
& lt; tr>
& lt; th> # & lt;/th>
& lt; th> id
