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车架号识别/验证函数代码 汽车车架号验证程序
Jan 08 Javascript
优化Node.js Web应用运行速度的10个技巧
Sep 03 Javascript
JavaScript中的类(Class)详细介绍
Dec 30 Javascript
jQuery中andSelf()方法用法实例
Jan 08 Javascript
javascript实现删除前弹出确认框
Jun 04 Javascript
jQuery解析json数据实例分析
Nov 24 Javascript
jQuery+CSS实现滑动的标签分栏切换效果
Dec 17 Javascript
js调出上下文菜单的实例
Dec 17 Javascript
基于 Node.js 实现前后端分离
Apr 23 Javascript
鼠标点击input,显示瞬间的边框颜色,对之修改与隐藏实例
Dec 26 Javascript
jquery表单插件form使用方法详解
Jan 20 Javascript
小发现之浅谈location.search与location.hash的问题
Jun 23 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实现登陆验证码(类似条行码状)
2006/10/09 PHP
使用PHPMYADMIN操作mysql数据库添加新用户和数据库的方法
2010/04/02 PHP
php实现数据库的增删改查
2017/02/26 PHP
Smarty模板类内部原理实例分析
2019/07/03 PHP
Laravel第三方包报class not found的解决方法
2019/10/13 PHP
js 获取子节点函数 (兼容FF与IE)
2010/04/18 Javascript
为Extjs加加速(javascript加速)
2010/08/19 Javascript
jQuery前台数据获取实现代码
2011/03/16 Javascript
jquery命令汇总,方便使用jquery的朋友
2012/06/26 Javascript
jQuery实现checkbox全选的方法
2015/06/10 Javascript
用vue和node写的简易购物车实现
2017/04/25 Javascript
jQuery序列化后的表单值转换成Json
2017/06/16 jQuery
react+redux的升级版todoList的实现
2017/12/18 Javascript
mpvue 如何使用腾讯视频插件的方法
2018/07/16 Javascript
React+EggJs实现断点续传的示例代码
2020/07/07 Javascript
Vue实现移动端拖拽交换位置
2020/07/29 Javascript
微信小程序基于高德地图API实现天气组件(动态效果)
2020/10/22 Javascript
vue 通过base64实现图片下载功能
2020/12/19 Vue.js
Python 深入理解yield
2008/09/06 Python
python入门之语句(if语句、while语句、for语句)
2015/01/19 Python
Python实现从URL地址提取文件名的方法
2015/05/15 Python
python制作简单五子棋游戏
2019/06/18 Python
python使用多线程编写tcp客户端程序
2019/09/02 Python
解决os.path.isdir() 判断文件夹却返回false的问题
2019/11/29 Python
Python实现中值滤波去噪方式
2019/12/18 Python
Python实现代码块儿折叠
2020/04/15 Python
python中pyqtgraph知识点总结
2021/01/26 Python
linux面试题参考答案(5)
2014/09/01 面试题
2014全国两会大学生学习心得体会
2014/03/10 职场文书
党员承诺书怎么写
2014/05/20 职场文书
个人四风问题对照检查材料思想汇报
2014/10/06 职场文书
经费申请报告范文
2015/05/18 职场文书
董事长新年致辞
2015/07/29 职场文书
2015年中秋放假通知范文
2015/08/18 职场文书
postgresql无序uuid性能测试及对数据库的影响
2021/06/11 PostgreSQL
python 网络编程要点总结
2021/06/18 Python