模版继承和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. POJ 3264-Balanced Lineup-RMQ问题

    裸RMQ问题 #include <cstdio> #include <algorithm> #include <cstring> using namespace s ...

  2. CF1106F Lunar New Year and a Recursive Sequence

    题目链接:CF1106F Lunar New Year and a Recursive Sequence 大意:已知\(f_1,f_2,\cdots,f_{k-1}\)和\(b_1,b_2,\cdot ...

  3. LOJ2557. 「CTSC2018」组合数问题

    LOJ2557. 「CTSC2018」组合数问题 这道题是我第一道自己做完的题答题.考场上面我只拿了41分,完全没有经验.现在才发现其实掌握了大概的思路还是不难. 首先模拟退火,通过了1,2,6,9, ...

  4. 【题解】 bzoj3693: 圆桌会议 （线段树+霍尔定理）

    bzoj3693 Solution: 显然我们可以把人和位置抽象成点,就成了一个二分图,然后就可以用霍尔定理判断是否能有解 一开始我随便YY了一个\(check\)的方法:就是每次向后一组,我们就把那 ...

  5. 自学Linux命令行与Shell脚本之路

    自学Linux命令行与Shell脚本之路[第一回]:初识Linux   1.1 自学Linux Shell1.1-Linux初识 1.2 自学Linux Shell1.2-Linux目录结构 1.3  ...

  6. 跨SQL注入

    概念 SQL Injection按照字面意思来翻译就是"SQL注射",常被叫做"SQL注入",它的含义就是利用某些数据库的外部接口把用户数据插入到实际数据库操作 ...

  7. ajaxmin.exe 命令参数

    这个工具用来压缩JS和CSS文件的,可去掉多余空格,换行,还修改函数名变得难以读取等. 下载这工具,下载之后是一个.msi文件可以安装.安装之后在命令行里操作即可 (下载地址和文档) http://a ...

  8. 「JLOI2015」管道连接 解题报告

    「JLOI2015」管道连接 先按照斯坦纳树求一个 然后合并成斯坦纳森林 直接枚举树的集合再dp一下就好了 Code: #include <cstdio> #include <cct ...

  9. [SCOI2015]国旗计划[Wf2014]Surveillance

    [SCOI2015]国旗计划 A国正在开展一项伟大的计划——国旗计划.这项计划的内容是边防战士手举国旗环绕边境线奔袭一圈.这 项计划需要多名边防战士以接力的形式共同完成,为此,国土安全局已经挑选了N名 ...

  10. 牛客练习赛28 E迎风舞 （三分查找）

    链接:https://www.nowcoder.com/acm/contest/200/E来源:牛客网 时间限制:C/C++ 1秒,其他语言2秒 空间限制:C/C++ 262144K,其他语言5242 ...