- 用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 %}</title> {% block head %} <link rel="stylesheet" href="../static/css/base.css" type="text/css"> <script src="../static/js/base.js"></script> {% endblock %} </head> <body id="myBody"> {% block main %} <nav> <ul> <li><a href="#home">首页</a></li> <li><a href="#search">搜索</a></li> <li><input class="find"type="text"name="search"></li> <li style="float:right"><a class="active" href="#about">联系我们</a></li> <li style="float:right"><a class="active" href="#regist">注册</a></li> <li style="float:right"><a class="active" href="#login">登录</a></li> </ul> </nav> <div class="area"></div> <div class="area1"> <div class="img"> <a href="https://www.zhihu.com/question/28715237/answer/83938634"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1509619400048&di=0a3de93d08ed7737aef765d7d7605649&imgtype=0&src=http%3A%2F%2Fimg1.gtimg.com%2Fbj%2Fpics%2Fhv1%2F35%2F44%2F2049%2F133247480.png"></a> <div class="desc"><a href="https://www.zhihu.com/question/28715237/answer/83938634">日本的鲤鱼旗有什么含义？</a></div> </div> <div class="img"> <a href="https://www.baidu.com/link?url=9TQR74QaJSq58bTzm0ELKi-BPFqgGU6PCsCKxv2f0iRZ5pUNy-eBcFwc_U1jyKCs&wd=&eqid=9c41d575000042b00000000659facdd0"> <img src="http://www.sxdaily.com.cn/NMediaFile/2015/0307/SXRB201503070810000126303204969.jpg"></a> <div class="desc"><a href="https://www.baidu.com/link?url=9TQR74QaJSq58bTzm0ELKi-BPFqgGU6PCsCKxv2f0iRZ5pUNy-eBcFwc_U1jyKCs&wd=&eqid=9c41d575000042b00000000659facdd0">细品寿司的前世今生</a></div> </div> </div> {% endblock %} </body> <footer> <div class="footer_box"> Copyright@丝滑酱 </div> </footer> </html>
#login登录页
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> {% extends'base.html' %} <title>{% block title %}霓虹 - 点击打开你的视野{% endblock %}</title> {% block head %} <link href="../static/css/login.css" rel="stylesheet" type="text/css"> <script type='text/javascript' src='../static/js/login.js'></script> {% endblock %} </head> <body> {% block main %} <div class="box"> <h1>(｡･∀･)ﾉﾞ</h1> <div class="input_box"> <input id="uname" type="text" placeholder="请输入用户名" style="300px"> </div> <div class="input_box"> <input id="upass" type="password" placeholder="请输入密码" style="300px"> </div> <div id="error_box"><br></div> <input type="checkbox"value="true"><span>记住我</span> <a href="">忘记密码</a><br><br> <div class="input_box"> <button class="button"onclick="fnLogin()">登录</button> </div> </div> {% endblock %} </body> </html>
#注册页
<!DOCTYPE html> <html lang="en"> <head> {% extends'base.html' %} <meta charset="UTF-8"> <title>% block title %}霓虹 - 点击打开你的视野{% endblock %}</title> {% block head %} <link href="../static/css/login.css" rel="stylesheet" type="text/css"> <script type='text/javascript' src='../static/js/login.js'></script> {% endblock %} </head> <body> {% block main %} <div class="box"> <h1>-快到碗里来-</h1> <div class="input_box"> <input id="uname" type="text" placeholder="请输入用户名" style="300px"> </div> <div class="input_box"> <input id="upass" type="password" placeholder="请输入密码" style="300px"> </div> <div id="error_box"><br></div> <input type="checkbox"value="true"><span>记住我</span> <a href="">忘记密码</a><br><br> <div class="input_box"> <button class="button"onclick="fnLogin()">注册</button> </div> </div> {% endblock %} </body> </html>
