码迷,mamicode.com
首页 > 其他好文 > 详细

加载静态文件,父模板的继承和扩展

时间:2017-11-05 22:24:10      阅读:271      评论:0      收藏:0      [点我收藏+]

标签:技术   char   ott   内容   navbar   title   登陆   static   role   

  1. 用url_for加载静态文件
    1. <script src="{{ url_for(‘static‘,filename=‘js/login.js‘) }}"></script>
    2. flask 从static文件夹开始寻找
    3. 可用于加载css, js, image文件
  2. 继承和扩展
    1. 把一些公共的代码放在父模板中,避免每个模板写同样的内容。base.html
    2. 子模板继承父模板
      1.   {% extends ‘base.html’ %}
    3. 父模板提前定义好子模板可以实现一些自己需求的位置及名称。block
      1. <title>{% block title %}{% endblock %}-MIS问答平台</title>
      2. {% block head %}{% endblock %}
      3. {% block main %}{% endblock %}
    4. 子模板中写代码实现自己的需求。block
      1.   {% block title %}登录{% endblock %}
  3. 首页、登录页、注册页都按上述步骤改写。

 

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 %}

 效果图:

技术分享

 

加载静态文件,父模板的继承和扩展

标签:技术   char   ott   内容   navbar   title   登陆   static   role   

原文地址:http://www.cnblogs.com/l-j-l/p/7788939.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!