模版继承和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. JarvisOJ Misc 炫酷的战队logo

    欣赏过了实验室logo,有人觉得我们战队logo直接盗图比较丑,于是我就重新设计了一个,大家再欣赏下? 一开始拿到的BMP文件就打不开,用010打开发现文件头被抹去了,补上了BMP,与文件大小后,发现 ...

  2. JSON笔记

    JSPN示例1: { "firstName": "Brett", "lastName":"McLaughlin", &q ...

  3. Codeforces Round #423 Div. 1

    A:暴力赋值即可,并查集维护下一个未被赋值的位置. #include<iostream> #include<cstdio> #include<cmath> #inc ...

  4. ContOS7切换国内源

    ContOS更换国内下载源 一,什么是yum源? yum,是Yellow dog Updater, Modified 的简称,是杜克大学为了提高RPM 软件包安装性而开发的一种软件包管理器.起初是由y ...

  5. SpringBoot整合ssm

    1.创建工程 使用idea可以快速创建SpringBoot的工程 这里选择常用的类库,SpringBoot将各种框架类库都进行了封装,可以减少pom文件中的引用配置: 比如Spring和Mybatis ...

  6. python的if not用法

    python里的if not的用法: None,False,0,空列表[],空字典{},空元祖(),都相当于false print('not x 打印出来的结果',not x) x =[1] prin ...

  7. Python课程目录

    Python基础1 介绍.基本语法.流程控制 Python基础2 列表.字典.集合 Python基础3 基础3-函数

  8. 【XSY2472】string KMP 期望DP

    题目大意 给定一个由且仅由字符'H','T'构成的字符串\(S\). ​ 给定一个最初为空的字符串\(T\) ,每次随机地在\(T\)的末尾添加'H'或者'T'. 问当\(S\)为\(T\)的后缀时, ...

  9. bzoj 1051: [HAOI2006]受欢迎的牛 (Tarjan 缩点）

    链接:https://www.lydsy.com/JudgeOnline/problem.php?id=1051 思路: 首先用Tarjan把环缩成点,要想收到所有人的欢迎,那么这个点的出度必为0,且 ...

  10. ES6中箭头函数与普通函数this的区别

    普通函数中的this: 1. this总是代表它的直接调用者, 例如 obj.func ,那么func中的this就是obj 2.在默认情况(非严格模式下,未使用 'use strict'),没找到直 ...