模版继承和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. 使用Guava获取某一个类的指定超类上的泛型Type T

    package com.geostar.gfstack.operationcenter.log.common.hibernate; import com.geostar.gfstack.operati ...

  2. Docker自制CentOS镜像

    系统环境:CentOS 7.3 将yum源切换到阿里源 可以直接写成一个脚本 #!/bin/sh mv /etc/yum.repos.d/CentOS-Base.repo /etc/yum.repos ...

  3. DRF 解析器和渲染器

    一,DRF 解析器 根据请求头 content-type 选择对应的解析器就请求体内容进行处理. 1. 仅处理请求头content-type为application/json的请求体 from dja ...

  4. springboot使用redis

    1.pom文件中引入 spring-boot-starter-redis <dependency> <groupId>org.springframework.boot</ ...

  5. windows查看进程占用并强制结束进程

    打开命令提示符(CMD) 查看8080端口被哪个进程占用了,命令:netstat   -ano|findstr 8080 上面的8080端口的PID是30160,可以根据PID可以杀死这个进程,用下面 ...

  6. Codeforces555 B. Case of Fugitive

    Codeforces题号:#310B 出处: Codeforces 主要算法:贪心+优先队列 难度:4.6 思路分析: 这道题乍一看没有思路…… 考虑贪心的做法.首先预处理出每两座相邻的桥之间边界相差 ...

  7. 用keras实现基本的回归问题

    数据集介绍 共有506个样本,拆分为404个训练样本和102个测试样本 该数据集包含 13 个不同的特征: 人均犯罪率. 占地面积超过 25000 平方英尺的住宅用地所占的比例. 非零售商业用地所占的 ...

  8. Tarjan求无向图割点、桥详解

    tarjan算法--求无向图的割点和桥   一.基本概念 1.桥:是存在于无向图中的这样的一条边,如果去掉这一条边,那么整张无向图会分为两部分,这样的一条边称为桥无向连通图中,如果删除某边后,图变成不 ...

  9. [ZJOI2016]大森林(LCT)

    题目描述 小Y家里有一个大森林,里面有n棵树,编号从1到n.一开始这些树都只是树苗,只有一个节点,标号为1.这些树都有一个特殊的节点,我们称之为生长节点,这些节点有生长出子节点的能力. 小Y掌握了一种 ...

  10. [APIO/CTSC 2007]数据备份（贪心+堆）

    你在一家 IT 公司为大型写字楼或办公楼(offices)的计算机数据做备份.然而数据备份的工作是枯燥乏味的,因此你想设计一个系统让不同的办公楼彼此之间互相备份,而你则坐在家中尽享计算机游戏的乐趣. ...