加载静态文件,父模板的继承和扩展
- 用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>index</title> <link rel="stylesheet" type="text/css" href="../static/css/index.css"> <script src="../static/js/index.js"></script> {% block head %} {% endblock %} </head> <body id="myBody"> <img id="on_off" onclick="mySwitch()" src="../static/image/day.PNG" width="50px"> <div id="nav-main" style="zoom: 1.1125;"> <div id="search" > <div id="searchout"> <div id="search_type" > <div class="search_top_type" type="show"><a href="{{ url_for("home")}}" >首页</a></div> <div class="search_top_type" type="news"><a href="{{ url_for("login")}}" >登录</a></div> <div class="search_top_type" type="video"><a href="{{ url_for("signin")}}" >注册</a></div> <div class="search_top_type" type="music"><a href="">设置</a></div> </div> </div> </div> </div> </div> {% block main %} {% endblock %} </body> </html>
首页
{% extends'index.html' %} {% block head %} <link rel="stylesheet" href="{{ url_for('static',filename='css/home.css')}}" type="text/css"> {% endblock %} {% block main %} <body id="myBody"> <div id="nav-main" style="zoom: 1.1125;"> <div id="search" > <div id="searchout"> <div id="search_type" ></div> <div id="searchform"> <div id="search_option" > </div> <input type="text" id="search_input" name="search"> <div id="searchbutton"></div> </div> </div> </div> </div> </div> {% endblock %} </body> </html>
登录
{% extends'index.html' %} {% block head %} <link rel="stylesheet" href="{{ url_for('static',filename='css/logsign.css')}}" type="text/css"> <script src="{{ url_for('static',filename='js/login.js') }}"></script> {% endblock %} {% block main %} <body> <div class="pen-title"> <h1>登 录</h1> </div> <div class="from"> <h2>请登录您的账号</h2> <div class="input_box"> <input id="uname" type="text" placeholder="请输入用户名"> </div> <br> <div class="input_box"> <input id="upass" type="password" placeholder="请输入密码"> </div> <div id="error_box"><br></div> <div class="login_box"> <button onclick="fnLogin()">登录</button> </div> </div> {% endblock %} </body> </html>
注册
{% extends'index.html' %} {% block head %} <link rel="stylesheet" href="{{ url_for('static',filename='css/logsign.css')}}" type="text/css"> <script src="{{ url_for('static',filename='js/signin.js') }}"></script> {% endblock %} {% block main %} <body> <div class="pen-title"> <h1>注 册</h1> </div> <div class="from"> <h2>请进行注册</h2> <div class="input_box"> <input id="uname" type="text" placeholder="请设置您的用户名"> </div> <br> <div class="input_box"> <input id="upass" type="password" placeholder="请输入密码"> </div> <div class="input_box"> <input id="aupass" type="password" placeholder="请再次输入密码"> </div> <div id="error_box"><br></div> <div class="login_box"> <button onclick="fnLogin()">注册</button> </div> </div> {% endblock %} </body> </html>
