一、前端模板

　　变量：{{ 变量 }}

　　1、标签

{% block 名字 %}
{% endblock %}

　　2、父子模板的使用

　　　　1）实现逻辑
  1. 定义一个base.html的模板
  2. 子模板继承父模板
　　　　2）步骤

　　父模板

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

{% block mycss %} {% enblock %}

{% block myjs %} {% enblock %}

　　子使用父模板

  1. {% extends ‘父模板的名称’ %} 将父模板继承过来
  2. 找到对应的block（坑）填充

　　3、include包含

　　使用场景：在A、B、C页面有共同的部分，但是其他页面没有这部分

　　步骤

  1. 先定义一个公共的模板部分 xxx.html
  2. 谁使用则include过来，{% include '文件夹/xxx.html' %}

　　4、macro 宏

  1. 把它看做是jinja2的一个函数，这个函数可以返回一个html字符串
  2. 目的：代码可以复用，避免代码冗余

　　定义两种方式

  1. 在模板中直接定义：类似marco1.html 中定义方式
  2. 将所有宏提取到一个模板中 macro.html

　　谁使用谁导入（注意格式）

{% import 'macro/macro.html' as xxx %}
{{ xxx.宏名字(参数) }}

 

　　　　1）单次使用
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>宏的使用2</title>
</head>
<body>
<!--定义宏-->
{% macro form(action, value='登录', method='post') %}
<!--作为变量传值-->
    <form action="{{ action }}" method="{{ method }}">
        <input type="text" placeholder="用户名" name="username">
        <br>
        <input type="password" placeholder="密码" name="password">
        <br>
        <input type="submit" value="{{ value }}">
    </form>
{% endmacro %}

<!--调用宏-->
{{ form('/') }}
</body>
</html>

macro1.html

 

#!/usr/bin/env python
# -*- coding:utf-8 -*-
# __author__ = "wzs"
#2021/7/17

from flask import Flask, render_template


app = Flask(__name__)

@app.route('/macro1')
def use_macro1():
    return render_template('macro/macro1.html')

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

app.py

　　　　2）多次使用可以下面这样写
<!--定义宏-->
{% macro form(action, value='登录', method='post') %}
<!--作为变量传值-->
    <form action="{{ action }}" method="{{ method }}">
        <input type="text" placeholder="用户名" name="username">
        <br>
        <input type="password" placeholder="密码" name="password">
        <br>
        <input type="submit" value="{{ value }}">
    </form>
{% endmacro %}

<!--调用宏-->
{{ form('/') }}

macro.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>宏的使用2</title>
</head>
<body>
{% import 'macro/macro.html' as func %}
{{ func.form('/welcome', value='注册') }}
</body>
</html>

macro2.html

#!/usr/bin/env python
# -*- coding:utf-8 -*-
# __author__ = "wzs"
#2021/7/17

from flask import Flask, render_template


app = Flask(__name__)


@app.route('/macro2')
def use_macro2():
    return render_template('macro/macro2.html')

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

app.py

　　5、块总结

{% if 条件 %}  ...... {% endif %}

{% for 条件 %}  ...... {% endfor %}

{% block 条件 %}  ...... {% endblock %}

{% macro 条件 %}  ...... {% endmacro %}


{% include '' %}  包含

{% import ‘’ %}   导入

{% extend %}  扩展
{{ xxx.宏名字(参数) }}

 

二、前端快速编写

　　1、安装emmet插件

　　官网：​​https://docs.emmet.io/​​