首页 > 其他 > 详细

09 flask模板 复用,include,宏

时间:2021-01-14 11:23:40      阅读:0      评论:0      收藏:0      [点我收藏+]

模板继承
需要模版继承的情况:
  1。 多个模板具有完全相同的顶部和底部
  2。 多个模板具有相同的模板内容,但是内容中部分不一样
  3。 多个模板具有完全相同的模板内容

标签:
  {% block 名字 %}

  {% endblock %}

1.定义父模板
2.子模板继承父模板


步骤:
父模板:
  1。 定义一个base.html的模板
  2。 分析模板中哪些是变化的比如:{% block title %}父模板的title{% endblock %}
  对变化的部分用block进行"预留位置"也称作:挖坑
  3。注意:样式和脚本 需要提前预留
    {% block mycss %}{% endblock %}
    {% block myjs %}{% endblock %}

子使用父模板:
  1。 {% extends ‘父模板的名称‘ %}将父模板继承过来
  2。 找到对应的block(坑)填充,每一个block都是有名字的。

 

 1 base.html   父模板
 2 
 3 
 4 <!DOCTYPE html>
 5 <html lang="en">
 6 <head>
 7     <meta charset="UTF-8">
 8     <title>
 9         {% block title %}父模板的title{% endblock %}
10     </title>
11     <style>
12         #head {
13             height: 50px;
14             background-color: bisque;
15         }
16 
17         #head ul {
18             list-style: none;
19             height: 50px;
20         }
21 
22         #head ul li {
23             float: left;
24             width: 100px;
25             text-align: center;
26             font-size: 18px;
27             height: 50px;
28             line-height: 50px;
29         }
30 
31         #middle {
32             height: 900px;
33             background-color: azure;
34         }
35 
36         #foot {
37             height: 50px;
38             line-height: 50px;
39             background-color: darkseagreen;
40         }
41     </style>
42     {% block mycss %}{% endblock %}
43 </head>
44 <body>
45 <div id="head">
46     <ul>
47         <li>首页</li>
48         <li>秒杀</li>
49         <li>超市</li>
50         <li>图书</li>
51         <li>会员</li>
52     </ul>
53 </div>
54 <div id="middle">
55     {% block middle %}
56         <button id="btn">我是中间部分</button>
57     {% endblock %}
58 </div>
59 
60 <div id="foot">
61     我是底部
62 </div>
63 {% block myjs %}
64 
65 {% endblock %}
66 </body>
67 </html>
index.html     子模板



{% extends ‘base.html‘ %}
{% block title %}
    首页
{% endblock %}
{% block mycss %}
    <style>
        #middle{
            background-color: deeppink;
            color: white;
            font-weight: bold;
        }
        .div1{
            width: 33%;
            height: 500px;
            float: left;
            border: 1px solid red;
        }
    </style>
{#   /static/<filename> #}
    <link rel="stylesheet" href="{{ url_for(‘static‘,filename=‘css/style.css‘) }}">   <!--引入静态文件-->
{% endblock %}

{% block myjs %}
    <script>
            btn = document.getElementById(btn)
            btn.onclick=function(){
                alert(别点我啊!)
            }
    </script>
{% endblock %}

{% block middle %}
    <div class="div1" id="d1"> </div>
    <div class="div1"> </div>
    <div class="div1"> </div>
    <img src="{{ url_for(‘static‘,filename=‘images/a1.png‘) }}" alt="">
{% endblock %}

 

 

 

 

include包含

 

在A,B,C页面都共同的部分,但是其他页面没有这部分。
这个时候考虑使用include
步骤:
  1。先定义一个公共的模板部分,xxx.html
  2。谁使用则include过来, {% include ‘文件夹/xxx.html‘ %}

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>欢迎页面</title>
 6 </head>
 7 <body>
 8 {% include ‘common/header.html‘ %}
 9 <div style="background-color: darkseagreen; height: 100px;"></div>
10 </body>
11 </html>

 

09 flask模板 复用,include,宏

原文:https://www.cnblogs.com/lccode/p/14275878.html

(0)
(0)
   
举报
评论 一句话评论(0
© 2014 bubuko.com 版权所有 鲁ICP备09046678号-4
打开技术之扣,分享程序人生!
             

鲁公网安备 37021202000002号