Flask系列-模板

Posted localhost-ha

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Flask系列-模板相关的知识,希望对你有一定的参考价值。

一、Jinjia2

1.Jinjia2模板引擎

  • 默认情况下,Flask在templates文件夹中寻找模板,使用render_template将该引擎集中到程序中

    一个超简陋的 Jinjia2 模板:

    <h1>Hello, {{name}}!<h1>
    
  • 变量:

    • {{ }}表示一个变量,值从渲染模板时使用的数据中获取

    • 可使用过滤器修改变量:{{name|capitalize}}

      • safe注意:

        • Jinjia2会转义所有变量,如<h1>渲染为&lt;h1&gt;
        • 不要在不可信值上使用safe过滤器
      过滤器名说明
      safe渲染时不转义
      capitalize把值的首字母转换成大写,其他字母转换成小写
      lower把值转换成小写形式
      upper把值转换成大写形式
      title把值中每个单词的首字母都转换成大写
      trim把值的首尾空格去掉
      striptags渲染之前把值中所有的html标签都删掉

       

2.控制结构

  • 变量:{{}}

  • 语句:{% %} + {% end啥子 %}

  • 在模板中使用条件控制语句

    <!-- 条件控制语句 -->
    {% if user %}
        Hello, {{ user }}!
    {% else %}
        Hello, Stranger!
    {% endif %}
    
    <!-- for循环 -->
    <ul>
        {% for comment in comments %}
            <li>{{ comment }}</li>
        {% endfor %}
    </ul>
    
    • 重复利用宏:保存在单独的文件中,在需要使用的模板中导入
    • 重复利用模板代码片段:写入单独文件中,再包含在所有模板中{% include 'commen.html' %}
    <!-- 宏:{% macro 函数名() %}-->
    {% macro render_comment(comment) %}
        <li>{{ comment }}</li>
    {% endmacro %}
    
    {% import 'macros.html' as macros %}
    
  • 模板继承

    base.html 基模板:

    <html>
    <head>
        {% block head %}
        <title>{% block title %}{% endblock %} - My Application</title>
        {% endblock %}
    </head>
    <body>
        {% block body %}
        {% endblock %}
    </body>
    </html>
    

    衍生模板:

    • 新定义的head块,在基模板中内容不为空,使用super()获取原来的内容
    {% extends "base.html" %}
    {% block title %}Index{% endblock %}
    {% block head %}
        {{ super() }}
        <style>
        </style>
    {% endblock %}
    {% block body %}
    <h1>Hello, World!</h1>
    <% endblock %}
    

二、Flask-Bootstrap

1.初始化

  • 安装:pip install flask-bootstrap

  • Bootstrap官方文档:https://v3.bootcss.com/css/#less

  • 初始化

    from flask_bootstrap import Bootstrap
    
    bootstrap = Bootstrap(app)
    

2.templates/base.html

  • extends从Flask-Bootstrap中导入bootstrap/base.html
  • Flask-Bootstrap中的基模板提供了一个网页框架,引入Bootstrap中所有的CSS和javascript文件
  • title:导航栏文档头 navbar:导航条 content:主体
{% extends "bootstrap/base.html" %}

{% block title %}Flasky{% endblock %}

{% block navbar %}
<div class="navbar navbar-inverse" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="/">Flasky</a>
        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li><a href="/">Home</a></li>
            </ul>
        </div>
    </div>
</div>
{% endblock %}

{% block content %}
<div class="container">
    {% block page_content %}{% endblock %}
</div>
{% endblock %}

3.base.html中定义的块

  • {% block 模块名称 %} + {% endblock %}
  • 如果需要向已有内容块添加内容,{{super()}}
块名说明
doc整个HTML文档
html_attribs<html>标签属性
html<html>标签内容
head<head>标签内容
title<title>标签内容
metas一组<meta>标签
stytles层叠样式表定义
body_attribs<body>标签属性
body<body>标签内容
navbar用户定义的导航条
content用户定义的页面内容
scripts文档底部的Javascript声明

4.自定义页面

  • 自定义初始程序:

    from flask import Flask, render_template
    from flask_bootstrap import Bootstrap
    
    app = Flask(__name__)
    bootstrap = Bootstrap(app)
    
    @app.route('/')
    def index():
        return render_template('index.html')
    
  • 使用模板继承机制自定义的index页面:

    {% extends "base.html" %}
    
    {% block title %}Flasky{% endblock %}
    
    {% block page_content %}
    <div class="page-header">
        <h1>Hello World!</h1>
    </div>
    {% endblock %}
    

  • 自定义404处理程序

    @app.errorhandler(404)
    def page_not_found(e):
        return render_template('404.html'), 404
    
  • 使用模板继承机制自定义的404页面:

    {% extends "base.html" %}
    
    {% block title %}Flasky - Page Not Found{% endblock %}
    
    {% block page_content %}
    <div class="page-header">
        <h1>Not Found</h1>
    </div>
    {% endblock %}
    

  • 自定义/user/<name>处理程序:

    @app.route('/user/<name>')
    def user(name):
        return render_template('user.html', name=name)
    
  • 使用模板继承机制自定义的user页面:

    {% extends "base.html" %}
    
    {% block title %}Flasky{% endblock %}
    
    {% block page_content %}
    <div class="page-header">
        <h1>Hello, {{ name }}!</h1>
    </div>
    {% endblock %}
    

5.链接

  • url_for()

    • 以视图函数名作为参数,返回对应的URL

      url_for('index, _external=True')返回绝对路径

      连接程序内不同路由的链接时,使用相对地址url_for('index')就足够了

    • 生成动态地址url_for('user',name='john',_external=True)返回http://localhost:5000/user/john

    • 参数不局限于动态路由中的参数,url_for('index', page=2)返回结果 /?page=2

6.静态文件

  • 默认设置下,Flask在程序根目录中名为static的文件夹中寻找静态文件。可在static中使用子文件夹存放文件

    {% block head %}
    {{ super() }}
    <link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}" type="image/x-icon">
    <link rel="icon" href="{{ url_for('static', filename='favicon.ico') }}" type="image/x-icon">
    {% endblock %}
    

7.本地化时间

  • 安装基于moment.js的拓展程序:pip install flask-moment

  • Flask-Moment实现了moment.js中的format()、fromNow()、fromTime()、calendar()、valueOf()、unix()方法

  • base.html 引入:

    {% block scripts %}
    {{ super() }}
    {{ moment.include_moment() }}
    {% endblock %}
    
  • hello.py 引入:

    from datetime import datetime
    from flask import Flask, render_template
    from flask_bootstrap import Bootstrap
    from flask_moment import Moment
    
    app = Flask(__name__)
    
    bootstrap = Bootstrap(app)
    moment = Moment(app)
    
    @app.route('/')
    def index():
        return render_template('index.html',
                               current_time=datetime.utcnow())
    
  • index.html 渲染:

    • format('LLL')根据客户端电脑的时区和区域设置渲染日期和时间;L到LLL分别对应不同的复杂度
    • fromNow()渲染相对时间戳,随时间的推移自动刷新显示的时间:2 minutes ago
    <p>The local date and time is {{ moment(current_time).format('LLL') }}.</p>
    <p>That was {{ moment(current_time).fromNow(refresh=True) }}.</p>
    
    • 语言本地化:{{ moment.lang('es') }}

以上是关于Flask系列-模板的主要内容,如果未能解决你的问题,请参考以下文章

12_关于flask中的宏

Flask系列-模板

Flask 学习系列---Jinjia2 模板继承

flask中jinjia2模板引擎使用详解5

flask基础之app初始化

Python系列 Flask