flask之页面布局
一、url_for
1.静态文件引入
{{ url_for('static',filename='文件路径') }}
<link rel="shortcut icon" href="{{ url_for('static',filename='base/images/logo.png') }}">
2.定义路由
{{ url_for('模块名.视图名'，变量=参数) }}
<a href="{{ url_for('home.user',page=1) }}">会员</a>
二、块block
1.admin.html 添加块
{% block 数据块名称 %} ...{% endblock %}
2.继承父模板
{% extends "admin/admin.html" %}
3.块覆盖的情况super
我们既不想不覆盖通用模板的内容，又想在其基础上，增加一些东西，这也是可以的。
<footer>
{% block footer %}
<p>Posted:Bikmin</p>
<p>Contact with:<a href="someone@example.com">someone@example.com</a> </p>
{% endblock %}
</footer>
如果我们不再自定义块，就会使用base.html通用模板的内容，效果如下
觉得这个模板还行，不想覆盖，还想在这个基础上再添加些东西，想要上面添加一条水平线作为分隔符，该怎么做呢
做法是，重新定义块，但是需要用到super()函数
{% block footer %}
<hr>
{{ super() }}
{% endblock %}
{{ super() }} 就表示了通用模板里的内容
三、 包含页
如果有一些HTML代码是经常用到的固定的，为了避免整个HTML文档看起来很拥挤，内容嘈杂。可以将这一部分的代码，保存为了一个HTML模板，然后要用的时候，再用
{% include 'includes/head.html' %}
四、宏macro
通过做成宏，可以将一些参数修改成我们想要的默认值，然后调用的时候就像函数一样调用，很方便。
# 定义宏 {% macro input(name,value='',type='text',size=20) %} <input type="{{ type }}" name="{{ name }}" value="{{ value }}" size="{{ size }}"/> {% endmacro %} # 宏的调用 {{ input('username') }} {{ input('password',type='password') }}
五、if判断
{% if not loop.first %}|{% endif %}
六、 for 循环
{% for label,link in links %}
{% if not loop.first %}|{% endif %}
<a href="{{ link }}">{{ label }}</a>
{% endfor %}
小项目实战
#Sample.py
# coding:utf-8 from flask import Flask,render_template,request,url_for app = Flask(__name__) @app.route('/') def home(): return render_template('home.html',title_name = 'welcome') @app.route('/service') def service(): return 'service' @app.route('/about') def about(): return 'about' @app.template_test('current_link') def is_current_link(link): return link == request.path if __name__ == '__main__': app.run(debug=True)
#home.html
{% extends 'base.html' %}
{% import '_macro.html' as ui %}
{% block title %}{{ title_name }}{% endblock %}
{% block content %}
{% set links = [
('home',url_for('.home')),
('service',url_for('.service')),
('about',url_for('.about')),
] %}
<nav>
{% for label,link in links %}
{% if not loop.first %}|{% endif %}
<a href="{% if link is current_link %}#
{% else %}
{{ link }}
{% endif %}
">{{ label }}</a>
{% endfor %}
</nav>
<p>{{ self.title() }}</p>
{{ ui.input('username') }}
{{ ui.input('password',type='password') }}
{% endblock content %}
{% block footer %}
<hr>
{{ super() }}
{% endblock %}
#base.html
<!DOCTYPE html> <html lang="en"> <head> {% block head %} {% include 'includes/_head.html' %} {% endblock %} </head> <body> <header>{% block header %}{% endblock %}</header> <div>{% block content %}<p>hello</p>{% endblock %}</div> {% for item in items %} <li>{% block loop_item scoped %}{{ item }}{% endblock %}</li> {% endfor %} <footer> {% block footer %} <p>Posted:Bikmin</p> <p>Contact with:<a href="someone@example.com">someone@example.com</a> </p> {% endblock %} </footer> </body> </html>
#_head.html
<meta charset="UTF-8"> <link href="{{ url_for('static',filename='site.css') }}" rel="stylesheet"> <title>{% block title %}{% endblock %}</title>
#macro
{# 定义宏 #}
{% macro input(name,value='',type='text',size=20) %}
<input type="{{ type }}"
name="{{ name }}"
value="{{ value }}"
size="{{ size }}"/>
{% endmacro %}
执行项目
