Flask模板继承深入理解与应用

目录
  • 什么叫模板继承呢
  • 模板页
  • 完整代码

什么叫模板继承呢

在我的理解就是：在前端页面中肯定有很多页面中有很多相同的地方，比如页面顶部的导航栏，底部的页脚等部分，这时候如果每一个页面都重写一遍，会很麻烦，而且也没必要。

这时候就可以做一个模板，叫做父模板，里面放上相同的部分，不同的部分先使用其他东西占位，然后在不同的页面中，继承这个父模板，不同的部分填充不同的内容。

模板页

首先做一个模板页面，模板是这样子的：

上下都是不变的东西，中间的部分是不同的，不同的页面继承这个模板页，然后在中间填充不同的内容。

导航栏的两个超链接：

<li><a href="/" rel="external nofollow"  rel="external nofollow"  >首页</a></li>
<li><a href="/about" rel="external nofollow"  rel="external nofollow"  >关于我们</a></li>

注意：这里的跳转路径是指定到某一个路由，不是某一个html页面。

相同部分的代码就是普通的html代码，只有需要填充的区域代码写法不同：

首先是标题title，其他页面需要继承模板页，所以模板页的标题不能写死，而是需要动态变化的，所以需要先用一个block占位：

写法是这样的，title标签中间的内容由一个block占着，这个block叫做title，名字可以随意，后面会根据名字选择block来填充。

<title>{% block title %}{% endblock %}</title>

然后是中间区域：

<div style="background-color:silver;height: 300px;width: 500px;margin: 10px">
不同的部分
<!--中间是不同的部分，用block先占着-->
{% block body %}
{% endblock %}
</div>

这里也有一个block，叫做body。注意：每一个block都需要一个{% endblock %}作为block的结束位置。

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--不同页面的标题不一样，所以需要占位符,里面的title是名称，可以随意-->
    <title>{% block title %}{% endblock %}</title>
</head>
<body>
<!--相同的部分,导航栏-->
<div style="background-color: beige;height: 200px;width: 300px">
    相同的导航栏
<ul>
    <li><a href="/" rel="external nofollow"  rel="external nofollow"  >首页</a></li>
    <li><a href="/about" rel="external nofollow"  rel="external nofollow"  >关于我们</a></li>
</ul>
</div>
<div style="background-color:silver;height: 300px;width: 500px;margin: 10px">
<p>不同的部分</p>
<!--中间是不同的部分，用block先占着-->
{% block body %}
{% endblock %}
</div>
<!--相同的部分，页脚-->
<div style="background-color: burlywood;height: 100px;width: 200px">
    <footer style="background-color: darkgray">相同的页脚部分</footer>
</div>
</body>
</html>

继承模板的页面：index.html

现在新建一个页面:index.html,它继承之前的模板页面：

由于是继承了父模板，所以首先要指定这个模板继承哪一个模板。{% extends '模板.html' %}，表示继承叫做模板.html的页面。然后分别指定不同的block中填充不同的内容。

<!--继承哪一个模板-->
{% extends '模板.html' %}
<!--指定不同的内容,指定叫做title的block中的内容-->
{% block title %}
    继承了模板页的 首页
{% endblock %}
<!--指定叫做body的block中的内容-->
{% block body %}
    <p>首页中的内容</p>
{% endblock %}

这个页面对应的路由是/,对应的视图函数是：

#根路径，渲染index.html页面
@app.route('/')
def index():
    return render_template('index.html')

继承模板的页面：about.html

首先about页面对应的路由时/about，对应的视图函数：

#/about路径，渲染about.html页面
teams = ['小明','小红','小刚']
@app.route('/about')
def about():
#以关键字参数的形式把teams传递到about.html页面中
    return render_template('about.html',teams = teams)

这里我们传递一个列表过去，在about.html页面中加载出来。

about.html

{% extends '模板.html' %}
{% block title %}
继承模板页的 about页面
{% endblock %}
{% block body %}
<p>about页面中的内容</p>
    <p>
        我们的团队成员有:
        {% for name in teams %}	#拿到传递的参数列表，遍历
            <li>{{ name }}</li>
        {% endfor %}
    </p>
{% endblock %}

对应的py文件：模板继承练习.py

from flask import  Flask,render_template
app = Flask(__name__,template_folder='../templates')
#根路径，渲染index.html页面
@app.route('/')
def index():
    return render_template('index.html')
#/about路径，渲染about.html页面
teams = ['小明','小红','小刚']
@app.route('/about')
def about():
    return render_template('about.html',teams = teams)
if __name__ == '__main__':
    app.run()

执行效果如下：

到此这篇关于Flask模板继承深入理解与应用的文章就介绍到这了,更多相关Flask模板继承内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • Flask框架模板继承实现方法分析

    本文实例讲述了Flask框架模板继承实现方法.分享给大家供大家参考,具体如下: 在模板中,可能会遇到以下情况: 多个模板具有完全相同的顶部和底部内容 多个模板中具有相同的模板代码内容,但是内容中部分值不一样 多个模板中具有完全相同的 html 代码块内容 像遇到这种情况,可以使用 JinJa2 模板中的 继承 来进行实现 模板继承是为了重用模板中的公共内容.一般Web开发中,继承主要使用在网站的顶部菜单.底部.这些内容可以定义在父模板中,子模板直接继承,而不需要重复书写. 标签定义的内容 {%

  • flask框架jinja2模板与模板继承实例分析

    本文实例讲述了flask框架jinja2模板与模板继承.分享给大家供大家参考,具体如下: jinja2模板 from werkzeug.contrib.cache import SimpleCache from flask import Flask, request, render_template,redirect,abort, url_for CACHE_TIME = 300 cache = SimpleCache() cache.timeout = CACHE_TIME app = Fla

  • Flask模板继承深入理解与应用

    目录 什么叫模板继承呢 模板页 完整代码 什么叫模板继承呢 在我的理解就是:在前端页面中肯定有很多页面中有很多相同的地方,比如页面顶部的导航栏,底部的页脚等部分,这时候如果每一个页面都重写一遍,会很麻烦,而且也没必要. 这时候就可以做一个模板,叫做父模板,里面放上相同的部分,不同的部分先使用其他东西占位,然后在不同的页面中,继承这个父模板,不同的部分填充不同的内容. 模板页 首先做一个模板页面,模板是这样子的: 上下都是不变的东西,中间的部分是不同的,不同的页面继承这个模板页,然后在中间填充不同

  • 解密ThinkPHP3.1.2版本之模板继承

    模板继承是ThinkPHP3.1.2版本添加的一项更加灵活的模板布局方式,模板继承不同于模板布局,甚至来说,应该在模板布局的上层.模板继承其实并不难理解,就好比类的继承一样,模板也可以定义一个基础模板(或者是布局),并且其中定义相关的区块(block),然后继承(extend)该基础模板的子模板中就可以对基础模板中定义的区块进行重载. 因此,模板继承的优势其实是设计基础模板中的区块(block)和子模板中替换这些区块. 每个区块由<block></block>标签组成,并且不支持b

  • Flask模板引擎之Jinja2语法介绍

    Jinja是组成Flask的模板引擎.可能你还不太了解它是干嘛的,但你对下面这些百分号和大括号肯定不陌生: {% block body %} <ul> {% for user in users %} <li><a href="{{ user.url }}" rel="external nofollow" >{{ user.username }}</a></li> {% endfor %} </ul&g

  • Laravel框架Blade模板简介及模板继承用法分析

    Laravel框架Blade模板简介及模板继承用法分析

    本文实例讲述了Laravel框架Blade模板及模板继承用法.分享给大家供大家参考,具体如下: 本章知识点主要如下: Blade模板简介 Blade模板继承使用 NO.1Blade模板简介 问: 什么是Blade模板? 答: Blade模板是Laravel提供一个既简单又强大的模板引擎: 和其他流行的PHP模板引擎不一样,他并不限制你在视图里使用原生PHP代码: 所有Blade视图页面都将被编译成原生的PHP代码并缓存起来,除非你的模板文件被修改,否则不会重新编译. 而这些都意味着Blade不会

  • Flask模板引擎Jinja2使用实例

    Flask提供的模板引擎为Jinja2,易于使用,功能强大. 模板仅仅是文本文件,它可以生成任何基于文本的格式(HTML.XML.CSV.LaTex 等等). 它并没有特定的扩展名, .html 或 .xml 都是可以的. 模板包含 变量 或 表达式 ,这两者在模板求值的时候会被替换为值.模板中还有标签,控制模板的逻辑. Jinja2文档:http://docs.jinkan.org/docs/jinja2/index.html 下面是一些使用实例,涉及模板继续.变量.赋值.循环.去空白.转义块

  • thinkphp模板继承实例简述

    本文实例讲述了thinkphp模板继承的实现方法.分享给大家供大家参考.具体实现方法如下: 模板的继承: 复制代码 代码如下: <block name='top'></block><!--这是父级模板--> <div style='border:1px solid gray;background:#abcdef;height:100px;'>广告部分</div> <block name='body'></block> &l

  • Django模板继承 extend标签实例代码详解

    在 views.py 上修改 ... def ordered(req): return render(req, "ordered.html") def shopping_car(req): return render(req, "shopping_car.html") 在 urls.py 上修改 ... path('ordered/', views.ordered), path('shopping_car/', views.shopping_car), ... 在

  • thinkphp5.1框架模板布局与模板继承用法分析

    本文实例讲述了thinkphp5.1框架模板布局与模板继承.分享给大家供大家参考,具体如下: 模板全局配置 配置文件template.php添加 //开启全局模板布局 'layout_on' => true, //全局模板布局文件名 'layout_name' => 'layout' 模板布局 控制器中新建模板文件(application\index\controller\Demo\---test方法) 新建视图文件(application\index\demo\test.html) 模板入口

随机推荐