base模版扩展
模板扩展
一个块语句压缩了一些当你扩展时可能想要改变的模板元素
例如,为了使用一个能动态header块,你可以在父模版中添加:
<header> {% block header %}{% end %} </header>
然后为了在子模板中覆写{% block header %}{% end %}部分,你可以使用块的名字引用,并把想要的内容放到其中
{% block header %}{% end %} {% block header %} <h1>Hello world!</h1> {% end %}
任何继承这个模板的文件都可以包含它自己的{% block header %}和{% end %},把一些不同的东西加进去
意味着你可以使用你的HTML相同代码为你网站不同的网页共享。
通过这种方法,当你想使用同样的信息或布局,或者你想改变某些模板内容时,你不必在每个文件中都重复着相同的代码。你仅仅只需要改变一个文件,而不是所有的。
<!DOCTYPE html> {% load staticfiles %} <html lang="en"> <head> <meta charset="UTF-8"> <title>Pos机</title> <link rel="stylesheet" href="../../static/css/style.css"> //外部样式表 {% block style(标签名) %} //创建了一个block(块),这个模板标签允许你在其中插入扩展自base.html的模板的HTML代码 {% endblock %} </head> <body> <div> <div class="option"> <div class="opt-list"> <input type="button" class="list visit-link" value="Let's Go"/> </div> </div> {% block content %} //这个模板标签允许你在其中插入扩展自base.html的模板的HTML代码
{% endblock %} </div> </body> </html>
模版文件引入:
{% extends 'blog(项目名)/base.html'(模版名) %}
css与jQuery方法引入再建一个模版标签即可
{% load staticfiles %}(加载静态文件)
{% block style(标签名) %}
<link rel="stylesheet" href="{% static 'css/cart.css' %}">
<script src="../../static/js/shopping_list.js"></script>
{% endblock style %}
应用模版:
{% extends 'cart/base.html' %} //引入模版 {% load staticfiles %} //加载静态文件,引入css,js {% block style %} <link rel="stylesheet" href="../../static/css/home.css"> <script src="../../static/js/home.js"></script> {% endblock style %} {% block content %} //具体内容 <div class="detail"> <h1>Welcome to Let's Go!</h1> <p>商店里进行购物结算时会使用收银机(POS)系统,这台收银机会在结算时根据客户的 购物车(Cart)中的商品(Item)和商店正在进行的优惠活动(Promotion)进行结算和打印购物清单。 已知该商店正在对部分商品进行“买三送一”的优惠活动,即买三件商品其中一件是送的,按照两件商品价格结算。 我们需要实现一个名为printInventory函数,该函数能够将指定格式 的数据作为参数输入,然后在浏览器的控制台中输出结算清单的文本。 </p> <input class="visit" type="button" value="Let's Go" onclick="location='shopping_list.html'"> </div> {% endblock content %}
相关推荐
lyg0 2020-07-05
xzkjgw 2020-06-12
huacuilaifa 2020-06-10
wannagonna 2020-06-08
jvm 2020-05-30
impress 2020-05-27
june0 2020-05-17
xhao 2020-05-04
枫叶上的雨露 2020-04-25
wordmhg 2020-04-18
82911234 2020-04-15
亦碎流年 2020-04-10
RocketJ 2020-01-11
宿舍 2020-01-02
huningjun 2012-07-12
alicelmx 2019-11-12
alicelmx 2019-11-10
MrIronHand 2016-08-09