Django模板继承 extend标签实例代码详解


Posted in Javascript onMay 16, 2019

在 views.py 上修改

...
def ordered(req):
  return render(req, "ordered.html")
def shopping_car(req):
  return render(req, "shopping_car.html")

在 urls.py 上修改

...
  path('ordered/', views.ordered),
  path('shopping_car/', views.shopping_car),
...

在 tmplates 文件夹下创建 base.html 文件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .page-header{
      height:50px;
      background-color: rebeccapurple;
    }
    .page-body .menu{
      height: 500px;
      background-color: antiquewhite;
      float: left;
      width: 20%;
    }
    .page-body .content{
      height: 500px;
      background-color: cornflowerblue;
      float: left;
      width: 80%
    }
    .page-footer{
      height:50px;
      background-color: green;
      clear: both;
    }
  </style>
</head>
<body>
<div>
  <div class="page-header"></div>
  <div class="page-body">
    <div class="menu">
      <a href="/ordered/" rel="external nofollow" >订单</a><br>
      <a href="/shopping_car/" rel="external nofollow" >购物车</a>
    </div>
    {% block content %}
    {% endblock %}
  </div>
  <div class="page-footer"></div>
</div>
</body>
</html>

ordered.html 文件

{% extends "base.html" %}
{% block content %}
    <div class="content">
      订单
    </div>
{% endblock %}
shopping_car.html 文件
{% extends "base.html" %}
{% block content %}
    <div class="content">
      购物车
    </div>
{% endblock %}

效果如下:

Django模板继承 extend标签实例代码详解

总结

以上所述是小编给大家介绍的Django模板继承 extend标签实例代码详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
加载 Javascript 最佳实践
Oct 30 Javascript
Prototype源码浅析 String部分(二)
Jan 16 Javascript
深入探密Javascript数组方法
Jan 08 Javascript
javascript中replace( )方法的使用
Apr 24 Javascript
jQuery EasyUI中的日期控件DateBox修改方法
Nov 09 Javascript
JavaScript控制输入框中只能输入中文、数字和英文的方法【基于正则实现】
Mar 03 Javascript
javascript编写简易计算器
May 06 Javascript
获取当前按钮或者html的ID名称实例(推荐)
Jun 23 Javascript
react实现菜单权限控制的方法
Dec 11 Javascript
vue和react等项目中更简单的实现展开收起更多等效果示例
Feb 22 Javascript
jQuery 查找元素操作实例小结
Oct 02 jQuery
javascript 对象 与 prototype 原型用法实例分析
Nov 11 Javascript
vue视图不更新情况详解
May 16 #Javascript
详解如何写出一个利于扩展的vue路由配置
May 16 #Javascript
Vue中props的详解
May 16 #Javascript
使用Vue实现移动端左滑删除效果附源码
May 16 #Javascript
Vue2.0实现组件之间数据交互和通信操作示例
May 16 #Javascript
Mpvue中使用Vant Weapp组件库的方法步骤
May 16 #Javascript
JS左右无缝轮播功能完整实例
May 16 #Javascript
You might like
php 将bmp图片转为jpg等其他任意格式的图片
2009/06/21 PHP
PHPMailer 中文使用说明小结
2010/01/22 PHP
SWFUpload与CI不能正确上传识别文件MIME类型解决方法分享
2011/04/18 PHP
yii实现CheckBox复选框在同一行显示的方法
2014/12/03 PHP
Laravel5中contracts详解
2015/03/02 PHP
php基于curl实现随机ip地址抓取内容的方法
2016/10/11 PHP
PHP缩略图生成和图片水印制作
2017/01/07 PHP
使用 Node.js 做 Function Test实现方法
2013/10/25 Javascript
Google Dart编程语法和基本类型学习教程
2013/11/27 Javascript
基于jQuery Circlr插件实现产品图片360度旋转
2015/09/20 Javascript
jquery分页插件jquery.pagination.js使用方法解析
2016/04/01 Javascript
基于jquery实现二级联动效果
2017/03/30 jQuery
详解Vue 中 extend 、component 、mixins 、extends 的区别
2017/12/20 Javascript
Vue的实例、生命周期与Vue脚手架(vue-cli)实例详解
2017/12/27 Javascript
layui复选框的全选与取消实现方法
2019/09/02 Javascript
解决layer图标icon不加载的问题
2019/09/04 Javascript
es6函数name属性功能与用法实例分析
2020/04/18 Javascript
echarts.js 动态生成多个图表 使用vue封装组件操作
2020/07/19 Javascript
js实现双色球效果
2020/08/02 Javascript
[44:40]Spirit vs Navi Supermajor小组赛 A组败者组第一轮 BO3 第一场 6.2
2018/06/03 DOTA
详细解读Python的web.py框架下的application.py模块
2015/05/02 Python
python友情链接检查方法
2015/07/08 Python
Python正则表达式如何进行字符串替换实例
2016/12/28 Python
python 以16进制打印输出的方法
2018/07/09 Python
详解Python 调用C# dll库最简方法
2019/06/20 Python
Python列表如何更新值
2020/05/27 Python
探索欧洲最好的品牌:Bombinate
2019/06/14 全球购物
学期自我鉴定范文
2013/10/01 职场文书
工程学毕业生自荐信
2014/06/14 职场文书
大学生实习证明范文(5篇)
2014/09/18 职场文书
教师个人学习总结
2015/02/11 职场文书
部门经理迟到检讨书
2015/02/16 职场文书
2015年事业单位办公室文员工作总结
2015/04/24 职场文书
以下牛机,你有几个
2022/04/05 无线电
Java GUI编程菜单组件实例详解
2022/04/07 Java/Android
Win11 PC上的Outlook搜索错误怎么办?
2022/07/15 数码科技