加载静态文件,父模板的继承和扩展
- 用url_for加载静态文件
- <script src="{{ url_for('static',filename='js/login.js') }}"></script>
- flask 从static文件夹开始寻找
- 可用于加载css, js, image文件
- 继承和扩展
- 把一些公共的代码放在父模板中，避免每个模板写同样的内容。base.html
- 子模板继承父模板
- {% extends 'base.html’ %}
- 父模板提前定义好子模板可以实现一些自己需求的位置及名称。block
- <title>{% block title %}{% endblock %}-MIS问答平台</title>
- {% block head %}{% endblock %}
- {% block main %}{% endblock %}
- 子模板中写代码实现自己的需求。block
- {% block title %}登录{% endblock %}
- 首页、登录页、注册页都按上述步骤改写。
父模板：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> {% block title %} {% endblock %} Home</title> <link rel="stylesheet" href="{{ url_for('static',filename='css/base css.css')}}"> <script src="{{ url_for('static',filename='js/base js.js') }}"></script> <base target="_blank" /> {% block head %} {% endblock %} </head> <body id="myBody"> <nav class="nav"> <ul> <li><a href="{{ url_for('home') }}"><img src="../static/images/D:\untitled10\static\images\ay-thumb.jpg">官网首页</a></li> <li><a href=""><img src="../static/images/D:\untitled10\static\images\12.jpg">游戏下载</a></li> <li><a href=""><img src="../static/images/D:\untitled10\static\images\34.jpg">游戏资讯</a></li> <li><a href=""><img src="../static/images/D:\untitled10\static\images\56.jpg">客服</a></li> <li><a href="{{ url_for('sign_in') }}"><img src="../static/images/b219ebc4b74543a96f1bc1d41d178a82b90114a1.jpg">登录</a></li> <li><a href="{{ url_for('sign_up') }}"><img src="../static/images/b219ebc4b74543a96f1bc1d41d178a82b90114a1.jpg">注册</a></li> <img id="on_off" onclick="mySwitch()" src="../static/images/bulbon.jpg" width="50px"> <button style="float: right;margin: 5px auto;border-radius: 5px;height: 30px" type="submit">搜索</button> <input style="float: right;margin: 5px auto;border-radius: 8px;width: 200px;height: 20px;" type="text" name="search"PLACEHOLDER="输入要搜索的内容"> </ul> </nav> {% block main %} {% endblock %} <div class="copyright"> <a href="">抵制不良游戏</a> <a href="">拒绝盗版游戏</a> <a href="">注意自我保护</a> <a href="">谨防受骗上当</a> <a href="">适度游戏益脑</a> <p>Copyright © 2017. Created by <a href="#" target="_blank">071</a></p> </div> </body> </html>
首页：
{% extends'base.html' %} {% block title %} Home {% endblock %} {% block head %} <link rel="stylesheet" href="{{ url_for('static',filename='css/shouye css.css')}}" type="text/css"> {% endblock %} {% block main %} <body> <div class="all"> <div class="pic"> <a href=""> <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1510070680095&di=d3cf459d5bce389863664ada351cce45&imgtype=jpg&src=http%3A%2F%2Fimg0.imgtn.bdimg.com%2Fit%2Fu%3D2359570068%2C2558894582%26fm%3D214%26gp%3D0.jpg"></a> <div class="wenzi1"><a href="">飞翼零式</a></div> </div> <div class="pic"> <a href=""> <img src="https://gss2.bdstatic.com/9fo3dSag_xI4khGkpoWK1HF6hhy/baike/w%3D268%3Bg%3D0/sign=3338b612b23533faf5b6942890e89a22/3c6d55fbb2fb431647c2456623a4462308f7d3c8.jpg"></a> <div class="wenzi2"><a href="">自由高达</a></div> </div> <div class="pic"> <a href=""> <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1510070817385&di=89436cb74cd23899275374a9c04cdba0&imgtype=0&src=http%3A%2F%2Fi1.hdslb.com%2Fbfs%2Farchive%2F645f98f910da9a9872088c985309566ce0af87bc.jpg"></a> <div class="wenzi3"><a href="">正义高达</a></div> </div> <div class="pic"> <a href=""> <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1510070779926&di=7276ba43d58fbb65efee930b973c659e&imgtype=0&src=http%3A%2F%2Fimg2081.poco.cn%2Fmypoco%2Fmyphoto%2F20110822%2F02%2F64108346201108220201501060672178394_025.jpg"></a> <div class="wenzi4"><a href="">死神高达</a></div> </div> </div> </body> {% endblock %} </html>
登录：
{% extends'base.html' %} {% block title %} Login {% endblock %} {% block head %} <script src="{{ url_for('static',filename='js/login js.js') }}"></script> <link rel="stylesheet" href="{{ url_for('static',filename='css/login css.css')}}"> <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> {% endblock %} {% block main %} <body> <div class="login"> <h1>Login</h1> <form class="form" method="post" action="#"> <p class="field"> <input id="uname" type="text" name="login" placeholder="用户名" required/> <i class="fa fa-user"></i> </p> <p class="field"> <input id="upass" type="password" name="password" placeholder="密码" required/> <i class="fa fa-lock"></i> </p> <p class="submit"><input type="button" name="sent" value="登录" onclick="myLogin()"></p> <div id="error_box"><br></div> </form> </div> </body> {% endblock %} </html>
注册：
{% extends'base.html' %} {% block title %} register {% endblock %} {% block head %} <link rel="stylesheet" href="{{ url_for('static',filename='css/register css.css')}}"> <script src="{{ url_for('static',filename='js/register js.js') }}"></script> {% endblock %} {% block main %} <body> <div class="login"> <h1>Register</h1> <form class="form" method="post" action="#"> <h3>请输入用户名:</h3> <input id="uname" type="text" name="login" placeholder="用户名" required/> <br> <h3>设置密码:</h3> <input id="upass1" type="password" name="password" placeholder="密码" required/> <br> <h3>重新输入密码:</h3> <input id="upass2" type="password" name="password" placeholder="再次输入密码" required/> <br> <h3>输入手机号码:</h3> <input id="unumber" type="text" name="login" placeholder="手机号码" required/> <p class="submit"><input type="button" name="sent" value="注册" onclick="myLogin()"></p> <div id="error_box"><br></div> </form> </div> <div class="copyright"> <p>Copyright © 2017. Created by <a href="#" target="_blank">071</a></p> </div> </body> {% endblock %} </html>
