加载静态文件,父模板的继承和扩展
- 用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>欢迎</title> <link href="{{ url_for('static',filename='CSS/index.css') }}" rel="stylesheet"> <script src="{{ url_for('static',filename='JS/index.js') }}"></script> {% block head %} {% endblock %} </head> <body id="myBody"> <header> <nav> <ul> <li><a href="{{ url_for("index") }}" title="首页" target="_blank">首页</a></li> <input type="text"id="search" name="search"> <button id="button1"type="submit">搜索</button> <li><a href="{{ url_for("login") }}" title="登录" target="_blank">登录</a></li> <li><a href="{{ url_for("register") }}" title="注册" target="_blank">注册</a></li> <li><a href="#" title="退出" target="_blank">退出</a></li> <li><img id="myOnOff" onclick="mySwitch()" src="https://www.runoob.com/images/pic_bulbon.gif"height="30px" width="40px"></li>> </ul> </nav> </header> {% block main %} {% endblock %} </body> <div id="bottom"> Copyright@ 2017 个人版权,版权所有 </div> </html>
{% extends'index.html' %} {% block head %} <link href="{{ url_for('static',filename='CSS/design.css') }}" rel="stylesheet" type="text/css"> <script src="{{ url_for('static',filename='JS/confirm.js') }}"></script> {% endblock %} {% block main %} <div class="box" > <div class="jar" ><h2>欢迎登陆</h2></div> <div class="input_box"> 账号 <input id="name" type="text" placeholder="请输入用户名"></div><br> <div class="input_box"> 密码 <input id="password" type="password" placeholder="请输入密码"></div><br> <div id="error_box"><br></div> <div class="ja"> <button onclick="myLogin()" >登陆</button></div> </div> {% endblock %}
{% extends'index.html' %} {% block head %} <link href="{{ url_for('static',filename='CSS/designR.css') }}" rel="stylesheet" type="text/css"> <script src="{{ url_for('static',filename='JS/confirmR.js') }}"></script> {% endblock %} {% block main %} <div class="box" > <div class="jar" ><h2>欢迎注册</h2></div> <div class="input_box"> 账号 <input id="name" type="text" placeholder="请输入用户名"> </div><br> <div class="input_box"> 密码 <input id="password" type="password" placeholder="请输入密码"></div><br> <div class="input_box"> 再输入 <input id="passwordagain" type="password" placeholder="请再次输入密码"></div><br> <div id="error_box"><br></div> <div class="ja"> <button onclick="fnLogin()" >注册</button></div> </div> {% endblock %}
首页
登录
注册