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系列(12) 变量对象(Variable Object)
Jan 16 Javascript
jquery 取子节点及当前节点属性值
Jul 25 Javascript
jQuery检测鼠标左键和右键点击的方法
Mar 17 Javascript
js滚轮事件兼容性问题需要注意哪些
Nov 15 Javascript
在React 组件中使用Echarts的示例代码
Nov 08 Javascript
从Vuex中取出数组赋值给新的数组,新数组push时报错的解决方法
Sep 18 Javascript
react native基于FlatList下拉刷新上拉加载实现代码示例
Sep 30 Javascript
浅谈对于react-thunk中间件的简单理解
May 01 Javascript
Vue实现验证码功能
Dec 03 Javascript
原生JavaScript写出Tabs标签页的实例代码
Jul 20 Javascript
antd-DatePicker组件获取时间值,及相关设置方式
Oct 27 Javascript
前端如何实现动画过渡效果
Feb 05 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生成静态页面分析 模板+缓存+写文件
2009/08/17 PHP
php表单转换textarea换行符的方法
2010/09/10 PHP
PHP 读取大文件的X行到Y行内容的实现代码
2013/06/24 PHP
jquery multiSelect 多选下拉框
2010/07/09 Javascript
『jQuery』取指定url格式及分割函数应用
2013/04/22 Javascript
jquery仿QQ商城带左右按钮控制焦点图片切换滚动效果
2013/06/27 Javascript
js onload处理html页面加载之后的事件
2013/10/30 Javascript
超炫的jquery仿flash导航栏特效
2014/11/11 Javascript
深入理解JavaScript系列(40):设计模式之组合模式详解
2015/03/04 Javascript
JS实现根据用户输入分钟进行倒计时功能
2016/11/14 Javascript
JavaScript实现提交模式窗口后刷新父窗口数据的方法
2017/06/16 Javascript
Vue学习笔记进阶篇之多元素及多组件过渡
2017/07/19 Javascript
Angular实现图片裁剪工具ngImgCrop实践
2017/08/17 Javascript
解决vue组件中使用v-for出现告警问题及v for指令介绍
2017/11/11 Javascript
详解vue-cli3使用
2018/08/14 Javascript
微信小程序canvas拖拽、截图组件功能
2018/09/04 Javascript
解决layui checkbox 提交多个值的问题
2019/09/02 Javascript
vue 项目引入echarts 添加点击事件操作
2020/09/09 Javascript
[01:33]完美世界DOTA2联赛PWL S3 集锦第二期
2020/12/21 DOTA
简单介绍Python中的decode()方法的使用
2015/05/18 Python
在Python的Django框架中获取单个对象数据的简单方法
2015/07/17 Python
python如何在列表、字典中筛选数据
2018/03/19 Python
Python实现压缩文件夹与解压缩zip文件的方法
2018/09/01 Python
python制作填词游戏步骤详解
2019/05/05 Python
Python人工智能之路 jieba gensim 最好别分家之最简单的相似度实现
2019/08/13 Python
Django 实现对已存在的model进行更改
2020/03/28 Python
关于matplotlib-legend 位置属性 loc 使用说明
2020/05/16 Python
html通过canvas转成base64的方法
2019/07/18 HTML / CSS
世界闻名的衬衫制造商:Savile Row Company
2018/07/30 全球购物
Dockers鞋官网:Dockers Shoes
2018/11/13 全球购物
夜大毕业生自我鉴定
2013/10/31 职场文书
优秀员工演讲稿
2014/05/19 职场文书
领导班子民主生活会整改措施(工商局)
2014/09/21 职场文书
2015高三毕业寄语赠言
2015/02/27 职场文书
施工员岗位职责范本
2015/04/11 职场文书
校园开放日新闻稿
2015/07/17 职场文书