flask中的html模板及调用

最新推荐文章于 2025-02-26 21:37:13 发布

Cedar_Guo

最新推荐文章于 2025-02-26 21:37:13 发布

阅读量3.1k

点赞数

分类专栏： python 文章标签： python html flask

本文链接：https://blog.csdn.net/weixin_43741711/article/details/114176848

版权

python 专栏收录该内容

9 篇文章

订阅专栏

本文介绍了Flask框架中HTML模板的使用。包括HTML模板中{{}}可存放动态内容，视图函数用render_template函数渲染模板，替换占位符。还阐述了模板中的条件、循环、继承语句，如条件控制、循环控制，以及通过基础模板和继承模板实现模板继承。

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

1、html模板

<html>
  <head>
    <title>{{title}} - microblog</title>
  </head>
  <body>
      <h1>Hello, {{user.nickname}}!</h1>
  </body>
</html>

{{}}中存放动态内容，可以从视图函数中传入。

2、视图函数中使用html模板

为了渲染模板，Flask框架提供了名为render_template的新函数，该函数需要传入模板名以及一些模板参数的变量列表，返回一个所有占位符都被传入的变量替换的字符串结构。用模板参数提供的相应值替换{{…}}

def index():
    user = { 'nickname': 'Miguel' } # 定义变量
    return render_template("index.html",
        title = 'Home',
        user = user)#传入模板名、模板变量列表

3、模板中的条件、循环、继承语句

3.1条件控制：

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

3.2循环控制：

<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>

3.3模板继承：

把所有模板公共的部分移除出页面的布局，把它们放在一个基础模板中，所有使用它的模板可以继承该基础模板。
基础模板：(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 控制语句来定义派生模板content可以插入的位置，
继承模板：（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 %}