Django模板结构优化{% include %}和{% extend %}标签

最新推荐文章于 2021-03-01 14:22:10 发布

stu_xujin

最新推荐文章于 2021-03-01 14:22:10 发布

阅读量7.3k

点赞数 10

分类专栏： django

本文链接：https://blog.csdn.net/xujin0/article/details/83420633

版权

django 专栏收录该内容

45 篇文章 15 订阅

订阅专栏

{% include %}标签

在拉勾网中我们可以发现，他的每个网页的头部和尾部都是一样的，那么他是每个html文件中都写了这些代码吗？
答案肯定是否定的。这个时候就需要用到我们的{% include %}标签了。

新建一个项目，然后在里面新建一个template_include_demo的app，然后创建一个urls.py的文件，

在主urls中对template_include_demo这个app做一层映射，即主urls中添加代码：

path('template/',include('template_include_demo.urls')),

然后在和app的同级目录下新建5个html文件，分别为template_include.html,company.html,school.html,header.html,footer.html
然后去views中写入代码:

from django.shortcuts import render

# Create your views here.
def index(request):
    return render(request,'template_include.html',{'username':'zhiliao'})

def company(request):
    return render(request,'company.html')

def school(request):
    return render(request,'school.html')

在urls中添加映射：

from django.urls import path
from . import views

app_name = 'template'

urlpatterns = [
    path('',views.index),
    path('company/',views.company,name = 'company'),
    path('school/',views.school,name = 'school'),
]

然后我们去编写html的代码
在header.html中写入

<header>
    <ul>
        <li><a href="{% url 'template:index' %}">首页</a></li>
        <li><a href="{% url 'template:company' %}">公司</a></li>
        <li><a href="{% url 'template:school' %}">校园</a></li>
    </ul>
</header>

在footer.html中写入

<div class="footer">
    这是footer部分
</div>

注意：这两个文件中只有这些代码，没有其他的一些无关的代码。
然后在template_include.html中写入

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

{% include 'header.html' %}

<div class="content">
    这是中间内容<br>
</div>

{% include 'footer.html' %}

</body>
</html>

company.html中写入

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

{% include 'header.html' %}

<div class="content">
    这是公司中间内容
</div>

{% include 'footer.html' %}

</body>
</html>

school.html中写入

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

{% include 'header.html' %}

<div class="content">
    这是学校中间内容<br>
</div>

{% include 'footer.html' %}

</body>
</html>

然后我们就可以进行访问测试了，就发现每个页面只有中间的部分不一样，而头部和尾部都是一样的。这样我们就能比较方便的编写每个html文件了。

在开发中不可避免的是在在模板中需要传递参数，
我们先在views中的index函数中惨第一个参数至template_include.html
修改views中的index函数

def index(request):
    return render(request,'template_include.html',{'username':'张三'})

然后我们在header.html中添加一个<li>标签

<li>{{ username }}</li>

然后分别在template_include.html，company.html，school.html中的内容下面添加一行代码

{{ username }}

接下来就可以查看效果了
我们发现只有首页中接收到了username这个变量，包括首页中的header.html也接收到了这个变量，而在company.html和school.html中则没有接收到username这个变量，包括它们中的header.html都是没有接收到这个变量的。
所以我们传入参数至哪个页面，就只有那个页面能接收到参数。那么我们向让别的页面也能接收到我们传入的参数，应该怎样做呢？
我们只需要在include后面添加一个参数就可以了
在company.html和school.html改变{% include %}标签中的代码为

{% include 'header.html' with username='张三' %}

这样我们就能在company.html和school.html中接收这个值了。但是，只有header中能接收，在中间部分的div中还是接收不到这个值的。

{% extend %}标签

新建一个front的app，在app下新建一个urls.py的文件，继续新建一个templates的文件夹，在templates中新建4个html文件，分别为base.html,company_front.html,index_front.html,school_front.html。然后将此app注册到settings.py的文件中。
编写views中的代码

from django.shortcuts import render

# Create your views here.
def index(request):
    return render(request,'index_front.html')

def company(request):
    return render(request,'company_front.html')

def school(request):
    return render(request,'school_front.html')

然后添加映射，首先先将此app在主urls中做一层映射

    path('front/',include('front.urls')),

然后在此app中的urls中添加映射

from django.urls import path
from . import views

app_name = 'front'

urlpatterns = [
    path('',views.index),
    path('company/',views.company,name = 'company'),
    path('school/',views.school,name = 'school'),
]

然后在base.html中写入代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<header>
    <ul>
        <li><a href="{% url 'front:index' %}">首页</a></li>
        <li><a href="{% url 'front:company' %}">公司</a></li>
        <li><a href="{% url 'front:school' %}">校园</a></li>
    </ul>
</header>

<div class="content">
    {% block content %}
        我是父摸版中的代码
    {% endblock %}
</div>

<div class="footer">
    这是footer部分
</div>

</body>
</html>

然后company_front.html,index_front.html和school_front.html分别对应写入代码

{% extends 'base.html' %}

{% block content %}
    我是公司主页代码
{% endblock %}

{% extends 'base.html' %}

{% block content %}
    我是主页代码
{% endblock %}

{% extends 'base.html' %}

{% block content %}
    我是学校主页代码
{% endblock %}

然后就可以输入网址进行测试了。

{% extends 'base.html' %}的意思时继承自base.html，这个里面有的代码继承之后的模板中全部都有。
base.html中的{% block content %}是一个接口，我们可以以在继承的模板中间使用{% block content %}来改变里面的代码。
使用{% block content %}标签之后，父模板中{% block content %}标签中的代码都不会在子模板中显示出来。（就像上面base.html中的我是父摸版中的代码从来没有显示出来过。）
如果想要父模板中{% block content %}标签中的代码显示出来，则需要添加{{ block.super }}就能够显示了。
如果我们在子模板中将代码放在{% block content %}标签的外面，Django是不会给我们渲染的，即是没有效果的。
{% extends 'base.html' %}标签必须是第一个标签，因此我们一般都是将 {% extends 'base.html' %}放在第一行。
{% extend %}标签和{% include %}传参数是一样的，如果给子模板传递了一个参数，那么该子模板中的父模板能接收到参数，而其他子模板中不能接收到参数。

stu_xujin

关注

10
点赞
踩
32

收藏

觉得还不错? 一键收藏
2
评论
Django模板结构优化{% include %}和{% extend %}标签

{% include %}标签在拉勾网中我们可以发现，他的每个网页的头部和尾部都是一样的，那么他是每个html文件中都写了这些代码吗？答案肯定是否定的。这个时候就需要用到我们的{% include %}标签了。新建一个项目，然后在里面新建一个template_include_demo的app，然后创建一个urls.py的文件，在主urls中对template_include_demo这个a...
复制链接

扫一扫

专栏目录