模版继承和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. WMS工作原理

    图1:创建窗口 图2:通信过程 我们知道其实任何一个窗口的创建,最终都是会创建一个 ViewRootImpl对象.ViewRootImpl 是一很重要的类,类似 ActivityThread 负责跟A ...

  2. yum的使用与配置

    yum简介 yum,是Yellow dog Updater, Modified 的简称,是杜克大学为了提高RPM 软件包安装性而开发的一种软件包管理器.起初是由yellow dog 这一发行版的开发者 ...

  3. swagger如何测试List类型参数

    使用swagger 时,往往会用到类似下面这样的注解 @ApiImplicitParam(name = "id", value = "主键", dataType ...

  4. MT【276】正切的半角公式

    若$\Delta ABC$满足:$\tan\dfrac{A}{2}\cdot\tan\dfrac{C}{2}=\dfrac{1}{3},b=\dfrac{4}{3}a$,则$\sin B=$_____ ...

  5. 正睿 2019 省选附加赛 Day10

    A 核心就是一个公式 \[\sum_{i = 0}^{k} S(k, i) \tbinom{x}{i} i\] S是第二类斯特林数 递推公式 \(S_2(n,k)=S_2(n−1,k−1)+kS_2( ...

  6. C#解决方案生成工具

    实验环境  VS2017 C# .NET4.6 项目都是.net framework框架 目的: 用程序生成解决方案和项目. 思路:手动建一个方案和项目,分析其中的文件内容,做成模板后,由程序调用.最 ...

  7. [HNOI2010]物品调度

    题目描述 现在找工作不容易,Lostmonkey费了好大劲才得到fsk公司基层流水线操作员的职位.流水线上有n个位置,从0到n-1依次编号,一开始0号位置空,其它的位置i上有编号为i的盒子.Lostm ...

  8. 如何 通过 userAgent 区别微信小程序

    微信内置浏览器: 微信小程序: 有micromessenger是微信内置浏览器,有micromessenger和miniprogram的是微信小程序.  (ios不适用) if(navigator.u ...

  9. js 读取包含特殊字符的属性值

    在JS中对象的属性可以通过两种方式访问:object.property和object["property"]. 包含特殊字符的属性只能以此方式访问: object["pr ...

  10. react-native实现电影列表

    页面运行效果 代码: import React, { Component } from "react"; import { Image, FlatList, StyleSheet, ...