模版继承和block的目的就是为了减少前端代码量

flask_ones.py

#encoding:utf-8

from flask import Flask,url_for,redirect,render_template

app = Flask(__name__)

@app.route('/')

def index():

    return render_template('index.html')

@app.route('/login/')

def login():

    return render_template('login.html')

if __name__ == '__main__':

    app.run(debug=True)

html文件

#################### index.html ##################

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .nav{

            background:rebeccapurple;

            height:65px;

        }

        ul{

            overflow: hidden;

        }

        ul li{

            float: left;

            list-style: none;

            padding:0 10px;

            line-height: 65px;

        }

        ul li a{

            color: white;

        }

    </style>

</head>

<body>

    <div class="nav">

        <ul>

            <li><a href="#">首页</a></li>

            <li><a href="#">发布问答</a></li>

        </ul>

    </div>

    <h1>这是index页面</h1>

</body>

</html>

#####################login.html###################

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>登陆页面</title>

    <style>

        .nav{

            background:rebeccapurple;

            height:65px;

        }

        ul{

            overflow: hidden;

        }

        ul li{

            float: left;

            list-style: none;

            padding:0 10px;

            line-height: 65px;

        }

        ul li a{

            color: white;

        }

    </style>

</head>

<body>

    <div class="nav">

        <ul>

            <li><a href="#">首页</a></li>

            <li><a href="#">发布问答</a></li>

        </ul>

    </div>
　　 <h1>这是login页面</h1>
</body>
</html>

对比index.html和login.html的代码发现，除了红色的代码部分，其余代码均一样，而如果有其他更多类似的页面，会加大代码的量，因此引出以下的模版继承和block

语法：

{% extends "base.html" %}

{% block name %}

    ....

{% endblock %}

所以以上代码简化为：

同级目录新建一个common.html，将相同的代码部分通过继承带进去，如下：

common.html(公共代码部分)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .nav{
            background:rebeccapurple;
            height:65px;
        }
        ul{
            overflow: hidden;
        }
        ul li{
            float: left;
            list-style: none;

            padding:0 10px;
            line-height: 65px;
        }

        ul li a{
            color: white;
        }
    </style>
</head>
<body>
    <div class="nav">
        <ul>
            <li><a href="#">首页</a></li>
            <li><a href="#">发布问答</a></li>
        </ul>
    </div>
    {% block main %}

    {% endblock %}

</body>
</html>

此时index.html和login.html代码为:

#index.html
{% extends "base.html" %}　　　　　　#代表继承base.html

{% block main %}　　　　　　　　　　　　　　　　#这里的main要与base.html里blcok的设定的名字相同　　

    <h1>这是index页面</h1>　　　　　　　　　　　#将这里的内容传到base.html的block下，并在本文件里应用

{% endblock %}

#login.html

{% extends "base.html" %}

{% block main %}

    <h1>这是登陆页面</h1>

{% endblock %}

flask模版继承和block的更多相关文章

  1. Django 模本(Template--for--csrf--if--filter--simple_tag模版继承等)

    前提 关于html寻找路线: template 如果在各个APP中存在, Django 会优先找全局template 文件下的html文件,如果全局下的template文件没有相关的html  Dja ...

  2. django系列4.1--模版系统,过滤器,标签,模版继承,组件

    django 模版系统 一. 语法 { { 变量 } } {% 表达式 %} 二. 变量 { {变量名} } 深度查询据点符( . )在模版语言中有特殊的含义. 当模版系统遇到点(.) 查询顺序如下: ...

  3. tornado 模版继承 函数和类的调用

    模版继承.函数和类的调用 目录结构 lesson5.py # -*- coding:utf-8 -*- import tornado.web import tornado.httpserver imp ...

  4. flask的继承和包含

    为了方便使用重复的页面,我们也可以使用继承模板.还有包含模板,一般使用包含,俩个都不是很好理解,我只是用完的理解简单介绍一下,他们的用法打不相同,却又有类似之处 我们访问页面的时候在最上边会有导航的信 ...

  5. Django学习路28_ .html 文件继承及<block 标签>,include 'xxx.html'

    在 templates 文件夹下创建 基类 base.html <!DOCTYPE html> <html lang="en"> <head> ...

  6. flask 模版语言及信息传递

    if语句 格式: {% if command %} {% elif %} {% else %} {% endif %} 代码示例 flask_one.py #encoding:utf-8 from f ...

  7. python测试开发django-7.django模板继承（block和extends）

    前言 打开一个网站时候,点导航栏切换到不同的页面,发现导航部分是不变的,只是页面的主体内容变了,于是就可以写个母模板,其它的子页面继承母模板就可以了. 母模板 可以在母模板中添加多个块标签,每个块标签 ...

  8. django学习-8.django模板继承（block和extends）

    1.前言 django模板继承的作用:模板可以用继承的方式来实现复用,减少冗余内容. 一般来说,一个网站里一般存在多个网页的头部和尾部内容都是一致的,我们就可以通过模板继承来实现复用. 父模板用于放置 ...

  9. 12.Yii2.0框架视图模版继承与模版相互调用

    目录 模板渲染的两种方式 加载视图 index.php 和 about.php 页面 建立控制器HomeController php 新建模板 home\index.php 新建模板home\abou ...

随机推荐

  1. python命令里运行正确但是pycharm里面运行就是报错的问题

    这两天在学习爬虫,第一步就是 import scrapy class StackOverflowSpider(scrapy.Spider): 结果一直报错,说是scrapy没有spider这个方法,各 ...

  2. workerman——配置小程序的wss协议

    前言 服务器: 阿里云服务器 | 需要在安全组放开443端口和workerman需要的端口 环境: oneinstack | lnmp oneinstack添加虚拟主机的时候选择第三个即可 | 这个添 ...

  3. Listview 包含 edittext 的解决方案

    转载:https://blog.csdn.net/qq_28268507/article/details/53666576 一. 前几天在群里聊天,碰到一个哥们问listview的itemview中包 ...

  4. POJ 3460 Booksort(算竞进阶习题)

    IDA* 这题真不会写..估价函数太巧妙了.. 按照lyd神牛的说法我们把a[i+1]=a[i]+1记为正确后继,反之则记为错误后继 那么考虑最优的一次交换区间,至多能够纠正三个错误后继,所以我们统计 ...

  5. Codeforces980 D. Perfect Groups

    传送门:>Here< 题目大意:先抛出了一个问题——“已知一个序列,将此序列中的元素划分成几组(不需要连续)使得每一组中的任意两个数的乘积都是完全平方数.特殊的,一个数可以为一组.先要求最 ...

  6. 【AGC014E】Blue and Red Tree 并查集 启发式合并

    题目描述 有一棵\(n\)个点的树,最开始所有边都是蓝边.每次你可以选择一条全是蓝边的路径,删掉其中一条,再把这两个端点之间连一条红边.再给你一棵树,这棵树的所有边都是红边,问你最终能不能把原来的树变 ...

  7. JXOI2017颜色

    题面 loj 分析 这道题非常妙啊 对于可保留区间[l, r] 枚举右端点r 考虑l的取值范围有两重约数 记颜色i出现的最右侧位置是\(max_i\) 最左侧位置是\(min_i\) r前最后一次出现 ...

  8. 【bfs】1252 走迷宫

    [题目描述] 一个迷宫由R行C列格子组成,有的格子里有障碍物,不能走:有的格子是空地,可以走. 给定一个迷宫,求从左上角走到右下角最少需要走多少步(数据保证一定能走到).只能在水平方向或垂直方向走,不 ...

  9. Nginx代理MysqlCluster集群

    -------Nginx代理MysqlCluster 公司有一个公网ip,有公网ip(222.222.222.222)那台服务器上装的nginx,mysql装在公司另外一台服务器上假设ip为192.1 ...

  10. Annihilate(SA)

    题目描述 黑暗之主的蜈蚣几乎可以毁灭一切,因此小正方形陷入了苦战…… 小正方形现在需要减弱黑暗之主的攻击. 一个黑暗之主的攻击可以用一个仅有小写字母的字符串表示. 现在黑暗之主向小正方形发动了若干攻击 ...