加载静态文件,父模板的继承和扩展

Posted 2020-10-13 056林锋

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了加载静态文件,父模板的继承和扩展相关的知识，希望对你有一定的参考价值。

1.用url_for加载静态文件

    <script src="{{ url_for(‘static‘,filename=‘js/login.js‘) }}"></script>
    flask 从static文件夹开始寻找
    可用于加载css, js, image文件

2.继承和扩展

    把一些公共的代码放在父模板中，避免每个模板写同样的内容。base.html
    子模板继承父模板
          {% extends ‘base.html’ %}
    3.父模板提前定义好子模板可以实现一些自己需求的位置及名称。block
        <title>{% block title %}{% endblock %}-MIS问答平台</title>
        {% block head %}{% endblock %}
        {% block main %}{% endblock %}
   4. 子模板中写代码实现自己的需求。block
          {% block title %}登录{% endblock %}

首页、登录页、注册页都按上述步骤改写。

from flask import Flask,render_template

app = Flask(__name__)

@app.route(‘/‘)
def shouye():
    return render_template(‘base.html‘) #跳转首页
@app.route(‘/denglu/‘)
def gg():
    return render_template(‘denglu.html‘) #跳转登录
@app.route(‘/zhuche/‘)
def login():
    return render_template(‘zhuce.html‘)#跳转注册

@app.route(‘/tupian/‘)
def hh():
    return render_template(‘22c.html‘) #跳转图片库
if __name__ == ‘__main__‘:
    app.run(debug=True)

父模版
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Welcome to GZCC -- {% block head %}{% endblock %}</title>
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link type="text/css" rel="stylesheet" href="../static/css/Fumoban.css">
    <script type="text/javascript" src="{{ url_for(‘static‘,filename=‘js.muban.js‘) }}"></script>
</head>
<nav class="ti">
    <a href="" target="_blank"><img src="http://www.gzcc.cn/2016/images/footer1-logo.png" id="logo" alt="logo"></a>
    <a href="{{ url_for(‘he‘) }}">
    <button type="submit" class="ti">首页</button>
    </a>
    <a href="http://site.gzcc.cn/">
    <button type="submit" class="ti">信息学院</button>
    </a>
    <a href="http://sfl.gzcc.cn/">
        <button type="submit" class="ti">外国语学院</button>
    </a>
    <a href="http://sa.gzcc.cn/">
        <button type="submit" class="ti">会计学院</button>
    </a>
    <a href="http://st.gzcc.cn/">
        <button type="submit" class="ti">旅游学院</button>
    </a>
    <input type="text" placeholder="学院搜索">
    <a href="https://www.baidu.com/">
    <button type="submit" class="ti">搜索</button>
    </a>
    <a href="{{ url_for(‘ha‘) }}">
    <button type="submit" class="ti">登录</button>
    </a>
    <a href="{{ url_for(‘hi‘) }}">
    <button type="submit" class="ti">注册</button>
    </a>
</nav>
<body>
<div class="beijing">
<br><br><br><br><br><br><br><br>{% block main %}{% endblock %}<br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
<div>
    <div class="mg">
        <a href="http://www.gzcc.cn/"><img src="http://www.gzcc.cn/2016/images/yhdh/01.jpg"></a>
        <div id="dese"><a href=http://www.gzcc.cn/">学校荣誉</a></div>
    </div>
    <div class="mg">
        <a href="http://www.gzcc.cn/"><img src="http://www.gzcc.cn/2016/images/yhdh/02.jpg"></a>
        <div id="dese"><a href=http://www.gzcc.cn/">师生获奖</a></div>
    </div>
    <div class="mg">
        <a href="http://www.gzcc.cn/html/xueyuanrongyu/"><img src="http://www.gzcc.cn/2016/images/yhdh/03.jpg"></a>
        <div id="dese"><a href=http://www.gzcc.cn/html/xueyuanrongyu/">领导关怀</a></div>
    </div>
    <div class="mg">
        <a href="http://www.gzcc.cn/html/xueyuanrongyu/"><img src="http://www.gzcc.cn/2016/images/yhdh/08.jpg"></a>
        <div id="dese"><a href=http://www.gzcc.cn/html/xueyuanrongyu/">数字广商</a></div>
    </div>
    <div class="mg">
        <a href="http://www.gzcc.cn/html/xueyuanrongyu/"><img src="http://www.gzcc.cn/2016/images/yhdh/05.jpg"></a>
        <div id="dese"><a href=http://www.gzcc.cn/html/xueyuanrongyu/">画说校园</a></div>
    </div>
    <div class="mg">
        <a href="http://www.gzcc.cn/html/xueyuanrongyu/"><img src="http://www.gzcc.cn/2016/images/yhdh/06.jpg"></a>
        <div id="dese"><a href=http://www.gzcc.cn/html/xueyuanrongyu/">视频校园</a></div>
    </div>
    <div class="mg">
        <a href="http://www.gzcc.cn/html/xueyuanrongyu/"><img src="http://www.gzcc.cn/2016/images/yhdh/07.jpg"></a>
        <div id="dese"><a href=http://www.gzcc.cn/html/xueyuanrongyu/">全景校园</a></div>
    </div>
    <div class="mg">
        <a href="http://www.gzcc.cn/html/xueyuanrongyu/"><img src="http://www.gzcc.cn/2016/images/yhdh/04.jpg"></a>
        <div id="dese"><a href=http://www.gzcc.cn/html/xueyuanrongyu/">校友风采</a></div>
    </div>
</div>
</body>
</html

css
h2{
    align:center;
   }
.flex-container {
    display: -webkit-flex;
    display: flex;
    width: 300px;
    height: 150px;
    padding-left: 100px;
    padding-top: 30px;
    background-color: peachpuff;
    }
#input_box{
    align:center;
    margin:400px;
    padding-left:400px;
    }

#error_box{
    color: hotpink;
    }
body{ padding-right:500px; margin-top:100px; padding-left:500px; font-size:16px; padding-bottom:30px; padding-top:40px; font-family:verdana,Arial,Helvetica,sans-serif;
}

{% extends "base.html" %}

{% block title %}登陆{% endblock %}

{% block head %}
<link href="{{ url_for("static",filename="CSS/login_zhuce.css") }}" rel="stylesheet" type="text/css" charset="UTF-8">
<script src="{{ url_for("static",filename="JS/login_zhuce.js") }}"></script>
{% endblock %}

{% block main %}
<div class="center-block" id="loginbox">
    <div class="panel panel-primary" id="loginbox1_1">
        <div class="panel-heading">
            <h2 class="panel-title">登陆</h2>
        </div>
        <br>
        <form class="bs-example bs-example-form" role="form">
            <div class="input-group">
                <span class="input-group-addon"></span>
                <input type="text" class="form-control" id="id" placeholder="请输入用户名">
            </div>
            <br>
            <div class="input-group">
                <span class="input-group-addon"></span>
                <input type="password" class="form-control" id="password" placeholder="请输入密码">
            </div>
            <div id="error_box">
                <br>
            </div>
            <div class="checkbox">
                <label>
                    <input type="checkbox">记住我
                </label>
            </div>
            <br>
            <label><input type="button" class="btn btn-default" onclick="Login()" value="登陆"></input></label>
        </form>
    </div>
</div>
{% endblock %}


</html>

{% extends "base.html" %}
{% block title %}注册{% endblock %}

{% block head %}
    <link href="{{ url_for("static",filename="CSS/login_zhuce.css") }}" rel="stylesheet" type="text/css" charset="UTF-8">
    <script src="{{ url_for("static",filename="JS/login_zhuce.js") }}"></script>
{% endblock %}

{% block main %}
<div class="center-block" id="zhucebox">
    <div class="panel panel-primary" id="zhucebox1_1">
        <div class="panel-heading">
            <h2 class="panel-title">注册</h2>
        </div>
        <br>
        <form class="bs-example bs-example-form" role="form">
            <div class="input-group">
                <span class="input-group-addon"></span>
                <input type="text" class="form-control" id="zcid" placeholder="请输入用户名">
            </div>
            <br>
            <div class="input-group">
                <span class="input-group-addon"></span>
                <input type="password" class="form-control" id="zcpassword" placeholder="请设置密码">
            </div>
            <br>
            <div class="input-group">
                <span class="input-group-addon"></span>
                <input type="password" class="form-control" id="repassword" placeholder="请再次输入密码">
            </div>
            <div id="error_box1">
                <br>
            </div>
            <br>
            <label><input type="button" class="btn btn-default" value="注册" onclick="Zhuce()"></input></label>
        </form>
    </div>
</div>
{% endblock %}

以上是关于加载静态文件,父模板的继承和扩展的主要内容，如果未能解决你的问题，请参考以下文章

加载静态文件,父模板的继承和扩展