目录

一.模版引擎

1.1什么是模板

1.2什么是Jinja2

1.3什么是模板渲染

二.Jinja2语法

2.1传递一个参数

2.2传递列表型参数

2.3传递所有参数

2.4分隔符

 2.5if

2.6for

2.7set

2.8with

三.模版插入与模版继承

3.1include模版插入

3.2extends模版继承

一.模版引擎

Flask使用Jinja2引擎来渲染模版

1.1什么是模板

简单来说，在web应用开发中，为了实现前后端的解耦，分离前后端逻辑，就可以将表现逻辑分离出来交由模板通过模板引擎来实现。

其实模板就是包含静态与动态内容的网页内容。

1.2什么是Jinja2

Jinja2是一种现代的、对设计人员友好的Python模板语言。具有快速、广泛使用和安全的特性。

1.3什么是模板渲染

所谓渲染，其实就是向网页中加载静态内容及动态内容值的过程。

二.Jinja2语法

2.1传递一个参数

app.py：

@app.route('/')
def hello_world():
    content = "首页内容"
    return render_template('index.html', content=content)

index.html：

    
{{ content }}

• 通过{{ var }}使用传来的参数值

  2.2传递列表型参数

  app.py：

  @app.route('/')
  def hello_world():
      content = ["1","2","3","4","5"]
      return render_template('index.html', content=content)

  index.html：

      
      {{ title }}
  
  
      {{% for item in content %}}
          
  {{item}}
      {{% endfor %}}
  
  

  2.3传递所有参数

  @app.route('/')
  def hello_world():
      title = "首页"
      content = "首页内容"
      return render_template('index.html', **locals())
  

  • 使用**locals()将所有参数传递给了模板，然后选择性使用

    2.4分隔符

    {{ var }}是不同于html原生语法的东西

    {{}}叫分隔符，Jinja2中的分隔符有好几个：

    {% ..... %} 用于声明

    {{ .... }} 用于打印表达式，使用变量等

    { # .... # } 用于模版注释

    # .... ## 对语法的简化

     2.5if

    模板语法：

    {% if condition %}
        do something
    {% elif condition %}
        do something
    {% else %}
        do something
    {% endif %}

    2.6for

    模板语法：

    {% for item in iteratable %}
        do something
    {% endfor %}

    2.7set

    set用于在模版中设置变量，直接在set中定义代码的变量，如果不用with修饰，默认是全局变量。

    {% set name = '鞠婧祎' %}
    {{name}}

    2.8with

    with用于创建一个局部作用域，在这个局部作用域使用set定义的变量仅在with中有效，不会污染全局

    {% with %}
        {% set name = '鞠婧祎' %}
        {{name}}
    {% endwith %}

    上面的set也可以直接写进with中，格式如下：

    {% with name = '鞠婧祎' %}
        {{name}}
    {% endwith %}

    三.模版插入与模版继承

    3.1include模版插入

    include用于向某个HTML指定位置中插入一个模板

    PS：“include只能插入，不能修改插入的内容！！”

    模板语法：

    {% include  template_name%}

     例如：

    header.html：

    
    
        My Website
    
    
        
            
    Welcome to My Website
        

    footer.html：

        
            
    © 2024 My Website
        
    
    

    index.html：

    {% include 'header.html' %}
    
        
    This is the content of the homepage.
    
    {% include 'footer.html' %}

    可以看到，include只能插入一个模板，并不能对模板进行选择性的修改，因此局限性较大

    3.2extends模版继承

    extends用于实现模板继承，子模板可以继承父模板的内容，并且可以修改。

    在使用extends时，可以使用block指令来圈选子模板可以修改的范围。

    base.html(父模板)：

    
    
        {% block title %}My Website{% endblock %}
    
    
        {% block content %}{% endblock %}
        
            
    © 2024 My Website
        
    
    

    home.html(子模板)：

    {% extends 'base.html' %}
    {% block title %}Homepage - My Website{% endblock %}
    {% block content %}
        
            
    Welcome to My Website
        
        
            
    This is the content of the homepage.
        
    {% endblock %}

    • 如果我们想修改父模板的内容，且想保留父模板的内容，可以使用：“{{ super() }}”来保留父模板内容