加载静态文件,父模板的继承和扩展
Posted wsxhj
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了加载静态文件,父模板的继承和扩展相关的知识，希望对你有一定的参考价值。
- 用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 %}
- 首页、登录页、注册页都按上述步骤改写。
bass父模板：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>{% block title %}{% endblock %}</title> 6 <!-- 引入 Bootstrap --> 7 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> 8 <link href="{{url_for("static",filename="CSS/bass.css")}}" type="text/css" rel="stylesheet" charset="UTF-8"> 9 {% block head %}{% endblock %} 10 </head> 11 <body class="body"> 12 <!-- 顶部导航 --> 13 <nav class="navbar navbar-default" role="navigation"> 14 15 16 <ul class="nav nav-tabs"> 17 <li class="active"><a href={{ url_for("index") }}>首页</a></li> 18 <li><a href="#">游戏中心</a></li> 19 <li><a href="#">直播</a></li> 20 <li><a href="#">周边</a></li> 21 <li><a href="#">同人站</a></li> 22 <li><a href="#">客户端</a></li> 23 24 <ul class="nav navbar-nav navbar-right"> 25 <li><a href={{ url_for("register") }}><span class="glyphicon glyphicon-user"></span> 注册</a></li> 26 <li><a href={{ url_for("login") }}><span class="glyphicon glyphicon-log-in"></span> 登录</a></li> 27 <li><a href={{ url_for("index") }}><img src="{{ url_for("static",filename="Img/90sheji.png") }}" style="width: 30px "></a></li> 28 </ul> 29 <form class="navbar-form navbar-right" role="search"> 30 31 <div class="form-group"> 32 <input type="text" class="form-control" placeholder="Search"> 33 </div> 34 <button type="submit" class="btn btn-default"> 35 搜索 36 </button> 37 </form> 38 </ul> 39 40 </div> 41 </div> 42 </nav> 43 44 {% block main %}{% endblock %} 45 46 <!-- 底部导航 --> 47 <nav class="navbar navbar-default navbar-fixed-bottom" role="navigation"> 48 49 <ul class="nav navbar-nav"> 50 <li class="active"><a href="#">友情链接</a></li> 51 <li><a href="#">联系我们</a></li> 52 <li><a href="#">加入我们</a></li> 53 <li><a href="#">关于我们</a></li> 54 </ul> 55 <ul class="nav navbar-nav navbar-right"> 56 <li><a href="#"> 帮助中心</a></li> 57 <li><a href="#"> 反馈论坛</a></li> 58 </ul> 59 </div> 60 </div> 61 </nav> 62 </body> 63 </html>
首页：
1 {% extends "base.html" %} 2 3 {% block title %}首页{% endblock %} 4 5 {% block head %}{% endblock %} 6 7 {% block main %}{% endblock %}
登陆：
1 {% extends "base.html" %} 2 3 {% block title %}登陆{% endblock %} 4 5 {% block head %} 6 <link href="{{ url_for("static",filename="CSS/login_zhuce.css") }}" rel="stylesheet" type="text/css" charset="UTF-8"> 7 <script src="{{ url_for("static",filename="JS/login_zhuce.js") }}"></script> 8 {% endblock %} 9 10 {% block main %} 11 <div class="center-block" id="loginbox"> 12 <div class="panel panel-primary" id="loginbox1_1"> 13 <div class="panel-heading"> 14 <h2 class="panel-title">登陆</h2> 15 </div> 16 <br> 17 <form class="bs-example bs-example-form" role="form"> 18 <div class="input-group"> 19 <span class="input-group-addon"></span> 20 <input type="text" class="form-control" id="id" placeholder="请输入用户名"> 21 </div> 22 <br> 23 <div class="input-group"> 24 <span class="input-group-addon"></span> 25 <input type="password" class="form-control" id="password" placeholder="请输入密码"> 26 </div> 27 <div id="error_box"> 28 <br> 29 </div> 30 <div class="checkbox"> 31 <label> 32 <input type="checkbox">记住我 33 </label> 34 </div> 35 <br> 36 <label><input type="button" class="btn btn-default" onclick="Login()" value="登陆"></input></label> 37 </form> 38 </div> 39 </div> 40 {% endblock %} 41 42 43 </html>
注册：
1 {% extends "base.html" %} 2 {% block title %}注册{% endblock %} 3 4 {% block head %} 5 <link href="{{ url_for("static",filename="CSS/login_zhuce.css") }}" rel="stylesheet" type="text/css" charset="UTF-8"> 6 <script src="{{ url_for("static",filename="JS/login_zhuce.js") }}"></script> 7 {% endblock %} 8 9 {% block main %} 10 <div class="center-block" id="zhucebox"> 11 <div class="panel panel-primary" id="zhucebox1_1"> 12 <div class="panel-heading"> 13 <h2 class="panel-title">注册</h2> 14 </div> 15 <br> 16 <form class="bs-example bs-example-form" role="form"> 17 <div class="input-group"> 18 <span class="input-group-addon"></span> 19 <input type="text" class="form-control" id="zcid" placeholder="请输入用户名"> 20 </div> 21 <br> 22 <div class="input-group"> 23 <span class="input-group-addon"></span> 24 <input type="password" class="form-control" id="zcpassword" placeholder="请设置密码"> 25 </div> 26 <br> 27 <div class="input-group"> 28 <span class="input-group-addon"></span> 29 <input type="password" class="form-control" id="repassword" placeholder="请再次输入密码"> 30 </div> 31 <div id="error_box1"> 32 <br> 33 </div> 34 <br> 35 <label><input type="button" class="btn btn-default" value="注册" onclick="Zhuce()"></input></label> 36 </form> 37 </div> 38 </div> 39 {% endblock %}
效果图：
以上是关于加载静态文件,父模板的继承和扩展的主要内容，如果未能解决你的问题，请参考以下文章