Flask入门学习---进一步了解模板

1.模板结构组织

1.1 局部模板

局部模板仅包含部分代码，用来插入到其他独立模板

{% include 'banner.html' %} #将banner.html的内容插入
复制代码

1.2 宏(macro)

使用宏将一部分模板代码封装到宏中，使用传递的参数来构建内容，最后返回构建的内容。

为了方便管理，我们把宏存储在单独的文件中，这个文件通常命名为macros.html 或 _macors.html。示例如下:

{% mcro qux(amount=1) %}{% if amount == 1 %}I am qux.{% elif amount > 1 %}We are quxs.{% endif %}
{% endmacro %}
复制代码

在模板中使用宏：

{% from 'macros.html' import qux %}
...
{{ qux(amount=5 )}}
复制代码

1.3 模板继承

1.3.1 编写基模板

基模板存储了程序页面的固定部分

#base.html
<!DOCTYPE html>
<html>
<head>{% block head %}<meta charset="utf-8"><title>{% block title %}Template - HelloFlask{% endblock %}</title>{% block styles %} {% endblock %}{% endblock %}
</head>
<body>
<nav><ul><li><a href="{{ url_for('index') }}">Home</a></li></ul>
</nav>
<main>{% block content %}{% endblock %}
</main>
<footer>{% block footer %}...{% endblock %}
</footer>
{% block scripts %}{% endblock %}
</body>
</html>
复制代码

1.3.2 编写子模板

#index.html
{% extends 'base.html' %}
{% from 'macros.html' import qux %}
{% block content %}
{% set name='baz' %}
<h1>template</h1>
<ul><li><a href="{{ url_for('watchlist') }}">Watchlist</a></li><li>Filter: {{ foo|musical }}</li><li>Global: {{ bar() }}</li><li>Test: {% if name is baz %}I am baz.{% endif %}</li><li>Macro: {{ qux(amount=1) }}</li><li><a href="{{ url_for('watchlist_with_static') }}">Watchlist with image and styles.</a></li><li><a href="{{ url_for('just_flash') }}">Flash something</a></li>
</ul>
{% endblock %}
复制代码

在子模板中，我们可以对父模板中的块执行两种操作：

a.覆盖内容

b.追加内容

{% block styles %}
{{ super() }}
<style>.foo{color:red;}
</style>
<% endblock %>
复制代码

2.模板进阶实践

2.1 加载静态文件

在Flask程序中，默认我们将静态文件储存在与主脚本同级目录的static文件夹。

若在static目录下保存了一个img.jpg,我们使用下面代码获取文件的URL

url_for('static',filename='img.jpg')
复制代码

2.2 消息闪现

Flask提供了一个flash()函数，它可以用来"闪现"需要显示给用户的信息。使用flash函数发送的信息是存储在session中，我们需要在模板中用get_flashed_message()函数获取信息并将其显示出来。

#app.py使用flash()函数"闪现"消息
from flask import Flask,render_template,flash
app=Flask(__name__)
app.secret_key='secret string'
@app.route('/flash')
def just_flash():flash('I am flash,who is looking for me?')return redirect(url_for('index'))
复制代码

Flask提供了get_flashed_message()函数用来在模板里获取信息。当函数被调用后，session里面存储的所有信息都会被移除。

#base.html:渲染flash信息
<main>{% for message in get_flashed_messages() %}<div class="alert">{{ message }}</div>{% endfor %}{% block content %}{% endblock %}
</main>
复制代码

2.3 自定义错误页面

我们先创建错误页面的模板

#404.html:404页面模板
{% extends 'base.html' %}
{% block title %}404- Page Not Found {% endblock %}
{% block content %}
<h1>Page Not Found</h1>
<p>You are lost</p>
{% endblock %}
复制代码

创建错误处理器

#app.py:404错误处理器
from flask import Flask, render_template
...
@app.errorhandler(404) #参数为错误状态码
def page_not_found(e):return render_template('errors/404.html'),404
复制代码

2.4 JavaScript和CSS中的Jinja2

只有使用render_template()传入的模板文件才会被渲染，就算我们在HTML导入了JavaScript和CSS,它们包含的Jinja2代码也不会执行。我们可以用以下几种方法解决

1.行内/嵌入式JavaScript/CSS

这种方法不推荐，行内/嵌入式JavaScript/CSS会使维护变得困难。解决方法是尽量将要使用的Jinja2变量值在HTML模板中定义为JavaScript变量.

2.定义为JavaScript变量

对于想要在JavaScript获取的数据，如果是元素特定的数据，可以使用HTML元素的data-*属性存储。

我们可以自定义横线后面的名称，作为元素上的自定义数据变量。

<span data-id="{{ user.id }}">{{ user.username }}
</sapn>
复制代码

在Java Script中，我们使用DOM元素的dataset属性获取data-*属性值

element.dataset.username
复制代码

或是使用getAttribute()方法

element.getAttribute('data-username')
复制代码

使用jQuery时，直接对jQuery对象调用data方法获取

$element.data('username')
复制代码

注：在HTML中，data-*被称为自定义数据属性，我们可以用它来存储自定义的数据供JavaScript获取。

3.定义为CSS变量

#定义为CSS变量
<style>
：root{--theme-color: {{ theme_color }}--background-url:{{ url_for('static',filename='background.jpg') }}
}
</style>
复制代码

在CSS文件中，使用var()函数并传入变量名即可获取对应的变量值：

#foo {color:var(--theme-color);
}
#bar {background:var(--background-url);
}复制代码

转载于:https://juejin.im/post/5cd007df51882540d472ae44