二. Flask框架之Jinja2模板

Flask渲染Jinja模板

使用render_template()函数，如：render_template('about.html',**context)。**context为关键字参数。

@app.route('/about')
def about():
    context={
    
    
        'username':'123'
    }
    return render_template('about.html',**context)

过滤器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
{
   
   { username }}
{
   
   { username|length }}
<div>
    {
   
   { books|join("、")}}
</div>
</body>
</html>

过滤器官方文档：https://jinja.palletsprojects.com/en/3.0.x/templates/#list-of-builtin-filters

控制语句

if 语句

{% if kenny.sick %}
	Kenny is sick.
{% elif kenny.dead %}
	You killed Kenny!  You bastard!!!
{% else %}
	Kenny looks okay --- so far
{% endif %}

for 语句

普通遍历

<ul>
{% for user in users %}
<li>{
   
   { user.username|e }}</li>
{% endfor %}
</ul>

字典遍历

<dl>
{% for key, value in my_dict.iteritems() %}
	<dt>{
   
   { key|e }}</dt>
	<dd>{
   
   { value|e }}</dd>
{% endfor %}
</dl>

部分代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div>
        {% if age > 18 %}
            您已成年！
        {% elif age<18 %}
            您未成年！
        {% else %}
            您刚成年！
        {% endif %}
    </div>
    <div>
        {% for book in books %}
            {
   
   { book }}
        {% endfor %}
    </div>
    <div>
        {% for key,value in person.items() %}
            {
   
   { key }}:{
   
   { value }}
        {% endfor %}
    </div>
</body>
</html>

模板继承

Flask中的模板可以继承，通过继承可以把模板中许多重复出现的元素抽取出来，放在父模板中，并且父模板通过定义block给子模板开一个口，子模板根据需要，再实现这个block，假设现在有一个base.html这个父模板，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="base.css" />
    <title>{% block title %}{% endblock %}</title>
    {% block head %}{% endblock %}
</head>
<body>
    <div id="body">{% block body %}{% endblock %}</div>
    <div id="footer">
        {% block footer %}
        &copy; Copyright 2008 by <a href="http://domain.invalid/">you</a>
        {% endblock %}
    </div>
</body>
</html>

{% extends "base.html" %}
{% block title %}首页{% endblock %}
{% block head %}
    {
   
   { super() }}
    <style type="text/css">
        .detail{
      
      
            color: red;
        }
    </style>
{% endblock %}
{% block content %}
    <h1>这里是首页</h1>
    <p class="detail">
      首页的内容
    </p>
{% endblock %}

静态文件的配置

Web应用中会出现大量的静态文件来使得网页更加生动美观。类似于CSS样式文件、JavaScript脚本文件、图片文件、字体文件等静态资源。

在Jinja中加载静态文件非常简单，只需要通过 url_for 全局函数就可以实现，看以下代码：

<link href="{
     
     { url_for('static',filename='about.css') }}">

完整代码

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/control')
def control():
    context={
    
    
        'person':{
    
    'name':'hh','age':18},
        'books':['红楼梦', '三国演义'],
        'age':18
    }
    return render_template('control.html',**context)

@app.route('/')
def hello_world():
    return 'Hello World!'

@app.route('/about')
def about():
    context={
    
    
        'username':'123',
        'books' : ['红楼梦', '三国演义']
    }
    return render_template('about.html',**context)

if __name__ == '__main__':
    app.run()

【Flask框架】二. Flask框架之Jinja2模板

文章目录