Flask 安全和 Bootstrap
Flask-security and Bootstrap
如何使用 Bootstrap 设置我的 Flask-security 登录站点的样式? html 表单如下所示:
<form action="{{ url_for_security('login') }}" method="POST" name="login_form">
{{ login_user_form.hidden_tag() }}
{{ render_field_with_errors(login_user_form.email) }}
{{ render_field_with_errors(login_user_form.password) }}
{{ render_field_with_errors(login_user_form.remember) }}
{{ render_field(login_user_form.next) }}
{{ render_field(login_user_form.submit) }}
</form>
Bootstrap 已实现,但我不知道如何编辑字段和提交按钮..
render_field_*
函数接受一个 class_
参数,该参数会将 HTML 类 添加到字段中。根据需要添加 bootstrap 样式 类。
render_field_with_errors(login_user_form.email, class_="form-control") }}
{{ render_field(login_user_form.submit, class_="btn btn-default") }}
以此类推
Flask-Security 使用 Flask-WTForms 呈现和验证表单。在 Flask-Security 1.7.5 中,"security/_macros.html" 中定义的默认 render_field_with_errors
和 render_field
宏是
{% macro render_field_with_errors(field) %}
<p>
{{ field.label }} {{ field(**kwargs)|safe }}
{% if field.errors %}
<ul>
{% for error in field.errors %}
<li>{{ error }}</li>
{% endfor %}
</ul>
{% endif %}
</p>
{% endmacro %}
{% macro render_field(field) %}
<p>{{ field(**kwargs)|safe }}</p>
{% endmacro %}
根据Flask-WTForms 0.10 docs,上述两个宏函数都接受...
... keyword arguments that are forwarded to WTForm’s field function that renders the field for us. The keyword arguments will be inserted as HTML attributes.
具体来说,行 {{ field(**kwargs)|safe }} 将 HTML 转义关键字参数传递给 field 函数。因此,您可以添加类、
{{ render_field_with_errors(login_user_form.email, class="form-control") }}
并且还可以覆盖默认的 HTML 属性,
{{ render_field_with_errors(login_user_form.email,
class="form-control", type="email", placeholder="Enter email") }}
{{ render_field(login_user_form.submit, class="btn btn-default", value="Submit" ) }}
此外,您可以通过修改上述宏来定义自己的宏。例如,如果您想使用 Bootstrap 警报来呈现表单验证错误,您可以定义宏函数 render_field_with_bootstrap_errors
{% macro render_field_with_bootstrap_errors(field) %}
<p>
{{ field.label }} {{ field(**kwargs)|safe }}
{% if field.errors %}
{% for error in field.errors %}
<div class="alert alert-danger" role="alert">{{ error }}</div>
{% endfor %}
{% endif %}
</p>
{% endmacro %}
添加您自己的宏非常简单。例如,您可以将自定义宏放在模板目录中的 "custom_macros.html" 文件中,然后使用
将函数加载到模板中
{% from "custom_macros.html" import render_field_with_bootstrap_errors %}
这样,很容易修改宏以使用不同的 Bootstrap 功能。
如何使用 Bootstrap 设置我的 Flask-security 登录站点的样式? html 表单如下所示:
<form action="{{ url_for_security('login') }}" method="POST" name="login_form">
{{ login_user_form.hidden_tag() }}
{{ render_field_with_errors(login_user_form.email) }}
{{ render_field_with_errors(login_user_form.password) }}
{{ render_field_with_errors(login_user_form.remember) }}
{{ render_field(login_user_form.next) }}
{{ render_field(login_user_form.submit) }}
</form>
Bootstrap 已实现,但我不知道如何编辑字段和提交按钮..
render_field_*
函数接受一个 class_
参数,该参数会将 HTML 类 添加到字段中。根据需要添加 bootstrap 样式 类。
render_field_with_errors(login_user_form.email, class_="form-control") }}
{{ render_field(login_user_form.submit, class_="btn btn-default") }}
以此类推
Flask-Security 使用 Flask-WTForms 呈现和验证表单。在 Flask-Security 1.7.5 中,"security/_macros.html" 中定义的默认 render_field_with_errors
和 render_field
宏是
{% macro render_field_with_errors(field) %}
<p>
{{ field.label }} {{ field(**kwargs)|safe }}
{% if field.errors %}
<ul>
{% for error in field.errors %}
<li>{{ error }}</li>
{% endfor %}
</ul>
{% endif %}
</p>
{% endmacro %}
{% macro render_field(field) %}
<p>{{ field(**kwargs)|safe }}</p>
{% endmacro %}
根据Flask-WTForms 0.10 docs,上述两个宏函数都接受...
... keyword arguments that are forwarded to WTForm’s field function that renders the field for us. The keyword arguments will be inserted as HTML attributes.
具体来说,行 {{ field(**kwargs)|safe }} 将 HTML 转义关键字参数传递给 field 函数。因此,您可以添加类、
{{ render_field_with_errors(login_user_form.email, class="form-control") }}
并且还可以覆盖默认的 HTML 属性,
{{ render_field_with_errors(login_user_form.email,
class="form-control", type="email", placeholder="Enter email") }}
{{ render_field(login_user_form.submit, class="btn btn-default", value="Submit" ) }}
此外,您可以通过修改上述宏来定义自己的宏。例如,如果您想使用 Bootstrap 警报来呈现表单验证错误,您可以定义宏函数 render_field_with_bootstrap_errors
{% macro render_field_with_bootstrap_errors(field) %}
<p>
{{ field.label }} {{ field(**kwargs)|safe }}
{% if field.errors %}
{% for error in field.errors %}
<div class="alert alert-danger" role="alert">{{ error }}</div>
{% endfor %}
{% endif %}
</p>
{% endmacro %}
添加您自己的宏非常简单。例如,您可以将自定义宏放在模板目录中的 "custom_macros.html" 文件中,然后使用
将函数加载到模板中{% from "custom_macros.html" import render_field_with_bootstrap_errors %}
这样,很容易修改宏以使用不同的 Bootstrap 功能。