django 模板的继承

在这里插入图片描述
在这里插入图片描述

模板的继承—实现页面模块化

父模板

格式

{% 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 %}

在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/weixin_45875105/article/details/112464564