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 相关文章推荐
超级酷和最实用的jQuery实例收集(20个)
Apr 21 Javascript
表单JS弹出填写提示效果代码
Apr 16 Javascript
Javascript面向对象编程(二) 构造函数的继承
Aug 28 Javascript
Webkit的跨域安全问题说明
Sep 13 Javascript
jquery 获取表单元素里面的值示例代码
Jul 28 Javascript
javascript:json数据的页面绑定示例代码
Jan 26 Javascript
使用js画图之画切线
Jan 12 Javascript
原生Js实现简易烟花爆炸效果的方法
Mar 20 Javascript
JavaScript使用Max函数返回两个数字中较大数的方法
Apr 06 Javascript
微信小程序 出现错误:{&quot;baseresponse&quot;:{&quot;errcode&quot;:-80002,&quot;errmsg&quot;:&quot;&quot;}}解决办法
Feb 23 Javascript
vue3.0 CLI - 2.4 - 新组件 Forms.vue 中学习表单
Sep 14 Javascript
JavaScript中break、continue和return的用法区别实例分析
Mar 02 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+mysql 采用ajax技术的 省 市 地 3级联动无刷新菜单 源码
2006/12/16 PHP
解析php中用PHPMailer来发送邮件的示例(126.com的例子)
2013/06/24 PHP
PHP echo()函数讲解
2019/02/15 PHP
jQuery+css+html实现页面遮罩弹出框
2013/03/21 Javascript
如何阻止复制剪切和粘贴事件为了表单内容的安全
2013/05/23 Javascript
javascript检查浏览器是否已经启用XX功能
2015/07/10 Javascript
将JavaScript的jQuery库中表单转化为JSON对象的方法
2015/11/17 Javascript
Bootstrap CSS布局之按钮
2016/12/17 Javascript
Canvas 绘制粒子动画背景
2017/02/15 Javascript
JS实现复制功能
2017/03/01 Javascript
使用Bootstrap和Vue实现用户信息的编辑删除功能
2017/10/25 Javascript
vue综合组件间的通信详解
2017/11/06 Javascript
element-ui 的el-button组件中添加自定义颜色和图标的实现方法
2018/10/26 Javascript
VeeValidate 的使用场景以及配置详解
2019/01/11 Javascript
Node.js中package.json中库的版本号(~和^)
2019/04/02 Javascript
基于JavaScript实现猜数字游戏代码实例
2020/07/30 Javascript
vue-calendar-component 封装多日期选择组件的实例代码
2020/12/04 Vue.js
python同时给两个收件人发送邮件的方法
2015/04/30 Python
python获得文件创建时间和修改时间的方法
2015/06/30 Python
python实现冒泡排序算法的两种方法
2018/03/10 Python
python 执行shell命令并将结果保存的实例
2018/05/11 Python
Python 获取主机ip与hostname的方法
2018/12/17 Python
Python3操作MongoDB增册改查等方法详解
2020/02/10 Python
浅谈django 模型类使用save()方法的好处与注意事项
2020/03/28 Python
详解Anaconda 的安装教程
2020/09/23 Python
Python中生成ndarray实例讲解
2021/02/22 Python
CSS3中设置3D变形的transform-style属性详解
2016/05/23 HTML / CSS
美国高级工作服品牌:Carhartt
2018/01/25 全球购物
加拿大租车网站:Enterprise Rent-A-Car
2018/07/26 全球购物
精美的手工家居和生活用品:Nkuku
2019/11/01 全球购物
房地产开盘策划方案
2014/02/10 职场文书
总经理助理的职责
2014/03/14 职场文书
2014年最新领导班子整改方案
2014/09/27 职场文书
2015迎新晚会开场白
2015/07/17 职场文书
志愿者服务宣传标语口号
2015/12/26 职场文书
CSS实现五种常用的2D转换
2021/12/06 HTML / CSS