flask学习——模板继承之block,extends,include

1.flask模板

• 模板是web开发的必备模块，通常在渲染网页的时候，并不只是渲染一个纯文本字符串，需要渲染一个富文本标签。Flask配套的模板是JINjia2.

• render_template(‘模板文件名’)渲染模板

from flask import Flask,render_template

app = Flask(__name__)
# app = Flask(__name__,template_folder='xxx')#不仅可以直接修改名字，还可以指定路径
# Flask源码里边渲染的文件夹名字就叫templates，这是flask源代码默认的名字，也可以指定修改template_folder='xxx'

@app.route('/')
def dk():
    return render_template('index.html')#在templates文件夹里
    return render_template('demo/demo.html')#在tempates文件夹里的文件夹demo


if __name__ == '__main__':
    app.run(debug=True)

1.1flask模板参数的传递

from flask import Flask, render_template

app = Flask(__name__)


@app.route('/')
def dk():
    context = {
        'username': 'duke',
        'age': 18,
        'language': {
            'python': 13,
            'java': 12
        },
        'book': ['python', 'java']
    }
    # return render_template('index.html', context=context)
    return render_template('index.html', **context)
    # 模板渲染传递参数

    # return render_template('index.html', username='duke', age='15')
    # 两种方式传递参数。第一种是直接传递相关的几个参数，但是不适用于过多的参数。第二种是通过**传递一个字典进行解包。

if __name__ == '__main__':
    app.run(debug=True)

2.Jinja2模板过滤器

• 过滤器是通过管道符号(|)进行使用。实例{{name|length}}，返回的是name数据的长度。过滤器就相当于一个函数，返回自己需要的相应值。
• 实例模板

@app.route('/')
def dk():
    context = {
        'username': 'dk-coder',
        'age': -19,
        'sex': '男',
        'es': "<script>alert('hello');</script>",
        'books': ['language', 'python', 'java'],
        'book': {'python': 666},
        'address': '中国 中国省 中国市 中国县 中国镇',
        'now_time': datetime(2020, 12, 12, 15, 7, 0)
    }
    return render_template('index.html', **context)

• 常见的过滤器：

1. abs(value)：返回⼀个数值的绝对值。

<p>{{xxx|abs}}<p>

2. default(value,default_value,boolean=false)：如果当前变量没有值，则会使用参数中的值来代替。name|default(‘duke’)——如果name不存在，则会使⽤duke来替代。boolean=False默认是在只有这个变量为undefined的时 候才会使⽤default中的值，如果想使⽤python的形式判断是否为false，则可以传递boolean=true。也可以使⽤or来替换。

<p>{{name|default('duke')}}</p>

3. escape(value)或e：转义字符，会将<、>等符号转义成HTML中的符号。例 如：content|escape或content|e。

'es': "<script>alert('hello');</script>"
{% autoescape off %}
<p>{{es}}</p>
{% endautoescape %}

4. first(value)：返回⼀个序列的第⼀个元素。

<p>{{ books|first }}</p>

5. format(value,*arags,**kwargs)：格式化字符串。例如以下代码：

 <p>{{ "%s" - "%s"|format('Hello?',"Foo!") }}</p>
 将输出：Helloo? - Foo!

6. last(value)：返回⼀个序列的最后⼀个元素。

<p>{{ books|last }}</p>

7. length(value)：返回⼀个序列或者字典的⻓度。

<p>{{ books|length }}</p>

8. join(value,d=u’’)：将⼀个序列⽤d这个参数的值拼接成字符串。
9. safe(value)：如果开启了全局转义，那么safe过滤器会将变量关掉转义。示 例：content_html|safe。
10. int(value)：将值转换为int类型。
11. float(value)：将值转换为float类型。
12. lower(value)：将字符串转换为⼩写。
13. upper(value)：将字符串转换为⼤写。
14. replace(value,old,new)： 替换将old替换为new的字符串。
15. truncate(value,length=255,killwords=False)：截取length⻓度的字符串。
16. striptags(value)：删除字符串中所有的HTML标签，如果出现多个空格，将 替换成⼀个空格。 trim：截取字符串前⾯和后⾯的空⽩字符。
17. string(value)：将变量转换成字符串。
18. wordcount(s)：计算⼀个⻓字符串中单词的个数。

3.关于html里边的控制语句的使用

• 在html里边的控制语句都是放在{% xxx %}中，同时由{% endxxx %}作为结束语句。常用的控制语句有if，for，while，block，以及宏macro等等。

1. if控制语句实例，语法类似python中语法。

{% if kenny.sick %}
   Kenny is sick.
{% elif kenny.dead %}
 You killed Kenny!  You bastard!!!
{% else %}
 Kenny looks okay --- so far
{% endif %}

2. For…in…:for循环遍历序列，包括列表、字典、元组。

• 普通遍历案例

<ul>
    {% for user in users %}
        <li>{{ user }}</li>
    {% endfor %}
</ul>

• 遍历字典

<dl>
    {% for key, value in my_dict.items() %}
        <dt>{{ key }}</dt>
        <dd>{{ value }}</dd>
    {% endfor %}
</dl>

• 如果遍历的序列中没有值，转入else

<ul>
    {% for user in users %}
        <li>{{ user.username }}</li>
    {% else %}
        <li><em>no users found</em></li>
    {% endfor %}
</ul>

在jinja中的for循环包含下列变量可以获取当前遍历的状态。

变量	描述
loop.index	当前迭代的索引（从1开始）
loop.index0	当前迭代的索引（从0开始）
loop.first	是否是第⼀次迭代，返回True或False
loop.last	是否是最后⼀次迭代，返回True或False
loop.length	序列的⻓度

{%for hero in heros%}
    <p>{{hero}}</p>
    <p>{{loop.index0}}</p>
    <p>{{loop.first}}</p>
    <p>{{loop.last}}</p>
{% endfor%}

在控制语句里不可使用continue和break来控制循环

3.1宏和import语句

• 宏：将一些经常用到的代码片段放到宏里边，将不固定的值当成变量抽取出来，这有点类似于常用的函数。
• 宏定义实例

{% macro input(name,value='',type='text')%}
<input type="{{type}}",name="{{name}}",value="{{value}}">
{% endmacro%}

在案例中订阅了一个input标签，之后就可以通过这个直接使用。

{{macro.input('username')}}
{{input('password',type='password')}}
#通常我们需要通过import语句导入宏，用法类似python里的导入模块

• import导入的方法

1. import …as…

{% import 'macro.html' as macro%}
<!--这里的macro.html就是包含了宏标签-->
{{macro.input('username')}}
{{input('password',type='password')}}

2. .from…import…as…/from…import…形式

{% from "macro.html" import input %}
<tr>
    <td>密码：</td>
    <td>{{ input("password",type="password") }}</td>
</tr>

3. 在导入模块的时候，不会吧上下文变量添加到模板中，可以使用with context（在.py文件里的render_template(‘index.html’, **context)将其一起导入。

{% import 'macro.html' as macro with context %}

3.2include和set语句

• include语句：可以把一个模板引入到另外一个模板中，

当定义了两个html文件时，通过include语句可以将这两个html内容加载到第三个html文件中。
{% include 'header.html' %}
        主体内容
{% include 'footer.html' %}
## 输出的结果按照指定的位置顺序依次在网页模板上显示。

• set语句：赋值语句。类似于函数的定义变量。

{% set name='duke' %}
{% set navigation = [('index.html', 'Index'), ('about.html', 'About')] %}

注意：set语句一般都是全局变量，在其之后都是有效的。可以使用with语句来创建一个内部作用域，让其变成局部变量。

• 局部变量的两种定义方法

1. {% with %}
    {% set foo = 42 %}
    {{ foo }}         #输出  42 
{% endwith %}

2.{% with foo = 42 %}
    {{ foo }}
{% endwith %}

4.模板继承

• flask中模板可以继承，通过继承可以把模块中许多重复的元素抽取出来，放在父模板中，通过block语句向子模版开放端口。

父模板定义base.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{% block Title%}
        Title
        {% endblock %}
    </title>
</head>
<body>
{% block header%}
<ul>
        <li>国际</li>
        <li>军事</li>
        <li>财经</li>
        <li>娱乐</li>
</ul>
{% endblock %}

{% block footer %}
<div class="footer">
    网页尾部
    {% block foo%}
    <div class="foo">
        foo
    </div>
    {% endblock %}
</div>
{% endblock %}

{% block demo%}
{% endblock %}
</body>
</html>

• extends语句继承模板

子模板继承使用，demo.html
<h1>首页</h1>
{% extends 'base.html' %}

{% block footer %}
<div class="footer">
    尾部
    {% block foo%}
    <div class="foo">
        footsd
    </div>
    {% endblock %}
</div>
{% endblock %}

{% block Title%}
{{ super()}}##super()这个函数是执行父模板中的代码，将父模板中的内容添加到子模版中。如果不添加该函数，那么子模版中定义的title就会将其覆盖掉

新的标题
{% endblock %}

{% block demo%}##子模版里的标签和文本都必须用block语句包括起来，否则不会被渲染。
<p>自定义</p>
{% endblock %}

注意:利用block语句将需要重新定义的标签进行修改，但是block语句不能重名

• 如果⼀个地⽅需要⽤到另外⼀个block 中的内容，可以使⽤self.blockname的⽅式进⾏引⽤

<title>
    {% block title %}
        这是标题
    {% endblock %}
</title>
<h1>{{ self.title() }}</h1>

在子模版中，所有的文本标签和代码都要添加到从父模板中继承的block语句中。否则这些文本和标签都不会被渲染。

4.1静态文件的配置

• 在jinja中加载静态文件，只需要通过url_for全局函数就可以实现

1. 加载css文件（static是flask框架源代码定义的文件夹名）

<link rel="stylesheet" href="{{url_for('static',filename='css/index.css')}}">


如果css静态文件不放在static文件夹中的话。就需要重新指定。
app = Flask(__name__,static_folder='C:\static')

2. 加载js文件

<script src="{{url_for('static',filename='js/index.js')}}"></script>

3. 加载img图片文件也一样

<img src="{{url_for('static',filename='images/index.jpeg')}}" alt="">