Django模板继承与模板的导入实例详解
更新时间：2022年03月07日 09:50:38 作者：[OJBK]
模板继承主要是为了提高代码重用,减轻开发人员的工作量,下面这篇文章主要给大家介绍了关于Django模板继承与模板导入的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
一:模版的继承
1.什么是模板继承?
你需要事先在你想要使用的主页面上划定区域做好标记，之后在子页面继承的时候你就可以使用在主页面划定的区域，也就意味着，如果你不划定任何区域，那么你子页面将无法修改主页面内容
2.使用继承流程原理
1.先在你想要继承的主页面上通过bolck划定你将来可能要改的区域，并做好标记
2.在子页面上继承extends，利用block自动提示选取你想要修改的内容区域标记名称
3.在子页面extends中写你要修改主页面标记区的代码
4.然后就可以让子页面的修改内容渲染到主页面的划定区域上
你们有没有见过一些网站
这些网站页面整体都大差不差 只是某一些局部在做变化
3.模板继承语法
1.继承
{% extends '模版页面名' %}
2.局部修改
# 1.你需要先去模版页面中划定可以被修改的区域
{% block '名字' %}
模版内容（666）
{% endblock %}
# 2.子页面中即成了模版页面之后 就可以根据名字修改
{% block '名字' %}
子版内容
子版页面吃了可以自己写自己的之外 还可以继续使用模版的内容
{{ block.super }} 666
{{ block.super }} 666
{{ block.super }} 666
{{ block.super }} 666
{% endblock %}
4.一般情况下模版页面上应该至少有三块可以被修改的区域
1.css区域
2.html区域
3.js区域
每一个子页面就都可以有自己独有的css代码 html代码 js代码
互相之间 互不干扰
# 子页面css
{% block css %}
{% endblock %}
{% block content %}
{% endblock %}
# 子页面js
{% block js %}
{% endblock %}
二:模板的继承使用
1.案例需求
1.实现用户点击登录右侧局部出现登录页面，点击注册右侧出现注册页面
urls.py
# 模板的继承
url(r'^home/', views.home),
# 创建login路由
url(r'^login/', views.login),
# 创建reg路由
url(r'^reg/', views.reg),
views.py
def home(request):
return render(request, 'home.html')
def login(request):
return render(request, 'login.html')
def reg(request):
return render(request, 'reg.html')
home.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--bootstrap引入 CSS CDN-->
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<!--jQuery引入 CDN-->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!--Bootstrap引入 Js CDN-->
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
{% block css %}
{% endblock %}
</head>
<body>
{#导航条#}
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
{#左右不留白#}
<div class="container-fluid">
{#row 划分12份区域#}
<div class="row">
{# 左侧分三份#}
<div class="col-md-3">
{#侧边栏 #}
<div class="list-group">
<a href="/home/" class="list-group-item active">
首页
</a>
<a href="/login/" class="list-group-item">登录</a>
<a href="/reg/" class="list-group-item">注册</a>
</div>
</div>
<div class="col-md-9">
{# 面板#}
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body">
{# 划分区域 不影响区域展示，仅仅是标记 区域名#}
{% block content %}
{# 巨幕#}
<div class="jumbotron">
<h1>Hello, world!</h1>
<p>...</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>
{% endblock %}
</div>
</div>
</div>
</div>
</div>
{% block js %}
{% endblock %}
</body>
</html>
login.html
{#login 页面全部清空#}
{#login继承home主页面#}
{% extends 'home.html' %}
{#子页面的css代码 #}
{% block css %}
<style>
h1 {
color: red;
}
</style>
{% endblock %}
{#block 指定选择主页面划分的(区域) 可以进行修改 #}
{% block content %}
<h1 class="text-center">登录页面</h1>
<form action="">
<p>username: <input type="text" class="form-control"></p>
<p>password: <input type="text" class="form-control"></p>
<input type="submit" class="btn btn-success">
</form>
{% endblock %}
{# 子页面的js代码 #}
{% block js %}
<script>
alert('登录页面')
</script>
{% endblock %}
reg.html
{#reg页面全部清空#}
{#reg继承home主页面#}
{% extends 'home.html' %}
{#子页面的css代码 #}
{% block css %}
<style>
h1 {
color: seagreen;
}
</style>
{% endblock %}
{#block 指定选择主页面划分的(区域) 可以进行修改 #}
{% block content %}
<h1 class="text-center">注册页面</h1>
<form action="">
<p>username: <input type="text" class="form-control"></p>
<p>password: <input type="text" class="form-control"></p>
<input type="submit" class="btn btn-danger">
</form>
{% endblock %}
{# 子页面的js代码 #}
{% block js %}
<script>
alert('注册')
</script>
{% endblock %}
2.总结模板继承
一般情况下 模版的页面上划定的区域越多 那么该模版的扩展性就越高
但是如果太多 那还不如自己直接写
三:模版的导入
1.模板导入
将页面的某一个局部当成模块的形式
哪个地方需要就可以直接导入使用即可
2.模板导入格式
{% include '导入html文件名' %}
3.模板导入使用
sss.html
<h1>我是sss.html页面</h1>
login.html子页面
{% endblock %}
{#block 指定选择主页面划分的(区域) 可以进行修改 #}
{% block content %}
<h1 class="text-center">登录页面</h1>
<form action="">
<p>username: <input type="text" class="form-control"></p>
<p>password: <input type="text" class="form-control"></p>
<input type="submit" class="btn btn-success">
</form>
<p>模板的导入</p>
{% include 'sss.html' %}
{% endblock %}
4.使用结果
总结
到此这篇关于Django模板继承与模板导入的文章就介绍到这了,更多相关Django模板继承与模板导入内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了50行Python代码获取高考志愿信息的实现方法，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-07-07
windows下Python安装、使用教程和Notepad++的使用教程
这篇文章主要介绍了windows下Python安装、使用教程和Notepad++的使用教程,需要的朋友可以参考下2019-10-10
这篇文章主要为大家详细介绍了python读取显示和保存视频文件，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-04-04
这篇文章主要给大家介绍了关于Python对130w+张图片检索的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-03-03
这篇文章主要介绍了Python线程threading模块用法,结合实例形式总结分析了Python线程threading模块基本功能、原理、相关函数使用方法与操作注意事项,需要的朋友可以参考下2020-02-02
这篇文章主要介绍了Python深拷贝与浅拷贝用法,结合实例形式分析了Python对象的复制、深拷贝、浅拷贝等操作原理、用法及相关注意事项,需要的朋友可以参考下2019-05-05
这篇文章主要介绍了Django中ORM外键和表的关系详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-05-05
这篇文章主要介绍了Python实现PS图像明亮度调整效果,结合实例形式分析了Python基于skimage模块调整图片明亮度的原理与具体操作技巧,需要的朋友可以参考下2018-01-01
本文主要介绍了使用python遍历指定城市的一周气温的实现方法。具有很好的参考价值，下面跟着小编一起来看下吧2017-03-03
这篇文章主要为大家详细介绍了基于Python如何实现Mysql全量数据同步的功能，文中的示例代码讲解详细，感兴趣的小伙伴可以跟随小编一起了解一下2023-06-06
最新评论