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>


{% 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') }}
posted @ 2020-03-09 20:30  localhost_ha  阅读(347)  评论(0)  编辑  收藏  举报