美文网首页
Templates 2018-08-28

Templates 2018-08-28

作者: 十二右 | 来源:发表于2018-08-28 19:19 被阅读0次

1. jinja2

Flask中使用jinja2模板引擎

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

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

2. 模板语法

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

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

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

2.2 结构标签:

  1. block:
{% block xxx %}
{% endblock %}

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

  1. extends :
    {% extends ‘xxx.html’ %}
    继承以后保留块中的内容
    {{ super() }}
    挖坑继承体现的化整为零的操作
  2. 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') }}">

相关文章

网友评论

      本文标题:Templates 2018-08-28

      本文链接:https://www.haomeiwen.com/subject/psyqwftx.html