Python笔记之Django网页模板的继承block(挖坑填坑、HTML转义)_django block

作者：秋刀鱼在做梦 | 2024-06-29 11:48:37

踩

django block

一、目标

学习Django 网页模板继承。顺便带上html网页代码转义的介绍

二、试验平台

windows7 , python3.7，Django2.1.5

三、概述

本例过于简单，仅介绍主要代码。

1.新建母版html文件（在里面挖坑block）

2.新建子网页并继承母版extends（在里面填坑）

3.写路由，只需写子网页的路由即可。（无需写母版页的路由）

四、模板base.html文件


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>模板集成-挖坑填坑-模板页</title>
    <style>
        #header{
            width:100%;
            height: 100px;
            background-color: pink;
        }
        #footer{
            width:100%;
            height:100px;
            background-color: cadetblue;
        }
    </style>
</head>
<body>
<div id="header">网页头部header,kahn2019年4月19日16:30:52</div>
<div id="main">
    {% block xMain %}
    {% endblock xMain %}
<hr>
第二个坑如下：
<hr>
    {% block xKeng %}
    {% endblock xKeng %}
</div>
</body>
</html>

五、子网页1：base_Main.html


<!--模板继成-挖坑填坑-主页-->
{% extends 'app01/base.html' %}
 
{% block xMain %}
    <h1>挖坑填坑第一步：先引用基类模板页，用extends '基类网页模板'</h1>
    <h2>挖坑填坑第二步：写上模板定义好的坑的名字，比如叫xMain，那我们这里就要写block xMain</h2>
    <h3>kahn 2019年4月19日16:33:18</h3>
{% endblock xMain %}
 
{% block xKeng %}
<a style="color: brown">这是第二个坑</a>
{% endblock xKeng %}

六、子网页2：base_List.html


<!--模板继成-挖坑填坑-列表页-->
{% extends 'app01/base.html' %}
 
{% block xMain %}
    <h1>测试网页模板继承---这是测试列表页'</h1>
{% endblock xMain %}
 
{% block xKeng %}
    <a style="color: green">这是第二个坑(也是个知识点【HTML转义】，不是闹着玩的哈)</a>
    <br>
    <br>
    <a>这是后台传来html代码，后台传什么前台就显示什么。----></a>   {{ xhtmlcode }}
    <br>
    <br>
    <a>这是后台传来html代码，让前台变成HTML代码镶嵌在网页中的方法1：{{ xhtmlcode | safe }}</a>
    <br>
    <br>
    {% autoescape off %}
    <a>这是后台传来html代码，让前台变成HTML代码镶嵌在网页中的方法2：{{ xhtmlcode }}</a>
    {% endautoescape %}
{% endblock xKeng %}

七、views.py主要部分


# #挖坑填坑测试主页
def base_Main(request):
    return render(request, 'app01/base_Main.html')
 
 
# #挖坑填坑测试列表页 + HTML代码转义
def base_List(request):
    xhtmlcode = '<a style="color: brown">这是一串html代码，目的是将这个字符串转成HTML代码</a>'
    return render(request, 'app01/base_List.html', {'xhtmlcode': xhtmlcode})

八、写路由


    path('base_Main/', views.base_Main),
    path('base_List/', views.base_List),

九、测试效果

kahn ok 2019年4月19日16:38:32。

声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：【wpsshop博客】