14.Django中模板的继承及引用

最新推荐文章于 2023-08-22 01:47:20 发布
最新推荐文章于 2023-08-22 01:47:20 发布
阅读量358 收藏
点赞数
分类专栏： 前端 html 文章标签： javascript 前端 vue.js
原文链接：https://blog.csdn.net/qq_44907926/article/details/119870752
版权
前端 同时被 2 个专栏收录
54 篇文章 1 订阅
订阅专栏
html
54 篇文章 0 订阅
订阅专栏

引言：大家啊可以随便取找个网站，比如：淘宝。多去看看它不同的页面，用你闪亮的大眼睛去找不同点和相同点。
到一定时候，你会发现，网站中有些不同的页面，它们中的部分数据是完全一模一样的；而且有些数据不一样的部分，它们前端的排版格式却是一模一样的哦！
你肯定会心生疑问——难道这些页面全都要一个个敲代码做嘛！这也太绝望了吧！！！
但是——不要忘记了！程序猿一大原则是：绝不做重复的事！
所以对于上述现象，就涉及到了一个知识点——模板的继承与引用！！！

1.模板的继承与引用

Django模版引擎中最强大也是最复杂的部分就是模版继承了。 模版继承可以让你创建一个基本的“骨架”模版，它包含您站点中的全部元素，并且可以定义能够被子模版覆盖的 blocks 。

（1）第一部分：常规思想——每个前端页面都单独码：（下面示范三个前端页面，对应三个html模板文件及其效果展示！）

①第一个html模板：

a_first.html文件：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .top{
            height: 200px;
            background: darkgoldenrod;
        }
        .con{
            height: 500px;
            background: aqua;
        }
        .but{
            height: 150px;
            background: sandybrown;
        }
    </style>
</head>
<body>
<div>
    <div class="top">头部</div>
    <div class="con">内容一</div>
    <div class="but">底部</div>
</div>
</body>
</html>
效果展示：

在这里插入图片描述

②第二个html模板：

a_second.html文件：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .top{
            height: 200px;
            background: darkgoldenrod;
        }
        .con{
            height: 500px;
            background: aqua;
        }
        .but{
            height: 150px;
            background: sandybrown;
        }
        .con .left{
            width: 70%;
            float: left;
            height: 100%;
            background: red;
        }
        .con .right{
            width: 30%;
            float: left;
            height: 100%;
            background: #352fff;
        }
    </style>
</head>
<body>
<div>
    <div class="top">头部</div>
    <div class="con">
        <div class="left">内容二</div>
        <div class="right">广告</div>
    </div>
    <div class="but">底部</div>
</div>
</body>
</html>
效果展示：

在这里插入图片描述

③第三个html模板：

a_third.html文件：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .top{
            height: 200px;
            background: darkgoldenrod;
        }
        .con{
            height: 500px;
            background: aqua;
        }
        .but{
            height: 150px;
            background: sandybrown;
        }
        .con .left{
            width: 70%;
            float: left;
            height: 100%;
            background: #f338ff;
        }
        .con .right{
            width: 30%;
            float: left;
            height: 100%;
            background: #24ff44;
        }
    </style>
</head>
<body>
<div>
    <div class="top">头部</div>
    <div class="con">
        <div class="left">内容三</div>
        <div class="right">广告</div>
    </div>
    <div class="but">底部</div>
</div>
</body>
</html>
效果展示：

在这里插入图片描述

分析——不难看出，这三个前端界面头部和底部是一模一样的；后两个的中间内容部分右侧也都是广告页面。而我们为了实现这三个html界面分别码了那么多重复的代码，费时费力，考虑到类可以继承，那么咱的html模板能否继承呢？

答案是肯定的，下面咱们来使用模板的继承看一看有多牛逼：

（2）第二部分：高级思想——使用模板的继承及引用！

在这里插入图片描述

①编写父级模板base.html：

编写父级模板原则：相同的部分直接编写代码，使子模板直接继承（模板继承使用extends标签实现）；不同的部分通过使用block来给子模板开放接口，使子模板可以进行覆写（模板覆写使用block标签实现）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .top{
            height: 200px;
            background: darkgoldenrod;
        }
        .con{
            height: 500px;
            background: aqua;
        }
        .but{
            height: 150px;
            background: sandybrown;
        }
        .con .right{
            width: 30%;
            float: left;
            height: 100%;
            background: #352fff;
        }
    </style>
    {% block style %}{% endblock %}			  {#让子模板可以对css样式进行覆写！#}
</head>
<body>
<div>
    <div class="top">头部</div>
    <div class="con">
        {% block con %}
            {% block left %}

            {% endblock %}

            {% block right %}
                <div class="right">广告</div>
            {% endblock %}
        {% endblock %}
    </div>
    <div class="but">底部</div>
</div>
</body>
</html>

②第一个html模板：

a_first.html文件：
{% extends 'music/base.html' %}


{% block con %}
    内容一
{% endblock %}

②第二个html模板：

a_second.html文件：
{% extends 'music/base.html' %}

{% block style %}
    <style>
            .con .left{
            width: 70%;
            float: left;
            height: 100%;
            background: red;
        }
    </style>
{% endblock %}

{% block left %}
    <div class="left">内容二</div>
{% endblock %}

②第三个html模板：

a_third.html文件：
{%  extends 'music/base.html' %}

{% block style %}
    <style>
        .con .left{
            width: 70%;
            float: left;
            height: 100%;
            background: #f338ff;
        }
        .con .right{
            width: 30%;
            float: left;
            height: 100%;
            background: #24ff44;
        }
    </style>
{% endblock %}

{% block left %}
    <div class="left">内容三</div>
{% endblock %}

（3）使用模板的继承及引用实现会发现跟上面不使用的效果一模一样！！！而且咱的代码简洁太多 。

下面来总结一下模板的继承及引用：

模板继承使用extends标签实现。通过使用block来给子模板开放接口。

  1. extends必须是子模板中第一个出现的标签。
  2. 子模板中的所有内容，必须出现在父模板定义好的block中，否则django将不会渲染。
  3. 如果出现重复代码，就应该考虑使用模板。
  4. 尽可能多的定义block，方便子模板实现更细的需求。
  5. 如果在某个block中，要使用父模板的内容，使用block.super获取。
web18296061989
关注
专栏目录
Django 4.x Templates 渲染页面模板使用示例和配置方法
Mr数据杨
11-04 3万+
大家好，我是Mr数据杨。Templates 配置、应用、参数说明，宛如在开战之前，诸葛亮配置兵力，应用战术，为每个战术细致地规划参数，提前为未来的战斗做好准备。而 BACKEND, NAME, DIRS, APP_DIRS, OPTIONS就好比战斗中的指挥系统。郭嘉指挥着后勤，调配粮草，周瑜指挥船队，张辽指挥骑兵，让整个战斗有条不紊。
django模板调用和继承
qq_16853655的博客
01-07 176
django中为了不重复写前端的代码，可以采用调用和继承的方式，来让不同的页面，通过提取相同的内容，以及各自补充自己的内容，来实现效率，有两个方法： 首先：应提取相同的内容，写成一个base.html（文件名任意），将待填充的部分，用{% block name %} {% endblock %}标记出来，等待填充 例如： {% load static %} <!DOCTYPE html&gt...
Django——模板层(template)（模板语法、自定义模板过滤器及标签、模板继承）
aobian2884的博客
10-25 253
前言:当我们想在页面上给客户端返回一个当前时间，一些初学者可能会很自然的想到用占位符，字符串拼接来达到我们想要的效果，但是这样做会有一个问题，HTML被直接硬编码在 Python代码之中。 1 2 3 4 def current_datetime(request): now = datetime.datetime.now() ...
Django-模板标签和模板继承与引用
小二温华
09-08 542
04模板标签与模板继承和引用 1.常用的模板标签 {% %} -作用是什么? 对模板的变量引用进行循环,判断等逻辑运算 {% tag %} {% endtag %} / {% tag 参数 参数 %} for循环 endfor / for…in {% for stu in students %} <tr> ...
20190322 Django模板标签、模板的继承与引用
qq_43637120的博客
03-25 989
本文关于模板继承的好处的内容系引用自keithzone的博客“django 模板”，链接：https://blog.csdn.net/keithzone/article/details/81117177， 感谢该博友的原创笔记分享。 I. Django模板标签 for标签 {% for name in names %} {% endfor %} <tbody> {% for s...
Django模板继承
征途人生&梦
02-26 1195
base.html {% block title %}{% endblock %} 模板继承 {% block content %}{% endblock %} {% block footer %}     欢迎访问我的csdn. {% endblock %} son.html {% extends 'base.html' %} {% block
详解Django项目中模板标签及模板的继承与引用(网站中快速布置广告)
09-19
### Django项目中模板标签及模板的继承与引用详解 #### 一、引言 Django 是一款用 Python 编写的开源框架，它以其强大的功能、灵活性以及高效的开发速度深受开发者们的喜爱。在 Django 中，模板系统是其核心组成...
Python.Web.Development.with.Django_python_djangoweb_django_
10-01
2. **模板继承**：通过基模板实现代码复用，子模板只覆盖需要定制的部分。 3. **模板过滤器和标签**：过滤器用于修改变量的值，标签则用于添加复杂逻辑。 ### URL配置 1. **URL模式**：通过正则表达式定义URL模式...
Django学习（三）：模板继承、ModelForm的使用
最新发布
jibinquan的博客
08-22 294
借助员工管理系统，学习了模板继承和ModelForm的使用等知识
Python Django 模板继承的使用方法
weixin_44725128的博客
03-19 298
Python Django高级 模板继承的使用方法 直接用例子说明吧！ 下面是母模板 home.html: <html lang="en"> <head> <title>{% block title %} 相等于设置一个title占位符 {% endblock %}</title> </head> <body> <h1&...
Django模板继承与组件
qq_39112101的博客
04-24 387
模板继承 在一个网站中，不同的前台页面也会有很多相同的地方，如果这些相同的地方都要重写一遍的话显然是很麻烦的，这个时候我们可以使用模板继承来轻松的解决重复造轮子的问题。 因此首先我们需要把相同的地方定义成一个模板，在这里我们把模板名字叫做base.html。然后让其它页面继承base.html。 在继承之前我们需要把页面不同的地方做成一个块，也可以说是挖一个坑，然后让继承base.h...
Django模板继承与导入
我不会玩csdn，我兄弟没面子。
04-21 231
模板的继承与导入 模板的继承: 需要在你的主页面通过block划定多片区域,给继承了主页面的子页面选择使用哪块区域 子页面中如何使用: {% extends 'home.html' %} # 先将主页面继承过来 通过block块的名字,指定修改哪一片区域 {% block '区域名字' %} {% endblock %} {% b...
Django进阶之模板继承
json_li的博客
05-22 316
Django也有属于自己的模板继承功能。模板继承可以减少页面重复内容的定义，实现页面重用，更加灵活的实现web页面。主要通过block/extends标签来实现。
Django使用基模板和模板继承
G4N3
05-14 241
创建基模板 blog\templates\base.html <!-- base.html --> Generic welcome to your web page [Logion - Help -FAQ] <h1>Blog Central</h1> {% block content %} {% endblock %} &copy; 2019 your ...
Django模板 标签，继承与组件
fuckfuckeveryday的博客
04-24 174
load 和 static 标签 当我们想在页面上使用一些静态资源例如图片、js、css 。这时候我们就要使用到static标签了。 例如在页面中显示一张本地图片。 操作步骤： a. 新建一个文件夹来盛放静态资源，例如 static，为了和后面的static标签区分，这里使用 statics名称 b. 将statics文件夹加载到python搜索路径中。 c. 在页面上最开始位置使用 {%load...
三、Django之使用模板并引用静态内容（load关键字的使用）+子模块的引用（block）+上下文渲染（从views传值）
shanshan的博客
06-30 659
在Django框架中，模板(templates)用于产生网页上展示的内容，其包含两部分：静态内容：图片、css、js、html动态内容：模板语法渲染生成的。
Django基础入门⑦：Django模板继承
weixin_50804299的博客
06-22 9499
本节介绍了模板继承的使用，以及它的优势，Django 官网建议，在父模板中应尽量多的使用 {% block %} 标签，这样可以给我们更多的选择空间。block 标签需要成对出现，使用 {{ endblock }} 作为结束标签；定义 block 标签名字，子模板中具有同样名称的 block 块完成对父模板的替换；子模板不需要定义父模板中的所有 block，未定义时，子模板将原样使用父模板中的内容；
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值