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 相关文章推荐
IE的有条件注释判定IE版本详解(附实例代码)
Jan 04 Javascript
把文本中的URL地址转换为可点击链接的JavaScript、PHP自定义函数
Jul 29 Javascript
jquery实现仿新浪微博评论滚动效果
Aug 06 Javascript
JS实现具备延时功能的滑动门菜单效果
Sep 17 Javascript
js实现新年倒计时效果
Dec 10 Javascript
详解javascript new的运行机制
Jan 26 Javascript
简单理解vue中实例属性vm.$els
Dec 01 Javascript
jQuery实现动态文字搜索功能
Jan 05 Javascript
用Node编写RESTful API接口的示例代码
Jul 04 Javascript
vue中,在本地缓存中读写数据的方法
Sep 21 Javascript
浅谈Javascript常用正则表达式应用
Mar 08 Javascript
Javascript和jquery在selenium的使用过程
Oct 31 jQuery
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批量删除数据库下所有前缀为prefix_的表
2014/06/09 PHP
针对thinkPHP5框架存储过程bug重写的存储过程扩展类完整实例
2018/06/16 PHP
JQuery跳出each循环的方法
2015/04/16 Javascript
javascript实现跨域的方法汇总
2015/06/25 Javascript
javascript实现在下拉列表中显示多级树形菜单的方法
2015/08/12 Javascript
js实现浏览本地文件并显示扩展名的方法
2015/08/17 Javascript
跟我学习javascript的循环
2015/11/18 Javascript
javascript中不易分清的slice,splice和split三个函数
2016/03/29 Javascript
js与applet相互调用的方法
2016/06/22 Javascript
JavaScript中对象的不同创建方法
2016/08/12 Javascript
Jquery AJAX POST与GET之间的区别详细介绍
2016/10/17 Javascript
微信小程序本作用域下调用全局JS详解及实例
2017/02/22 Javascript
如何编写一个d.ts文件的步骤详解
2018/04/13 Javascript
WebSocket的通信过程与实现方法详解
2018/04/29 Javascript
基于webpack4搭建的react项目框架的方法
2018/06/30 Javascript
深入浅析nuxt.js基于ssh的vue通用框架
2019/05/21 Javascript
axios异步提交表单数据的几种方法
2019/08/11 Javascript
[04:09]2014DOTA2国际邀请赛Ti西雅图 历届冠军相继出局 BBC综述今日比赛
2014/07/20 DOTA
[01:00:52]2018DOTA2亚洲邀请赛 4.4 淘汰赛 EG vs LGD 第一场
2018/04/05 DOTA
[52:22]EG vs VG Supermajor小组赛B组 BO3 第一场 6.2
2018/06/03 DOTA
Python中的with...as用法介绍
2015/05/28 Python
Tensorflow卷积神经网络实例
2018/05/24 Python
python 安装库几种方法之cmd,anaconda,pycharm详解
2020/04/08 Python
在keras里面实现计算f1-score的代码
2020/06/15 Python
django form和field具体方法和属性说明
2020/07/09 Python
用python写一个带有gui界面的密码生成器
2020/11/06 Python
DRF使用simple JWT身份验证的实现
2021/01/14 Python
汉森批发:Hansen Wholesale
2018/05/24 全球购物
家长对孩子评语
2014/01/30 职场文书
高中军训感言400字
2014/02/24 职场文书
家长会学生演讲稿
2014/04/26 职场文书
县政府班子个人对照检查材料
2014/10/05 职场文书
开票员岗位职责
2015/02/12 职场文书
嘉年华活动新闻稿
2015/07/17 职场文书
2016年小学感恩节活动总结
2016/04/01 职场文书
市语委办2016年第十九届“推普周”活动总结
2016/04/05 职场文书