- 用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 rel="stylesheet" href="../static/css/base.css" type="text/css"> <script src="../static/js/base.js"></script> <base target="_blank" /> </head> <body id="myBody"> <nav class="nav"> <ul> <li><a href="{{ url_for('index') }}"><img src="../static/images/shouye.jpg">首页</a></li> <li><a href="{{ url_for('sign_in') }}"><img src="../static/images/denglu.jpg">登录</a></li> <li><a href="{{ url_for('sign_up') }}"><img src="../static/images/zhuce.jpg">注册</a></li> <img id="on_off" onclick="mySwitch()" src="../static/images/pic_bulbon.gif" 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; 200px;height: 20px;" type="text" name="search"PLACEHOLDER="输入要搜索的内容"> </ul> </nav> <div id="bottom"> <a href="">联系我们</a> <a href="">加入我们</a> <a href="">合作伙伴</a> </div> <div class="copyright"> <p>Copyright © 2017. Created by <a href="#" target="_blank">ben</a></p> </div> </body> </html>
首页：
{% extends'base.html' %} {% block title %} Home {% endblock %} {% block head %} <link rel="stylesheet" href="{{ url_for('static',filename='css/index.css')}}" type="text/css"> {% endblock %} {% block main %} <body> <div class="all"> <div class="pic"> <a href=""> <img src="http://pal4.roogames.com/pal4/pal4index_files/pic/pic_d_22.jpg"></a> <div class="ziying"><a href="https://baike.baidu.com/item/%E6%85%95%E5%AE%B9%E7%B4%AB%E8%8B%B1/3622704?fr=aladdin">慕容紫英</a></div> </div> <div class="pic"> <a href=""> <img src="http://pal4.roogames.com/pal4/pal4index_files/pic/pic_d_23.jpg"></a> <div class="tianhe"><a href="https://baike.baidu.com/item/%E4%BA%91%E5%A4%A9%E6%B2%B3/11894?fr=aladdin&fromid=9077568&fromtitle=%E5%A4%A9%E6%B2%B3">云天河</a></div> </div> <div class="pic"> <a href=""> <img src="http://pal4.roogames.com/pal4/pal4index_files/pic/pic_24.jpg"></a> <div class="mengli"><a href="https://baike.baidu.com/item/%E6%9F%B3%E6%A2%A6%E7%92%83/3622691?fr=aladdin">柳梦璃</a></div> </div> <div class="pic"> <a href=""> <img src="http://pal4.roogames.com/pal4/pal4index_files/pic/pic_03.jpg"></a> <div class="lingsha"><a href="https://baike.baidu.com/item/%E9%9F%A9%E8%8F%B1%E7%BA%B1/3622760?fr=aladdin">韩菱纱</a></div> </div> </div> </body> {% endblock %} </html>
登录：
{% extends 'base.html' %} {% block title %} 登陆 {% endblock %} {% block head %} <script src="{{ url_for('static',filename='js/ggg.js') }}"></script> <link rel="stylesheet" href="{{ url_for('static',filename='css/vvv.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="div1"> <div class="div2">登录</div> <div class="div3"> <div class="iconfont ic-user"></div> 用户：<input id="username" type="text" placeholder="请输入用户名"> </div> <div class="div3"> 密码：<input id="userpass" type="text" placeholder="请输入密码"> </div> <div id="error_box"><br></div> <div class="div3"> <button onclick="myLogin()">登陆</button> </div> </div> </body> {% endblock %} </html>
注册
{% extends'base.html' %} {% block title %} 注册 {% endblock %} {% block head %} <link rel="stylesheet" href="{{ url_for('static',filename='css/yyy.css')}}"> <script src="{{ url_for('static',filename='js/rrr.js') }}"></script> {% endblock %} {% block main %} <body> <div class="div1"> <div class="div2">登录注册</div> <div class="div3"> 请输入你的昵称：<input id="username" type="text" placeholder="请输入你的昵称"> </div> <div class="div3"> 设置密码：<input id="userpass" type="text" placeholder="请输入密码"> </div> <div class="div3"> 重复密码：<input id="userpass1" type="text" placeholder="请再次输入密码"> </div> <div class="div3"> 请输入手机号：<input id="phonenumber" type="text" placeholder="请输入11位手机号"> </div> <div id="error_box"><br></div> <div class="div3"> <button onclick="myLogin()">注册</button> </div> <div class="div2">点击 “注册” 即表示您同意并愿意遵守<br>用户协议 和 隐私政策 。</div> </div> <br> </body> </html>