加载静态文件,父模板的继承和扩展
时间：2017-11-05 00:10:40
收藏：0
阅读：260
- 用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>Welcome to GZCC -- {% block head %}{% endblock %}</title> <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <link type="text/css" rel="stylesheet" href="../static/css/moban.css"> <script type="text/javascript" src="{{ url_for(‘static‘,filename=‘js.muban.js‘) }}"></script> </head> <nav class="ti"> <a href="" target="_blank"><img src="http://www.gzcc.cn/2016/images/footer1-logo.png" id="logo" alt="logo"></a> <a href="{{ url_for(‘he‘) }}"> <button type="submit" class="ti">首页</button> </a> <a href="http://site.gzcc.cn/"> <button type="submit" class="ti">信息学院</button> </a> <a href="http://sfl.gzcc.cn/"> <button type="submit" class="ti">外国语学院</button> </a> <a href="http://sa.gzcc.cn/"> <button type="submit" class="ti">会计学院</button> </a> <a href="http://st.gzcc.cn/"> <button type="submit" class="ti">旅游学院</button> </a> <input type="text" placeholder="学院搜索"> <a href="https://www.baidu.com/"> <button type="submit" class="ti">搜索</button> </a> <a href="{{ url_for(‘ha‘) }}"> <button type="submit" class="ti">登录</button> </a> <a href="{{ url_for(‘hi‘) }}"> <button type="submit" class="ti">注册</button> </a> </nav> <body> <div class="beijing"> <br><br><br><br><br><br><br><br>{% block main %}{% endblock %}<br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> </div> <div> <div class="mg"> <a href="http://www.gzcc.cn/"><img src="http://www.gzcc.cn/2016/images/yhdh/01.jpg"></a> <div id="desc"><a href=http://www.gzcc.cn/">学校荣誉</a></div> </div> <div class="mg"> <a href="http://www.gzcc.cn/"><img src="http://www.gzcc.cn/2016/images/yhdh/02.jpg"></a> <div id="desc"><a href=http://www.gzcc.cn/">师生获奖</a></div> </div> <div class="mg"> <a href="http://www.gzcc.cn/html/xueyuanrongyu/"><img src="http://www.gzcc.cn/2016/images/yhdh/03.jpg"></a> <div id="desc"><a href=http://www.gzcc.cn/html/xueyuanrongyu/">领导关怀</a></div> </div> <div class="mg"> <a href="http://www.gzcc.cn/html/xueyuanrongyu/"><img src="http://www.gzcc.cn/2016/images/yhdh/08.jpg"></a> <div id="desc"><a href=http://www.gzcc.cn/html/xueyuanrongyu/">数字广商</a></div> </div> <div class="mg"> <a href="http://www.gzcc.cn/html/xueyuanrongyu/"><img src="http://www.gzcc.cn/2016/images/yhdh/05.jpg"></a> <div id="desc"><a href=http://www.gzcc.cn/html/xueyuanrongyu/">画说校园</a></div> </div> <div class="mg"> <a href="http://www.gzcc.cn/html/xueyuanrongyu/"><img src="http://www.gzcc.cn/2016/images/yhdh/06.jpg"></a> <div id="desc"><a href=http://www.gzcc.cn/html/xueyuanrongyu/">视频校园</a></div> </div> <div class="mg"> <a href="http://www.gzcc.cn/html/xueyuanrongyu/"><img src="http://www.gzcc.cn/2016/images/yhdh/07.jpg"></a> <div id="desc"><a href=http://www.gzcc.cn/html/xueyuanrongyu/">全景校园</a></div> </div> <div class="mg"> <a href="http://www.gzcc.cn/html/xueyuanrongyu/"><img src="http://www.gzcc.cn/2016/images/yhdh/04.jpg"></a> <div id="desc"><a href=http://www.gzcc.cn/html/xueyuanrongyu/">校友风采</a></div> </div> </div> </body> </html
{% extends‘muban.html‘ %} {% block head %}登录{% endblock %} {% block main %} <div class="1"> <div><h2>登录</h2></div> <div> 用户:<input id="uname" type="text" placeholder="用户名"> </div> <br> <div> 密码:<input id="upass" type="password" placeholder="密码"> </div> <br> <div id="error_box"><br></div> <br> <div> <button class="button" onclick="fnLogin()">登录</button> <a href="{{ url_for(‘hi‘) }}"> <button class="button">注册</button> </a> </div> <div><h6>版权归广州商学院所有</h6></div> <p>详情请联系广州商学院</p> </div>
{% extends‘muban.html‘ %} {% block head %}注册{% endblock %} {% block main %} <div class="1"> <div><h2>新用户</h2></div> <div> 用户:<input id="uname" type="text" placeholder="用户名"> </div> <div> 密码:<input id="upass" type="password" placeholder="密码"><br> </div> <div> 密码:<input id="upasss" type="password" placeholder="再次输入密码"><br> </div> <div id="error_box"><br></div> <div> <button class="button" onclick="fnLogin()">注册</button> </div> <div><h6>版权归广州商学院所有</h6></div> <p>详情请联系广州商学院</p> </div>
原文：http://www.cnblogs.com/Carrie-chong/p/7778556.html
评论（0）