Bootstrap

前端(Jinja2)

1. 什么是Jinja2模板引擎

python的Web开发中, 业务逻辑(实质就是视图函数的内容)和页面逻辑(html文件)分开的, 使得代码的可读性增强, 代码容易理解和维护;
模板渲染: 在html文件中,通过动态赋值,将重新翻译好的html文件(模板引擎生效) 返回给用户的过程。

2. 语法

2.1 Jinja2变量显示语法: {
  { 变量名 }}
	#  完整的过滤器查看位置: http://jinja.pocoo.org/docs/templates/#builtin-filters
	Jinja2变量内置过滤器:
	        safe            渲染值时不转义
	        capitalize      把值的首字母转换成大写,其他字母转换成小写
	        lower           把值转换成小写形式
	        upper           把值转换成大写形式
	        title           把值中每个单词的首字母都转换成大写
	        trim            把值的首尾空格去掉
	        striptags       渲染之前把值中所有的 HTML 标签都删掉
2.2 for循环:
    {% for i in li%}
    {% endfor %}
2.3 if语句:
    {% if user == 'westos'%}
    {% elif user == 'hello' %}
    {% else %}
    {% endif%}
2.4 宏的操作,相当于函数:
	{%  macro render(id) %}
	    <h1>hello world {
  { id }}</h1>
	{% endmacro %}
2.5 调用定义好的宏(类似于python中的函数):
	{
  { render(1) }}
	{
  { render(2) }}
	{
  { render(3) }}
2.6 include包含操作:
	{% include inclued.html"%}
2.7 模板的继承: 一般网站的导航栏和底部不会变化, 为了避免重复编写导航栏信息
	2.7.1 定义模板:
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>{% block title %}  {% endblock %}</title>
    </head>
    <body>
    <div style="width: 100px; height: 200px" > 这是导航栏</div>
    {% block body %}
    hello

    {% endblock %}

    <div style="width: 100px; height: 200px" >这是底部</div>
    </body>
    </html>
	2.7.2 继承模板:
		{% extends '06_base.html'%}

3. flask项目静态文件导入

<link href=&#
;