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更优雅的兼容
Aug 12 Javascript
javascript正则表达式中参数g(全局)的作用
Nov 11 Javascript
JQuery操作Select的Options的Bug(IE8兼容性视图模式)
Apr 21 Javascript
JS 仿腾讯发表微博的效果代码
Dec 25 Javascript
JavaScript获取当前页面上的指定对象示例代码
Feb 28 Javascript
js判断滚动条是否已到页面最底部或顶部实例
Nov 20 Javascript
分享20个提升网站界面体验的jQuery插件
Dec 15 Javascript
JavaScript把数组作为堆栈使用的方法
Mar 20 Javascript
Javascript技术栈中的四种依赖注入详解
Feb 23 Javascript
Node.js进阶之核心模块https入门
May 23 Javascript
JavaScript Math对象和调试程序的方法分析
May 13 Javascript
Vue项目vscode 安装eslint插件的方法(代码自动修复)
Apr 15 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管理nginx虚拟主机shell脚本实例
2014/11/19 PHP
php实现在服务器上创建目录的方法
2015/03/16 PHP
Laravel 微信小程序后端实现用户登录的示例代码
2019/11/26 PHP
20个非常棒的Jquery实用工具 国外文章
2010/01/01 Javascript
基于jquery &amp; json的省市区联动代码
2012/06/26 Javascript
js给页面加style无效果的解决方法
2014/01/20 Javascript
提升PHP安全:8个必须修改的PHP默认配置
2014/11/17 Javascript
JavaScript实现的一个倒计时的类
2015/03/12 Javascript
jquery.gridrotator实现响应式图片展示画廊效果
2015/06/23 Javascript
jQuery实现的淡入淡出二级菜单效果代码
2015/09/15 Javascript
JavaScript知识点整理
2015/12/09 Javascript
学习javascript文件加载优化
2016/02/19 Javascript
jquery判断页面网址是否有效的两种方法
2016/12/11 Javascript
vue.js 上传图片实例代码
2017/06/22 Javascript
javascript实现文字无缝滚动效果
2017/08/26 Javascript
angularjs实现猜数字大小功能
2020/05/20 Javascript
实现div滚动条默认最底部以及默认最右边的示例代码
2017/11/15 Javascript
vue使用中的内存泄漏【推荐】
2018/07/10 Javascript
JS左右无缝轮播功能完整实例
2019/05/16 Javascript
JS实现处理时间,年月日,星期的公共方法示例
2019/05/31 Javascript
Python连接mssql数据库编码问题解决方法
2015/01/01 Python
python回溯法实现数组全排列输出实例分析
2015/03/17 Python
Python实现简单HTML表格解析的方法
2015/06/15 Python
基于Django contrib Comments 评论模块(详解)
2017/12/08 Python
python dataframe 输出结果整行显示的方法
2018/06/14 Python
Styleonme中文网:韩国高档人气品牌
2017/06/21 全球购物
Martinelli官方商店:西班牙皮鞋和高跟鞋品牌
2019/07/30 全球购物
当我正在为表建立索引的时候,SQL Server 会禁止对表的访问吗
2014/04/28 面试题
简历的自荐信
2013/12/19 职场文书
财务管理职业生涯规划书
2014/02/26 职场文书
厂区绿化方案
2014/05/08 职场文书
跑操口号
2014/06/12 职场文书
Nginx搭建rtmp直播服务器实现代码
2021/03/31 Servers
python数据可视化使用pyfinance分析证券收益示例详解
2021/11/20 Python
vue项目中的支付功能实现(微信支付和支付宝支付)
2022/02/18 Vue.js
Python Matplotlib绘制等高线图与渐变色扇形图
2022/04/14 Python