赞
踩
Django模版引擎中最强大也是最复杂的部分就是模版继承了。模版继承可以让您创建一个基本的“骨架”模版,它包含您站点中的全部元素,并且可以定义能够被子模版覆盖的 block。
模板可以用继承的方式来实现复用,减少冗余内容。
网页的头部和尾部内容一般都是一致的,我们就可以通过模板继承来实现复用。
父模板用于放置可重复利用的内容,子模板继承父模板的内容,并放置自己的内容。
模板继承的应用场景
通常一个网站的某几个页面都有一些公共的布局,如导航栏、侧边栏和页脚的一些地方,如果将这些公共的部分抽离出来,放在一个单独的 html 页面中用于给其他页面继承,就称它为父版,而继承父版的页面就称为子版,同一个父版可以被多个子版继承。
子版中可以继承父版的内容和属性,这样可以使得页面更加简洁,而且在子版中可以修改母版中的部分内容。
标签 block...endblock: 父模板中的预留区域,该区域留给子模板填充差异性的内容,不同预留区域名字不能相同。
- {% block 名称 %}
- 预留给子模板的区域,可以设置默认内容
- {% endblock 名称 %}
子模板使用标签 extends 继承父模板:
{% extends "父模板路径"%}
在子模板中设置父模板预留区域的内容:
- { % block 名称 % }
- 内容
- {% endblock 名称 %}
子模板如果没有设置父模板预留区域的内容即bolck..endblock区域,则使用在父模板设置的默认内容,当然也可以都不设置,就为空。
4.1. 我们在先创建之前项目的 templates 目录中添加 base.html 文件
2.在base.html中输入如下代码:
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>DOTmanager教程</title>
- </head>
- <body>
- <h1>hello world!</h1>
- <p>Django 测试</p>
- {%block body%}
- <p>original</p>
- {%endblock%}
- </body>
- </html>
以上代码中,名为 body 的 block 标签是可以被继承者们替换掉的部分。
所有的 {% block %} 标签告诉模板引擎,子模板可以重载这些部分。
3. 在views.py中定义一个新定义一个视图函数
- def mydefB(request):
- return render(request,"base.html")
4. 然后在urls.py中配置路由:其中path('base/', views.mydefB),就是我们新增加的路由
- urlpatterns = [
-
- path('mytemp/', views.mydef),
-
- path('base/', views.mydefB),
- ]
5. 然后我们首先看一下base.html网页显示结果吧:显示成功
6 接下来我们来尝试继承., 我们在之前一直使用的mytemp.html 中继承 base.html,并替换特定 block,mytemp.html 修改后的代码如下:
我们仍然在原来代码里面进行新增:
新增了:{%extends "base.html" %} 这个必须放在标签里面的第一位,否则会报错,大家可以自己尝试,代码意思是:首先载入名为 ‘base’ 的模板中的内容到当前模板
新增了如下代码:
{% block body %}
<p>not original</p>
{% endblock %}
也就是修改其中名为body的block里面的内容
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Title</title>
- <link rel="stylesheet" href="/static/plugins/bootstrap-3.4.1/dist/css/bootstrap.css">
- </head>
- <body>
- {%extends "base.html" %}
- {%load my_tags%}
- {% load static %}
-
- <h1>if/else演示</h1>
- <ul>
- {% block body %}
- <p>not original</p>
- {% endblock %}
- {{num|sub:3}}
- {%add 11 12 13%}
- {% my_html "zzz" "xxx" %}
- {{num}}<img decoding="async" src="{% static 'images/python.png' %}" alt="python-logo">
-
- </ul>
- </body>
- </html>
7. 结果如下: 可见继承了父模板的内容,但也修改了父模板中body block的内容
8. 细节的同学肯定发现了,为什么执行了extends继承后,mytemp.html里面的其他程序好像没有执行??这个我们继续往下学,我会给大家解答。
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。