39.Python模板结构优化-引入模板include标签、模板继承使用详解

时间：2020-01-17 13:17:48 阅读：75 评论：0 收藏：0 [点我收藏+]

在进行模板的构造时，不免有些模板的部分样式会相同，如果每一个模板都是重写代码的话，不仅在做的时候麻烦，而且在后期的维护上，也是相当的麻烦。所以我们可以将模板结构进行优化，优化可以通过：引入模板；模板继承两种方式来实现。

1.引入模板

在DTL模板中，使用include标签，将子模板进行引入，这种引入模板，子模板可以使用父模板中的变量。也就是说子模板中也就会被同化产生一个同父模板相同的变量，但是如果这个子模板同时又被其他的父模板引用的话，这个产生的变量还是存在的。以下举例说明：

在index()视图函数中传递一个变量，就可以在index.html中引用了，

from django.shortcuts import render

# 在index视图函数中，传递一个变量，
def index(request):
    context = {
        'username':'小蚂蚁'
    }
    return render(request,'index.html',context=context)


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


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

在index.html中进行引用：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
</head>
<body>
    {% include 'header.html' %}
        <div class="content">
            <p>这是首页的中间部分哦</p>
            <p>{{ username }}</p>
        </div>
    {% include 'footer.html' %}
</body>
</html>

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

在浏览器中查看结果：

由浏览器的输出信息，可以看出username并没有进行显示。这是因为在include标签中没有进行接收。

技术图片

在index.html中,使用with 变量名=“xxx”的形式进行接收：

    {% include 'header.html' with username='小蚂蚁'%}
        <div class="content">
            <p>这是首页的中间部分哦</p>
            <p>{{ username }}</p>
        </div>
    {% include 'footer.html' %}

在浏览器中进行显示查看：

技术图片

在company.html中使用with 变量名="xxx"的形式进行接收：

{% include 'header.html' with username='孤烟逐云' %}
        <div class="content">
            hello 这是贵公司的中间部分哦
        </div>
    {% include 'footer.html' %}

但是在浏览器中会显示：

技术图片

为什么会出现错误呢？再来看一下views.py中的company()视图函数：

def company(request):
# 定义一个上下文，变量为username
    context = {
        'username':''
    }
    return render(request,'company.html',context=context)

在浏览器中进行查看：

技术图片
此时就可以进行显示了。

2.模板继承

（1）如果在某个“block”中使用父模板的内容，那么就可以使用“{{ block.super }}”来继承。

（2）在定义“block”的时候，除了在“block”开始的地方定义这个“block” 的名字，比如{ % block content %}还可以在“block”结束的地方定义名字,比如{ % endblock content %}。这在大型魔板中尤其有用，能让你快速的看到这个“block” 包含在哪里。

（3）注意：extends标签必须放在模板的代码的最前面位置，并且子模板中的代码必须放在block中，否者将不会被渲染。

views.py中代码如下：

from django.shortcuts import render


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


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


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

父模板base.html中的代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<header>
    <ul>
        <li><a href="{% url 'index' %}">首页</a></li>
        <li><a href="{% url 'company' %}">公司</a></li>
        <li><a href="{% url 'school' %}">校园</a></li>
    </ul>
</header>
<div class="content">
    {% block content %}
        这是父模板中的content的代码
    {% endblock %}
</div>
<footer>
    这是footer中的部分哦
</footer>
</body>
</html>

在子模板index01.html中实现继承：

{# extends导入父模板必须是在代码的最上方 #}
{% extends 'base.html' %}

{% block content %}
{#  在子模板中实现自己的中间部分代码  #}
    <p>这是子模板中的代码</p>
{#  使用以下语句就可以引用父模板中的代码  #}
    <p>{{ block.super }}</p>
{% endblock %}

在urls.py中做一层这样的映射：

from front import views as fviews

urlpatterns = [
    path('index01/', fviews.index01, name = 'index01'),
]

在浏览器中查看127.0.0.1:8000/index01/视图：

技术图片

同样使用这种方式也可以实现模板结构的优化

39.Python模板结构优化-引入模板include标签、模板继承使用详解

标签：center ado 引用就会公司除了 img return 结构

原文地址：https://www.cnblogs.com/guyan-2020/p/12204829.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行

39.Python模板结构优化-引入模板include标签、模板继承使用详解

1.引入模板

在index()视图函数中传递一个变量，就可以在index.html中引用了，

在index.html中进行引用：

同时此时也可以在子模板header.html中进行引用变量username:

在浏览器中查看结果：

由浏览器的输出信息，可以看出username并没有进行显示。这是因为在include标签中没有进行接收。

在company页面的header部分也不能够显示username

在index.html中,使用with 变量名=“xxx”的形式进行接收：

在浏览器中进行显示查看：

在company.html中使用with 变量名="xxx"的形式进行接收：

但是在浏览器中会显示：

为什么会出现错误呢？再来看一下views.py中的company()视图函数：

在浏览器中进行查看：

2.模板继承

（1）如果在某个“block”中使用父模板的内容，那么就可以使用“{{ block.super }}”来继承。

（3）注意：extends标签必须放在模板的代码的最前面位置，并且子模板中的代码必须放在block中，否者将不会被渲染。

views.py中代码如下：

父模板base.html中的代码如下：

在子模板index01.html中实现继承：

在urls.py中做一层这样的映射：

在浏览器中查看127.0.0.1:8000/index01/视图：

同样使用这种方式也可以实现模板结构的优化