base模版扩展

最新推荐文章于 2024-08-14 12:55:09 发布

iteye_3305

最新推荐文章于 2024-08-14 12:55:09 发布

阅读量172

点赞数

分类专栏： HTML 文章标签： html django

本文链接：https://blog.csdn.net/iteye_3305/article/details/82680741

版权

HTML 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

模板扩展

一个块语句压缩了一些当你扩展时可能想要改变的模板元素

例如，为了使用一个能动态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" οnclick="location='shopping_list.html'">
    </div>
{% endblock content %}

iteye_3305

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
base模版扩展

模板扩展一个块语句压缩了一些当你扩展时可能想要改变的模板元素例如，为了使用一个能动态header块，你可以在父模版中添加：&lt;header&gt; {% block header %}{% end %}&lt;/header&gt; 然后为了在子模板中覆写{% block header %}{% end %}部分，你可以使用块的名字引用，并把想要的内容放到其中...
复制链接

扫一扫

专栏目录