extends继承和block子模板接口实现

继承extends和子模板接口block定义
1、extends作用和语法
    *作用：可以把一个公共的代码放在父模板中，避免每个模板写同样的代码
    *语法：
        {% extends 'base.html' %}  #在子模板中写
2、block实现（在父模板中定义block接口，子模板中使用，并写出特色功能的代码）
    *作用：在子模板中，可以让子模板实现一些自己的需求，使用前需事先在父模板中定义好
    *注意点：子模板中的代码，必须放在block中

例子如下：

<!--base.html-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{% block title %}{% endblock %}</title>

    <!--css 样式写在head中，用<style>标签定义，可以定义标签的样式：包括长宽高、颜色、字体大小等-->
    <style>
        .nav{
            background: #3a3a3a;
            height: 65px;
        }
        ul{
            overflow: hidden;
        }
        ul li{
            float:left;
            list-style: none;
            padding: 0 10px;
            line-height: 65px;
        }
        ul li a{
            color: #fff;
        }
    </style>
{% block style %}{% endblock %}
</head>
<body>
    <div class="nav">
        <ul>
            <li>
                <a href="#">首页</a>
            </li>
            <li>
                <a href="#">发布问答</a>
            </li>
        </ul>
    </div>
    <h1>这是首页页面</h1>
{% block main %}{% endblock %}
{% block login %}{% endblock %}
</body>
</html>

<!--index.html--->

{% extends 'base.html' %}
{% block main %}
<h1>主页面</h1>
{% endblock %}
{% block title %}
     首页

{% endblock %}

{% extends 'base.html' %}
{% block login %}
<h1>登陆页面</h1>
{% endblock %}
{% block title %}
    登陆
{% endblock %}

####extends.py####

#encoding:utf-8
from flask import Flask,render_template

app = Flask(__name__)


@app.route('/') #指向首页的模板（也就是视图函数名对应的页面index.html）
def index():
    return render_template('index.html')
@app.route('/login/') #指向登陆页面的模板（也就是视图函数名对应的页面login.html）
def login():
    return render_template('login.html')

if __name__ == '__main__':
    app.run(debug=True)

extends继承和block子模板接口实现

猜你喜欢