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 css样式操作代码(批量操作)
Oct 09 Javascript
关于jQuery参考实例2.0 用jQuery选择元素
Apr 07 Javascript
基于js disabled=&quot;false&quot;不起作用的解决办法
Jun 26 Javascript
jquery easyui中treegrid用法的简单实例
Feb 18 Javascript
scrollWidth,clientWidth,offsetWidth的区别
Jan 13 Javascript
jQuery使用元素属性attr赋值详解
Feb 27 Javascript
浅谈Jquery核心函数
Jun 18 Javascript
bootstrap-wysiwyg结合ajax实现图片上传实时刷新功能
May 27 Javascript
JS中数组重排序方法
Nov 11 Javascript
JS实现鼠标移上去显示图片或微信二维码
Dec 14 Javascript
使用store来优化React组件的方法
Oct 23 Javascript
ElementUI实现el-form表单重置功能按钮
Jul 21 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
玩家交还《星际争霸》原始码光盘 暴雪报以厚礼
2017/05/05 星际争霸
收音机鉴频器对声音的影响和频偏分析
2021/03/02 无线电
php Smarty初体验二 获取配置信息
2011/08/08 PHP
PHP代码网站如何防范SQL注入漏洞攻击建议分享
2012/03/01 PHP
Windows下部署Apache+PHP+MySQL运行环境实战
2012/08/31 PHP
解析PHP自带的进位制之间的转换函数
2013/06/08 PHP
[JS]点出统计器
2020/10/11 Javascript
基于jQuery的让非HTML5浏览器支持placeholder属性的代码
2011/05/24 Javascript
导航跟随滚动条置顶移动示例代码
2013/09/11 Javascript
JS按字节截取字符长度实例
2013/11/20 Javascript
js查找某元素中的所有图片地址的方法
2014/01/16 Javascript
nodejs初步体验篇
2015/11/23 NodeJs
JS获取IMG图片高宽的简单实例
2016/05/17 Javascript
聊一聊JS中this的指向问题
2016/06/17 Javascript
Javascript类型系统之undefined和null浅析
2016/07/13 Javascript
AngularJS入门教程之链接与图片模板详解
2016/08/19 Javascript
AngularJS中的JSONP实例解析
2016/12/01 Javascript
JS控件bootstrap suggest plugin使用方法详解
2017/03/25 Javascript
利用Jasmine对Angular进行单元测试的方法详解
2017/06/12 Javascript
Vue.js实现网格列表布局转换方法
2017/08/25 Javascript
AngularJS中下拉框的高级用法示例
2017/10/11 Javascript
JS实现滚动条触底加载更多
2019/09/19 Javascript
python代码过长的换行方法
2018/07/19 Python
Python机器学习算法库scikit-learn学习之决策树实现方法详解
2019/07/04 Python
如何通过python实现人脸识别验证
2020/01/17 Python
Python 3.10 的首个 PEP 诞生,内置类型 zip() 迎来新特性(推荐)
2020/07/03 Python
使用Python操作MySQL的小技巧
2020/09/10 Python
python 输入字符串生成所有有效的IP地址(LeetCode 93号题)
2020/10/15 Python
phonegap常用事件总结(必看篇)
2017/03/31 HTML / CSS
英国领先的野生鸟类食品供应商:GardenBird
2018/08/09 全球购物
美国饼干礼物和美食甜点购买网站:Cheryl’s
2020/05/28 全球购物
生产班组长岗位职责
2014/01/05 职场文书
妇联领导班子剖析材料
2014/08/21 职场文书
2015年社区综治工作总结
2015/04/21 职场文书
幼儿园门卫安全责任书
2015/05/08 职场文书
初中班主任心得体会
2016/01/07 职场文书