[Follow Study] Day5:flask开发中的jinja2模板引擎学习笔记(二)

一、flask jinja2语法

1、flask manager runserver

前面给大家说了flask-script是我们在开发过程中经常会用到的，首先我们先用manager.add_command添加一个runserver命令，方便我们后面做调试。

from flask import Flask
from flask-script import Manager, Server

app=Flask(__name__)
manager=Manager(app)

@app.route('/')
    def index():
        return render_template('index.html', title="hello world")

manager.add_command('runserver',
     Server(
        host='127.0.0.1',
        port='5000',
        use_debugger=True,
        use_reloader=True
    )
)

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

然后我们在命令行下运行sample.py文件，注意这个时候运行的时候需要附加参数。

python sample.py runserver

这个时候我们就可以看到我们的项目重新启动，具体如下图:

Paste_Image.png

2、flask jinja2变量

在flask jinja2模板中，功能是很强大的，支持变量，支持if语句，支持for循环，总之一句话，强大的超出你的想象!印象中好像那个php框架也是使用的jinja2作为模板引擎的。

flask jinja2设置变量

语法:

{% set var = 值 %}

比如我们要做一个导航，在jinja2模板引擎中可以这样写,首先我们先进行赋值操作。

{% set nav=[
    {"name":"Home","href":url_for('.index')},
    {"name":"project","href":url_for('.project')},
    {"name":"service","href":url_for('.service')},
    {"name":"about","href":url_for('.about')}
]
%}

3、flask jinja2 for循环

在上面我们对导航的内容进行了赋值，接下来，我们需要通过for循环语句，把这些内容一样遍历出来。

{% for item in nav%}
    {{ item.name }}
{% endfor %}

这个时候我们重新刷新我们的页面就可以看到我们的导航已经完美出来了，而且点击相应的链接都能够跳转到相应的页面。

Paste_Image.png

4、flask jinja2 loop用法

看完了上面的内容是不是觉得页面有点单调？我们一般看到的导航，两个item之间都有一个|，下面我们就通过loop来加上这个功能，loop最常用的操作是对for循环的指针进行判断操作，常见的用途，比如循环多少位然后加入广告位置等，这里以|为例给大家介绍jinja2的loop操作。

{% for item in nav%}
    {% if loop.index != 1 %}
        |
    {% endif %}
    {{ item.name }}
{% endfor %}

其中这里的if语句就是判断循环的指针是否是第一个，如果是的话，那么先输出一个|，然后再输出a标签，这时候我们可以刷新一下首页:

Paste_Image.png

5、jinja2 if语句

jinja2中的if语句和for循环语句用法上差不多一样，都是双标签语句，有开始就应该有闭合:

{% if 判断语句%}
    省略
{% else %}
    省略
{% endif %}

二、jinja2模板继承、包含、宏

jinja2模板优点很多，其中很大的一个优点是可以通过模板的继承来简化模板页面，这个功能可以让你丰富的页面以及其优美的代码展现。

1、jinja2模板继承

jinja2模板继承的核心是区块的继承，区块需要命名，区块的名字在模板中是唯一的，下面是一个母模板的代码。

    {% block head %}
        
        {% block title%}{% endblock title %}
    {% endblock head%}


    {% block content %}{% endblock content %}

    {% block footer %}
        
CopyRight 2017 Powered by 小虾 公众号:虾扯蛋人生
    {% endblock footer %}

上面就是一个简单的母模板文件，其中的block可以简单的理解就是占位，继承模板文件中用这个来填充，下面是一个index.html的模板。

{% extends 'base.html' %}

上面就是在index.html简单地继承base.html，这个时候，我们刷新首页就可以看到我们的页面已经继承了，不过由于head、title、content没有输入占位内容，所以我们只能看到母模板base.html基本内容:

Paste_Image.png

下面我们对index.html内其他内容进行填充，然后再进行。

{% extends 'base.html' %}
{% block head %}
{% block title %}

{% endblock title %}
{% endblock head %}

{% block content %}
{{ body }}
{% endblock content %}

这个时候我们刷新页面就可以看到相应的内容。

Paste_Image.png

上面我们也看到footer继承的是base.html页面，但是我们的index.html可能有一些特殊的内容，比如我们要加自己的友情链接，这个时候可以用下面的方法来实现。

{% extends 'base.html' %}
{% block head %}
{% block title %}

{% endblock title %}
{% endblock head %}

{% block content %}
{{ body }}
{% endblock content %}

{% block footer%}
hello,这是友情链接位置

{{ super() }}
{% endblock footer%}

上面的{{ super() }}的意思是调用base.html底部链接，如果没有这个的话，我们的footer blcok会直接被覆盖，加上这个super的话就是新加，super()放在上面的话，那base的内容就在上面，super()放在下面的话就在下面，下面是具体的效果:

Paste_Image.png

继承的块如果想要重复使用的话，可以通过`self.模块名``来调用,比如我们要调用title这个模块，可以通过下面的代码来实现重复调用。

{{ self.title() }}

2、jinja2模板包含

在我们做前端的时候，有时候会出现某一区块的内容，几乎在部分的页面出现，但是不是在全部出现，如果在全部出现的可以用继承，碰到部分的话就通过包含来引入，哪里需要在哪里引入。

使用的语法是include '模板文件'，下面给大家以具体的例子来说明。

{% extends 'base.html' %}
{% include 'includes/header.html' %}
{% block content %}
{{ body }}
{% endblock content %}

{% block footer%}
hello,这是友情链接位置

{{ super() }}
{% include 'includes/footer.html' %}
{% endblock footer%}

这个时候我们刷新一下页面:

Paste_Image.png

3、jinja2模板宏

jinja2模板宏，通俗地我们可以这里理解，就是在模板中使用函数，jinja2宏一般解决的问题是经常会出现的内容，频率没有继承和包含高，比如input语句。下面是一个使用宏的代码:

{% extends 'base.html' %}
{% include 'includes/header.html' %}
{% macro input(name,value='',type='text') %}

{% endmacro%}
{% block content %}
{{ body }}
{{ input('username') }}
{{ input('password', type='password') }}
{% endblock content %}

{% block footer%}
hello,这是友情链接位置

{{ super() }}
{% include 'includes/footer.html' %}
{% endblock footer%}

这个时候我们刷新页面就可以看到我们的表单出来了。

Paste_Image.png

另外我们可以把宏放在一个单独的宏文件，然后在需要引入的时候直接引入，同时为了避免引入的宏文件名字重复，我们可以通过import as这样的语法来引入。

三、学习心得

最近几天学习下来，还是一个感悟，要多动手，有时候看是理解的，但是在写代码的时候可能就会经常性的卡壳，每次的卡壳就是一次新的进步，认真理解了确实很难忘记的。