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

用url_for加载静态文件
1. <script src="{{ url_for('static',filename='js/login.js') }}"></script>
2. flask 从static文件夹开始寻找
3. 可用于加载css, js, image文件
继承和扩展
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;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="280px">

    </div>
    <div class="input_box">
        <input id="upass" type="password" placeholder="请输入密码" style="280px">
    </div>
    <div class="input_box">
        <input id="uupass" type="password" placeholder="请重复输入密码" style="280px">
    </div>
    <div class="input_box">
        <input id="nname" type="password" placeholder="请输入昵称" style="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;
}

相关阅读:
[Python] 项目的配置覆盖与合并
 [PHP] dompdf 使用记录
 Ubuntu16.04 desktop 设置共享文件夹 -- 图形界面配置
 （转）你不得不看的六篇知识图谱落地好文
 转 python2 与 python3 的编码
 (转) C#使用ODP.NET（Oracle.ManagedDataAccess.dll）操作Oracle数据库
 django & celery
(转) 解决django项目部署到nginx+uwsgi服务器后 admin页面样式消失的问题
 Ubuntu 16.04 安装 SVN-Client (RaabitVCS)
python 2.7
原文地址：https://www.cnblogs.com/1244581939cls/p/7800197.html