Flask 模板结构
2022-08-03 09:57:03
127
{{single.collect_count}}

Flask 局部模板

     当多个独立模板中都会使用同一块HTML代码时,我们可以把这部分代码抽离出来,存储到局部模板中。这样一方面避免重复,另一方面也可以方便统一管理。比如多个页面中都要在页面顶部显示一个提示条,这个横幅可以定义在局部模板中。
  利用include标签来插入一个局部模板,这会把局部模板的全部内容插在使用include标签的位置。比如,在其他模板中,我们可以在任意位置使用下面的代码插入内容:

{%include '_banner.html' %}

为了和普通模板区分开,局部模板的命名通常以一个下划线开始。

Flask模板继承

     Jinja2的模板继承允许你定义一个基模块,把网页上的导航栏、页脚等通用内容放在基模板中,而每一个集成基模板的子模板在被渲染时都会自动包含这些部分。使用这种方式可以避免在多个模板中编写重复的代码

  1. 编写基模板
    基模板存储了程序页面的固定部分,通常被命名为base.html或layout.html。
    在这里插入图片描述
    当子模板集成基模板后,子模板会自动包含基模板的内容和结构。为了能够让子模板方便地覆盖或插入内容到基模板中,我们需要在基模板中定义块(block),在子模板中可以通过定义同名的块来执行继承操作。
      块的开始和结束分别使用block和endblock标签声明,而且块之间可以嵌套。在这个基模板中,我们创建了六个块:head、title、styles、content、footer和scripts,分别用来划分不同的代码。
  2. 编写子模板
    基模板中定义了HTML的基本结构,而且包含了页脚等固定信息,在子模板中不需要再定义这些内容,只需要对特定的块进行修改。子模板代码如下
{% extends 'base.html' %}{% block content %}<h1>Template</h1>……{% endblock %}

使用extends标签声明扩展基模板,它告诉模板引擎当前模板派生自base.html。extends必须是子模板的第一个标签。

  • 覆盖内容
    在子模板中直接定义,就会填充到基模板相应的位置,例如子模板定义title块,基模板的title块就失效了。
  • 追加内容
    如果想要向基模板中的块追加内容,需要使用jinja2提供的super()函数进行声明,这回向父块添加内容。比如,下面的示例向基模板中的styles块追加了一行
{% block styles %}{{ super() }}<style>.foo{color:red;}</style>{% endblock %}

当子模板被渲染时,它会继承基模板的所有内容,然后根据我们定义的块进行覆盖或追加操作。

感觉用继承模板后刷新页面要卡点,我用了加载3个echarts图的网页做试验,用局部模板做导航栏没有问题,用继承模板后刷新页面要稍微卡点。(找到原因了,我使用继承模板引入的是网站上的在线jquery.js,不卡的网页引用的是本地的jquery.js)

出处:
《Flask Web开发实战:入门、进阶与原理解析》_李辉
在这里插入图片描述

     不错的一本书,刚开始接触flask,通过这本书了解了很多flask基础知识。这本书共三个部分,第一部分基础篇,第二部实战篇(有5个实例可以研究),第三部分进阶篇。

回帖
全部回帖({{commentCount}})
{{item.user.nickname}} {{item.user.group_title}} {{item.friend_time}}
{{item.content}}
{{item.comment_content_show ? '取消' : '回复'}} 删除
回帖
{{reply.user.nickname}} {{reply.user.group_title}} {{reply.friend_time}}
{{reply.content}}
{{reply.comment_content_show ? '取消' : '回复'}} 删除
回帖
收起
没有更多啦~
{{commentLoading ? '加载中...' : '查看更多评论'}}