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

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

时间:2017-11-08 11:52:27      阅读:153      评论:0      收藏:0      [点我收藏+]

标签:_for   button   mis   esc   定义   pre   pass   nav   styles   

  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. 首页、登录页、注册页都按上述步骤改写。
    导航
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>{% block title %}{% endblock %}base</title>
        <link rel="stylesheet" href="../static/css/0082.css" type="text/css">
        <script src="../static/js/0082.js"></script>
     {% block head %}{% endblock %}
    </head>
    <body id="myBody">
    {% block main %}{% endblock %}
    <nav>
        <div class="layui-col-md4">
            <div class="layui-row" style="padding-top:10px;">
                <img id="myOnOff" onclick="myswitch()" src="http://www.runoob.com/images/pic_bulbon.gif" width="40px"
                     style="padding-left: 10px;">
                <a href="{{ url_for(‘base‘)}}">首页</a>
                <a href="{{ url_for(‘login‘)}}">登录</a>
                <a href="{{ url_for(‘signin‘)}}">注册</a>
    
            </div>
        </div>
        <br>
        <form method="get" action="#">
            <div class="layui-row">
                <div class="layui-col-md3" style="padding-left: 50px;">
                    <input type="text" name="title" required lay-verify="required"
                           placeholder="search"
                           autocomplete="off" class="layui-input">
                </div>
                <div class="layui-col-md3" style="padding-left: 50px;">
                    <button type="submit" class="layui-btn layui-btn-primary">搜索</button>
                </div>
            </div>
        </form>
        </nav>
    <div class="area">
    
    </div>
    
    
    <<div>
        <div class="img">
            <a href="http://www.gzcc.cn/html/xygk/xiaoyuanfengguang/">
                <img src="http://www.gzcc.cn/2016/images/yhdh/05.jpg"></a>
            <div class="desc"><a href="http://www.gzcc.cn/html/xygk/xiaoyuanfengguang/">校园风光</a></div>
        </div >
            <div class="img">
            <a href=http://www.gzcc.cn/quanjingxiaoyuan/tour.html">
                <img src="http://www.gzcc.cn/2016/images/yhdh/07.jpg"></a>
            <div class="desc"><a href="http://www.gzcc.cn/quanjingxiaoyuan/tour.html">全景校园</a></div>
        </div>
    <div class="img">
            <a href="http://www.gzcc.cn/html/shipinxiaoyuan/">
                <img src="http://www.gzcc.cn/2016/images/yhdh/06.jpg"></a>
            <div class="desc"><a href="http://www.gzcc.cn/html/shipinxiaoyuan/">视频校园</a></div>
        </div>
        <div class="img">
            <a href="http://www.gzcc.cn/html/xiaoyoufengcai/">
                <img src="http://www.gzcc.cn/2016/images/yhdh/04.jpg"></a>
            <div class="desc"><a href="http://www.gzcc.cn/html/xiaoyoufengcai/">校友风采</a></div>
        </div>
    </div>
    
    </div>
    
    <br>
    <br>
    <footer>
        <div class="footer_box">
              
        </div>
    </footer>
    </body>
    </html>

    技术分享

  4.  

    注册
    {% extends0082.html %}
    <head>
    
        <meta charset="UTF-8">
        <title>注册</title>
        {% block head %}
        <link href="{{url_for(‘static‘,filename=‘css/zhuce.css‘)}}" rel="stylesheet" type="text/css" >
        <script src="{{ url_for(‘static‘,filename=‘js/zhuce.js‘) }}"></script>
         {% endblock %}
    </head>
    
    <body>{% block main %}
    <div><h1>用户注册</h1></div>
      <div class="aa"><script>document.write("loading....")</script>
        </div>
    <div class="flex-container">
    
        <div class="box">
    <h2>欢迎加入</h2>
            <div class="input_box">
                请输入账号 <input id="uname" type="text"laceholder="请输入账号">   </div><br>
            <div class="input_box">
                请输入密码 <input id="upass" type="password" placeholder="请输入密码"></div><br>
             <div class="input_box">
                再输入密码 <input id="upass1" type="password" placeholder="再次输入密码"></div><br>
            <div id="error_box"><br></div>
             <div class="input_box">
                <button onclick="fnLogin()" >register</button></div>
        </div>
    </div>
    </body>{% endblock %}
    </html>

    技术分享

  5.  

    登录
    {% extends0082.html %}
    <html>
    <head>
        <meta charset="UTF-8">
        <title>登录</title>
        {% block head %}
        <link  href="{{url_for(‘static‘,filename=‘css/zhuce.css‘)}}" rel="stylesheet" type="text/css">
        <script src="{{url_for(‘static‘,filename=‘js/denglu.js‘)  }}"></script>
        {% endblock %}
    </head>
    
    <body>
    {% block main %}
      <div><h1>用户登录</h1></div>
      <div class="aa"><script>document.write("loading....")</script>
        </div>
    
    <div class="flex-container">
    
        <div class="box">
            <div class="input_box">
                登录 <input id="uname" type="text" placeholder="输入用户名">
            </div>
            <br>
            <div class="input_box">
                密码 <input id="upass" type="password" placeholder="输入密码">
            </div>
            <br>
            <div id="error_box"><br></div>
            <div class="input_box">
                <button onclick="fnLogin()">load</button>
            </div>
        </div>
    
    </div>
    {% endblock %}
    </body>
    </html>

    技术分享

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

标签:_for   button   mis   esc   定义   pre   pass   nav   styles   

原文地址:http://www.cnblogs.com/hxl316/p/7801276.html

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