模板的继承—实现页面模块化
父模板
格式
{% block block_name %}
定义模板块,此模板块可以被子模板重新定义的同名块覆盖
{% endblock block_name %}
子模板
格式
{% extends ‘父模板名称’ %}
{% block block_name %}
子模板块用来覆盖父模板中 block_name 块的内容
{% endblock block_name %}
整体代码
base.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
{% block mytitle%}
<title>主页</title>
{% endblock %}
</head>
<body>
<h1 style="background-color: blue;">注册,登录</h1>
{% block page_info %}
<h1 style="background-color: orange;">网站主页</h1>
<a href="/sport">进入运动页</a>
<!-- 根据名字 反推 url地址 -->
<a href="{% url 'sport' %}">进入运动页</a>
<a href="/news">进入新闻页</a>
<a href="{% url 'pagen' '1' %}">第1页</a>
<a href="{% url 'pagen' '2' %}">第2页</a>
{% endblock %}
<h1 style="background-color: grey;">联系我们:zhangsan</h1>
</body>
</html>
子类模板
sport.html
{% extends 'base.html' %}
{% block mytitle %}
<title>运动主页</title>
<a href="/">返回首页</a>
{% endblock %}
{% block page_info %}
<h2 style="background-color: green;">运动页的首页</h2>
{% endblock %}
子类模板
news.html
{% extends 'sport.html' %}
{% block mytitle %}
<title>新闻主页</title>
<a href="/">返回首页</a>
{% endblock %}
{% block page_info %}
<h2 style="background-color: gold;">新闻页</h2>
{% endblock %}