Django25——模板继承

最新推荐文章于 2023-06-22 14:44:29 发布

远近2021

最新推荐文章于 2023-06-22 14:44:29 发布

阅读量487

点赞数

分类专栏： # Django Python学习园地文章标签： django python

本文链接：https://blog.csdn.net/weixin_47197906/article/details/124955622

版权

Python学习园地同时被 2 个专栏收录

125 篇文章 42 订阅

订阅专栏

Django

30 篇文章 11 订阅

订阅专栏

文章目录

1、模板继承步骤
2、使用模板继承实现练习2

模板继承可以减少页面内容的重复定义，实现页面内容的重用
典型应用：网站的头部、尾部是一样的，这些内容可以定义在父模板中，子模板不需要重复定义
block标签：在父模板中预留区域，在子模板中填充
extends继承：继承，写在模板文件的第一行

1、模板继承步骤

（1）定义父模板base.html
使用%block进行占位

{ %block block_name%}
这里可以定义默认值
如果不定义默认值，则表示空字符串
{ %endblock%}

（2）定义子模板index.html

继承父模板

{ % extends "base.html" %}

在子模板中使用block填充预留区域
定义父模板中block_name的内容

{ %block block_name%}
实际填充内容
{ %endblock%}

说明：

如果在模版中使用extends标签，它必须是模版中的第一个标签
不能在一个模版中定义多个相同名字的block标签
子模版不必定义全部父模版中的block，如果子模版没有定义block，则使用了父模版中的默认值
如果发现在模板中大量的复制内容，那就应该把内容移动到父模板中
使用可以获取父模板中block的内容
为了更好的可读性，可以给endblock标签一个名字。

 { % block block_name %}
      区域内容
{ % endblock block_name %}

2、使用模板继承实现练习2

分析index.html和login.html，发现头部和尾部是相同的，则将头部单独放在header.html，尾部放在footer.html，base.html包含header.html和footer.html，内容使用%block进行占位。
index2.html继承base.html，并定义base.html中%block的内容。
login2.html继承base.html，并定义base.html中%block的内容。
在这里插入图片描述

定义header.html

在这里插入图片描述

定义footer.html

<!-- 页脚BEGIN -->
<div class="bg-light border-top overflow-hidden">
    <p class="text-muted text-center my-3">泸州职业技术学院</p>
    <p class="text-muted text-center mb-5">Copyright <i class="fa-solid fa-copyright"></i>20XX</p>
</div>
<!-- 页脚END -->

定义base.html

在这里插入图片描述

{% load static %}
<!DOCTYPE html>
<html lang="zh">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv = "X-UA-Compatible" content="ie=edge">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="{% static 'libs/bootstrap-4.5.3-dist/css/bootstrap.min.css' %}">

    <!-- 引入其他的第三方样式库 -->
    <link rel="stylesheet" href="{% static 'libs/fontawesome-free-6.1.1-web/css/all.min.css' %}">

    <!-- 引入自定义的样式文件 -->
    <link rel="stylesheet" href="{% static 'css/login.css' %}">

    <title>{% block title %}{% endblock %}</title>
  </head>
<body>
    {% include 'exercise02/header.html' %}
    {% block content %}
    {% endblock %}
    {% include 'exercise02/footer.html' %}
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="{% static 'libs/jquery-3.6.0/jquery-3.6.0.min.js' %}"></script>
    <script src="{% static 'libs/bootstrap-4.5.3-dist/js/bootstrap.bundle.min.js' %}"></script>
    <script src="{% static 'libs/bootstrap-4.5.3-dist/js/bootstrap.min.js' %}"></script>
</body>
</html>

定义index02.html

在这里插入图片描述

定义login2.html

在这里插入图片描述

定义路由和视图进行访问

path('index02/',views.index02,name='index02'),
path('login02/',views.login02,name='login02'),

def index02(request):
    return render(request,'exercise02/index2.html')

def login02(request):
    return render(request,'exercise02/login2.html')

访问查看效果

在这里插入图片描述

修改index2.html和login2.html

<a class="nav-link" href="{% url 'exercise02:index02' %}">
   <i class="fa-solid fa-house-user"></i> 首页
</a>

<a class="dropdown-item" href="{%url 'exercise02:login02' %}">
    <i class="fa-solid fa-users"></i> 登录
</a>

远近2021

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
Django25——模板继承

文章目录1、模板继承步骤2、使用模板继承实现练习2定义header.html定义footer.html定义base.html定义index02.html定义login2.html定义路由和视图进行访问访问查看效果修改index2.html和login2.html模板继承可以减少页面内容的重复定义，实现页面内容的重用典型应用：网站的头部、尾部是一样的，这些内容可以定义在父模板中，子模板不需要重复定义block标签：在父模板中预留区域，在子模板中填充extends继承：继承，写在模板文件的第一行1、模
复制链接

扫一扫