一个网站中，大部分网页的模块是重复的，比如顶部的导航栏，底部的备案信息。如果在每个页面中都重复的去写这些代码，会让项目变得臃肿，提高后期的维护成本。比较好的做法是，通过模板继承，把一些重复性的代码写在父模板中，子模板继承父模板后，再分别实现自己页面的代码。我们首先来看一个父模板 base.html 的例子：
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="base.css" />
<title> {% block title %} {% endblock %} </title>
{% block head %} {% endblock %}
</head>
<body>
<div id="body">{% block body %} {% endbody %} </div>
<div id="footer">
{% block footer %}
© Copyright 2008 by <a href="http://domins.invaild/">you</a>
{% endblock %}
</div>
</body>
</html>
以上父模板中，编写好了网页的整体结构，并且把所有子模板都需要用到的样式文件 base.css 也提前引用好了。然后针对子模板需要重写的地方，则定义成了 block，比如以上定义了 title、head、body、footer 这几个 block，子模板在继承了父模板后，重写对应 block 的代码，即可完成子模板的渲染。这里我们用继承 base.html 的方式，实现一个 index.html 文件，代码如下：
{% extends "base.index" %}
{% block title %} 首页 {% endblock %}
{% block head %}
<style type="text/css">
.detail{
color: red;
}
</style>
{% endblock %}
{% block content%}
<h1>这里是首页 </h1>
<p class="detail">
首页的内容
</p>
{% endblock %}
首先我们通过 extends 语法，加载父模板，因为 base.html 和 index.html 是在同一级目录下，所以直接写“base.html”。这里需要注意的是，extends 必须出现在子模版所有代码的最前面。接下来分别实现了 title、head、content 这三个 block，实现的 block 中的代码，将会被自动填充到父模板指定的位置，并且最终会生成一个完成 html 结构的 index.html 文件。
模板中不能出现重名的 block，如果一个地方需要用到另外一个 block 中的内容，可以使用 self.blockname 的方式进行引用，比如：
<title>
{% block title %}
这是标题
{% endblock %}
</title>
<h1> {{ self.title()}} </h1>
以上示例代码中，h1 标签中通过 {{self.title}} 把 title 这个 block 中的内容引用到 h1 标签中。
如果子模版想要继承父模板中某个 block 的内容，比如以上案例中，我们想要继承父模板 footer 这个 block 中已有的内容，则可以通过 super() 来实现：
{% block footer %}
{{super()}}
// 子模版自己的代码
{% endblock %}
如果没有 {{super()}}，那么子模版将不能继承父模板 footer 这个 block 中的内容。
原文地址:https://blog.csdn.net/weixin_48320163/article/details/136027767
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若转载，请注明出处：http://www.7code.cn/show_66851.html
如若内容造成侵权/违法违规/事实不符，请联系代码007邮箱：suwngjj01@126.com进行投诉反馈，一经查实，立即删除！
