【Flask学习笔记二】使用模板.html

最新推荐文章于 2025-06-24 22:21:12 发布

rainie1003

最新推荐文章于 2025-06-24 22:21:12 发布

阅读量697

点赞数

CC 4.0 BY-SA版权

分类专栏： Flask

本文链接：https://blog.youkuaiyun.com/xykimred/article/details/92842566

Flask 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了Flask框架中如何使用模板，包括示例模板、在视图文件中引入模板、模板中的控制结构（if、for）、模板继承以及过滤器的使用方法，详细解释了如何通过模板继承实现页面共用导航栏并利用block进行内容插入。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

变量代码快{{}}
控制代码块{%%}

示例模板

<!-- app/templates/index.html-->
<html>
  <head>
    <title>{{title}} - microblog</title>
  </head>
  <body>
      <h1>Hello, {{user.nickname}}!</h1>
      {{user['nickname']}}<br>
      {{my_list.2}}<br>
  </body>
</html>

动态内容在 {{ … }} 中。

更改视图文件使用模板

# app/views.py
from flask import render_template  # 调用这个可以返回模板
from app import app

@app.route('/')
@app.route('/index')
def index():
    user = { 'nickname': 'Miguel' } # fake user
    my_list = [1,3,5,7,9]
    return render_template("index.html",
        title = 'Home',   # 动态传入
        user = user #字典
        my_list = my_list)  # 列表

模板中的控制if语句

<!-- app/templates/index.html-->
<html>
  <head>
    {% if title %}
    <title>{{title}} - microblog</title>
    {% else %}
    <title>Welcome to microblog</title>
    {% endif %}
  </head>
  <body>
      <h1>Hello, {{user.nickname}}!</h1>
  </body>
</html>

模板中的循环for语句

<!-- app/templates/index.html-->
<html>
  <head>
    {% if title %}
    <title>{{title}} - microblog</title>
    {% else %}
    <title>microblog</title>
    {% endif %}
  </head>
  <body>
    <h1>Hi, {{user.nickname}}!</h1>
    {% for post in posts %}
    <p>{{post.author.nickname}} says: <b>{{post.body}}</b></p>
    {% endfor %}
  </body>
</html>

# app/views.py
from flask import render_template
from app import app

@app.route('/')
@app.route('/index')
def index():
    user = { 'nickname': 'Miguel' } # fake user
    posts = [ # fake array of posts
        {
            'author': { 'nickname': 'John' },
            'body': 'Beautiful day in Portland!'
        },
        {
            'author': { 'nickname': 'Susan' },
            'body': 'The Avengers movie was so cool!'
        }
    ]
    return render_template("index.html",
        title = 'Home',
        user = user,
        posts = posts)

模板继承

问题：每一个模板都需要同样的导航栏。
解决：创建基础模板，使用它的模板都可以导入该模板。

<!--app/templates/base.html-->
<html>
  <head>
    {% if title %}
    <title>{{title}} - microblog</title>
    {% else %}
    <title>microblog</title>
    {% endif %}
  </head>
  <body>
    <div>Microblog: <a href="/index">Home</a></div>
    <hr>
    {% block content %}{% endblock %}
  </body>
</html>

使用 block 控制语句来定义派生模板可以插入的地方。块被赋予唯一的名字。
在index.html中插入以下代码。

{% extends "base.html" %}
{% block content %}
<h1>Hi, {{user.nickname}}!</h1>
{% for post in posts %}
<div><p>{{post.author.nickname}} says: <b>{{post.body}}</b></p></div>
{% endfor %}
{% endblock %}

过滤器

使用方法：变量名 | 过滤器

<!-- app/templates/index.html-->
{{url_str | upper}} <!--字符串变为大写-->
{{url_str | reverse}} <!--字符串反转-->
{{url_str | upper | reverse}}<!--可以堆叠使用-->