flask之页面布局

mac2022-06-30  21

一、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 %} 

执行项目

 

 

转载于:https://www.cnblogs.com/xiangjun555/articles/9396878.html

最新回复(0)