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 相关文章推荐
JS判断是否为数字,是否为整数,是否为浮点数的代码
Apr 24 Javascript
鼠标事件延时切换插件
Mar 12 Javascript
浅谈JavaScript编程语言的编码规范
Oct 21 Javascript
javascript中使用正则计算中文长度的例子
Apr 29 Javascript
JavaScript中getUTCSeconds()方法的使用详解
Jun 11 Javascript
jQuery UI Bootstrap是什么?
Jun 17 Javascript
Bootstrap Table表格一直加载(load)不了数据的快速解决方法
Sep 17 Javascript
JS实现的简单表单验证功能完整实例
Oct 14 Javascript
vue.js 实现评价五角星组件的实例代码
Aug 13 Javascript
JavaScript使用递归和循环实现阶乘的实例代码
Aug 28 Javascript
示例vue 的keep-alive缓存功能的实现
Dec 13 Javascript
Node Express用法详解【安装、使用、路由、中间件、模板引擎等】
May 13 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
Home Coffee Roasting
2021/03/03 咖啡文化
php预定义常量
2006/12/25 PHP
php设置session值和cookies的学习示例
2014/03/21 PHP
PHP编程中的常见漏洞和代码实例
2014/08/06 PHP
php实现的mongoDB单例模式操作类
2018/01/20 PHP
Laravel统一错误处理为JSON的方法介绍
2020/10/18 PHP
锋利的jQuery 要点归纳(三) jQuery中的事件和动画(上:事件篇)
2010/03/24 Javascript
JS 新增Cookie 取cookie值 删除cookie 举例详解
2014/10/10 Javascript
详解JavaScript基于面向对象之创建对象(1)
2015/12/10 Javascript
jQuery+ajax的资源回收处理机制分析
2017/01/07 Javascript
jquery hover 不停闪动问题的解决方法(亦为stop()的使用)
2017/02/10 Javascript
jQuery插件FusionCharts实现的2D面积图效果示例【附demo源码下载】
2017/03/06 Javascript
强大的 Angular 表单验证功能详细介绍
2017/05/23 Javascript
ReactNative实现Toast的示例
2017/12/31 Javascript
详解nuxt sass全局变量(公共scss解决方案)
2018/06/27 Javascript
JavaScript中concat复制数组方法浅析
2019/01/20 Javascript
ES6入门教程之Array.from()方法
2019/03/23 Javascript
详解微信小程序-获取用户session_key,openid,unionid - 后端为nodejs
2019/04/29 NodeJs
jQuery实现回到顶部效果
2020/10/19 jQuery
[01:05:40]VG vs Newbee 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
Python+Django在windows下的开发环境配置图解
2009/11/11 Python
从Python的源码来解析Python下的freeblock
2015/05/11 Python
Python序列操作之进阶篇
2016/12/08 Python
浅谈scrapy 的基本命令介绍
2017/06/13 Python
Django处理Ajax发送的Get请求代码详解
2019/07/29 Python
高清屏下canvas重置尺寸引发的问题的解决
2019/10/14 HTML / CSS
印尼值得信赖的在线交易网站:Bukalapak
2019/03/11 全球购物
英国地毯卖家:The Rug Seller
2019/07/18 全球购物
STP协议的主要用途是什么?为什么要用STP
2012/12/20 面试题
《蒙娜丽莎之约》教学反思
2014/02/27 职场文书
学校安全生产月活动总结
2014/07/05 职场文书
先进事迹演讲稿
2014/09/01 职场文书
晚自修旷课检讨书怎么写
2014/11/17 职场文书
2015年小学开学寄语
2015/02/27 职场文书
党校个人总结
2015/03/04 职场文书
html实现弹窗的实例
2021/06/09 HTML / CSS