Templates 2018-08-28

1. jinja2

Flask中使用jinja2模板引擎

jinja2是由Flask作者开发，模仿Django的模板引擎

优点：
速度快，被广泛使用
HTML设计和后端python分离
非常灵活，快速和安全
提供了控制，继承等高级功能

2. 模板语法

2.1 模板语法主要分为两种：变量和标签

模板中的变量：{{ var }}
视图传递给模板的数据
前面定义出来的数据
变量不存在，默认忽略

模板中的标签：{% tag %}
控制逻辑
使用外部表达式
宏定义

2.2 结构标签：

1. block:

{% block xxx %}
{% endblock %}

块操作
父模板挖坑，子模板填坑

2. extends :
   {% extends ‘xxx.html’ %}
   继承以后保留块中的内容
   {{ super() }}
   挖坑继承体现的化整为零的操作
3. macro:

{% macro hello(name) %}
 {{ name }}
{% endmacro %}

宏定义，可以在模板中定义函数，在其他地方调用
宏定义可导入
{% from 'xxx' import xxx %}
例子1：
在index.html中定义macro标签，定义一个方法，然后去调用方法，结果是展示商品的id和商品名称

{% macro show_goods(id, name) %}
 商品id：{{ id }}
 商品名称：{{ name }}
{% endmacro %}

{{ show_goods('1', '娃哈哈') }}
<br>
{{ show_goods('2', '雪碧') }}

例子2：
在index.html页面中定义一个say()方法，然后解析该方法：

{% macro say() %}
 <h3>今天天气气温回升</h3>
 <h3>适合去游泳</h3>
 <h3>适合去郊游</h3>
{% endmacro %}

{{ say() }}

例子3：
定义一个function.html中定义一个方法：

{% macro create_user(name) %}
 创建了一个用户:{{ name }}
{% endmacro %}

在index.html中引入function.html中定义的方法

{% from 'functions.html' import create_user %}

{{ create_user('小花') }}`

2.3 循环

{% for item in cols %}
    {% if <conditional statement > :%}
        aa
    {% else %}
        bb
    {% endif %}
{% endfor %}

也可以获取循环信息loop
loop.first
loop.last
loop.index
loop.revindex

例子:
在视图中定义一个视图函数：

@stu.route('/scores/')
def scores():

    scores_list = [21,34,32,67,89,43,22,13]

    content_h2 = '<h2>今天你们真帅</h2>'
    content_h3 = '   <h3>今天你们真帅</h3>   '

    return render_template('scores.html',
                           scores=scores_list,
                           content_h2=content_h2,
                           content_h3=content_h3)

(该视图函数，在下面讲解的过滤器中任然使用其返回的content_h2等参数)

首先: 在页面中进行解析scores的列表。题目要求：第一个成绩展示为红色，最后一个成绩展示为绿色，其他的不变

 {% for score in scores %}
        {% if loop.first %}
            <li style="color:red;">{{ loop.revindex }}:{{ loop.index }}:{{ score }}</li>
        {% elif loop.last %}
            <li style="color:green;">{{ loop.revindex }}:{{ loop.index }}:{{ score }}</li>
        {% else %}
            <li> {{ loop.revindex }}:{{ loop.index }}:{{ score }}</li>
        {% endif %}
{% endfor %}
</ul>

2.4 过滤器

过滤器资料链接
语法：
{{ 变量|过滤器|过滤器... }}

capitalize	单词首字母大写
lower	单词变为小写
upper	单词变为大写
title
trim	去掉字符串的前后的空格
reverse	单词反转
format
striptags	渲染之前，将值中标签去掉
safe	讲样式渲染到页面中
default
last	最后一个字母
first
length
sum
sort

例子：

<ul>
    <li>{{ content_h2 }}</li>
    <li>{{ content_h2|safe }}</li>
    <li>{{ content_h2|striptags }}</li>

    <li>{{ content_h3 }}</li>
    <li>{{ content_h3|length }}</li>
    <li>{{ content_h3|trim|safe }}</li>
    <li>{{ content_h3|trim|length }}</li>
</ul>

---

过滤器
过滤器通过管道符号“|”与变量连接，并且可以通过圆括号传递参数。

过滤器	说明
abs(number)	将被转换的变量转换为绝对值形成
attr(object,name)	获得被转换的变量的指定属性 account attr('name')与account["name"]同效果
capitalize(s)	将字符串的第一个字符转换为大写，之后的小写
center(value,width=80)	接受一个字符串，将其置于80的长度中并居中，不足的字符使用空格填充
default(value,default_name="u",boolean=False)	返回value指定的变量值，比如value是未定义的，则返回default_value指定的值，如果在value被指定为False时，也想用default_value替换，需要设置为Ture
dictsort(value,case_sensitive=False,by='key')	value为要遍历的字典，case_sensitive指示是否立即加载，设置为False表示延迟加载，by表示以什么方式排序，默认以key键排序，也可以设置by=‘key’来以值排序
escape(string)	把字符串的HTML特殊字符，转换为HTML表达方式
filesizeformat(value,binary=False)	接受一个数值，返回让人容易阅读的形式，比如10KB，1.3MB，如果打开binary，显示以Mebi,Gibi形式展示
first(sequence)	返回序列的第一个元素
float(value,default=0.0)	将接受的value转换为float类型，如果转换失败则返回指定的default值
forcesscape(value)	强制进行HTML转码，不检查要转码的字符串是否被标记为安全
format(value,*attribute)	字符串格式化转化
groupby(value,attribute)	按照指定的共有属性将集合进行分组，返回元祖组成的列表
indent(string,width=4,indentfirst=False)	将接受的string每行缩进width指定的字符数，indentfirst用来指定首行是否缩进
int(value,default=0)	将接受的value转换成int型，如果转换失败了，则返回default指定的值
join(value,d='u')	接受一个序列类型的对象，返回用d指定的字符将所有序列元素连接在一起的字符串结果
last(seq)	返回指定序列的最后一个元素
length(obj)	返回序列或者字典的项数
lower(string)	将接受的字符串转换为小写形式
pprint(value,verbose=False)	漂亮地打印一个变量的值，多用于调试，verbose是否显示冗长的信息
random(seq)	接受一个序列对象，随机返回其中一个元素
replace(string old,new, count=None)	接受一个字符串，将其中old表示的子串替换成new指定的子串，count是指定替换次数，不指定则替换一次
reverse(value)	接受一个可迭代的对象，返回逆序的迭代器
round(value,precision = 0,method='common')	舍去运算，接受一个值，percision表示精度，common，ceil,floor分别为四舍五入，进位，舍去
safe(value)	标记传入的value值是安全的，使用escape转码时不会进行二次转码
slice(value,slices,fill_width=None)	切片，接受一个可迭代的对象，不足slices个则使用fill_width指定的对象进行填充
sort(value,reverse=False,case_sensitive=False,attribute=None)	对可迭代的变量进行排序。默认情况下以升序，大小写不敏感的方式进行，如果变量本身包含属性，通过attribute参数按变量中属性排序
string(object)	变成字符串类型
striptags(value)	去除SGML,XML标签
sum(iterable,attribute=None,start=0)	对可迭代变量进行求和，如果包含属性，可以设置attribute参数
title(s)	将字符串转换为以标题形式显示
trim(value)	去除字符串的前导和续尾空格
truncate(s,length=255,killwords=False,end='...')	将字符串转换为简略形式，length截取长度，killWord设置是否保持单词完整性，end为简略写法后缀
upper(s)	将字符串转换为大写
wordcount(s)	计算字符串个数
wordwrap(s,width=79,break_long_words=True,wrapstring=None)	将字符串按参数中的值进行分行处理

---

3. 定义模板

3.1 定义基础模板base.html

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>
 {% block title %}
 {% endblock %}
 </title>
 <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
​
 {% block extCSS %}
 {% endblock %}
</head>
<body>
​
{% block header %}
{% endblock %}
​
{% block content%}
{% endblock %}
​
{% block footer%}
{% endblock %}
​
{% block extJS %}
{% endblock %}
​
</body>
</html>

3.2 定义基础模板base_main.html

{% extends 'base.html' %}

{% block extCSS %}
    <link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">
{% endblock %}

4. 静态文件信息配置

1. Django：
   第一种方式：
   {% load static %}
<link rel="stylesheet" href="{% static 'css/index.css' %}">
   第二种方式：
   <link rel="stylesheet" href="/static/css/index.css">

2. Flask：
   第一种方式：
   {% load static %}
<link rel="stylesheet" href="/static/css/index.css">
   第二种方式：
   <link rel="stylesheet" href="{{ url_for('static', filename='css/index.css') }}">