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

  1. 用url_for加载静态文件
    1. <script src="{{ url_for('static',filename='js/login.js') }}"></script>
    2. flask 从static文件夹开始寻找
    3. 可用于加载css, js, image文件
  2. 继承和扩展
    1. 把一些公共的代码放在父模板中，避免每个模板写同样的内容。base.html
    2. 子模板继承父模板
      1.   {% extends 'base.html’ %}
    3. 父模板提前定义好子模板可以实现一些自己需求的位置及名称。block
      1. <title>{% block title %}{% endblock %}-MIS问答平台</title>
      2. {% block head %}{% endblock %}
      3. {% block main %}{% endblock %}
    4. 子模板中写代码实现自己的需求。block
      1.   {% block title %}登录{% endblock %}

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

python:

from flask import Flask,render_template

app = Flask(__name__)

@app.route('/')
def base():
    return render_template('base.html')

@app.route('/login/')
def login():
    return render_template('login.html')

@app.route('/regist/')
def regist():
    return render_template('regist.html')

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

首页主模板

<!DOCTYPE HTML>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>{% block title %}首页{% endblock %}</title>
    <link href="{{ url_for('static',filename='css/base.css') }}" rel="stylesheet" type="text/css">
    <script src="{{ url_for('static',filename='js/base.js') }}"></script>
    {% block head %}{% endblock %}
</head>
<body id="mybody">
<nav class="bb">
    <div style="float: left;">
        <img src=" {{ url_for('static',filename='image/4.jpg') }}" weight="60" height="60">
    </div>
    <div style="line-height:480%;">
        <img id="on_off" src="{{ url_for('static',filename='image/light.jpg') }}" onclick="MySwitch()" width="30px" >
    </div>
    
    <div>
        <a href="{{ url_for('base') }}">主页</a>
        <a href="#">下载</a>
        <a href="#">查找</a>
        <a href="#">登录</a>
        <a href="#">注册</a>
        <a href="#">帮助</a>
    </div>

</nav>

<div class="search">
    <input type="search" name="search" style="height:20px;width:300px">
    <button type="submit" >搜索</button>
</div>

{% block main %}
<div class="img">
    <div>
        <a href="#"><img src="{{ url_for('static',filename='image/1.jpg') }}" width="230" height="230"></a>
    </div>
    <div>
        <a href="#"><img src="{{ url_for('static',filename='image/2.jpg') }}" width="230" height="230"></a>
    </div>
</div>
{% endblock %}

<footer class="foot">
    <p> Copyright@2013-14-520 个人版权，版权所有  telephone:520520 mobile phone:666</p>
</footer>
</body>
</html>
body {
    background-color: wheat;
    font-family: 'Candara';
    font-size: 100%;
    margin-top:40px;
    margin-left:100px;
    margin-right:100px;
    margin-bottom:50px;
    text-align: center;
}
.bb{
    background-color: white;
    height:60px;
    background: rgba(0, 0, 0, 0);
}
.img{
    float:right;
    line-height:350%;
    margin: 0 auto;
    color:black;
}

.play button{
    border: none;
    background: transparent;
    height: 20px;
}

.foot {
    font-size: 16px;
    font-weight: 400;
    font-family: Candara;
}

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册</title>
    <link href="../static/css/register.css" rel="stylesheet" type="text/css">
    <script src="../static/js/register.js"></script>
</head>
<body>

<div class="box">
    <h3> 忆之虾</h3>
        <h4></h4>

    <div class="input_box">
        <input id="uname" type="text" placeholder="请输入用户名" style="width:280px">

    </div>
    <div class="input_box">
        <input id="upass" type="password" placeholder="请输入密码" style="width:280px">
    </div>
    <div class="input_box">
        <input id="uupass" type="password" placeholder="请重复输入密码" style="width:280px">
    </div>
    <div class="input_box">
        <input id="nname" type="password" placeholder="请输入昵称" style="width:280px">
     </div>
    <br>
    <div id="error_box"><br></div>
    <div class="input_box">
        <button onclick="fnLogin()">注册</button><br>

    </div>
</div>
<script>
    window.alert("go!")
</script>

</body>
</html>
body{
    background: #fbfff8;
    padding-right:230px;
    padding-left:230px;
    color: rgba(255, 254, 222, 0.91);
    padding-top: 40px;
    font-size: 16px;
    background: #ffeee2;
    font-family:verdana,Arial,Helvetica,sans-serif;

}
h2{
    padding-left: 65px;
}
h3{
    padding-left: 120px;
}
.box{
     background-color: rgba(255, 209, 155, 0.87);
            text-align:center;
            font-family: "方正舒体";
            color:red;
            font-size:30px;
}
.input_box{
      background-color: rgba(255, 209, 155, 0.87);
            text-align:center;
            font-family: "宋体";
            color:white;
            font-size: 15px;
}

 

 

        

 

posted on 2017-11-08 20:12  076陈良舒  阅读(136)  评论(0)  编辑  收藏  举报