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

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

时间:2017-11-08 13:09:48      阅读:255      评论:0      收藏:0      [点我收藏+]

标签:esc   x64   user   button   put   set   width   mys   name   

  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 %}</title>
        <script src="{{ url_for(‘static‘,filename=‘js/base.js‘)}}"></script>
        <link rel="stylesheet" type="text/css" href="../static/css/base.css">
    </head>
    <body id="myBody">
    {% block head %}{% endblock %}
    <div class="a">
        <nav>
            <a href="{{ url_for(‘index‘) }}">首页</a>
            <a href="">发布问答</a>
            <input type="text" name="search">
            <button type="submit">查找</button>
            <img class="navi" id="on_off" onclick="mySwitch()" src="http://www.runoob.com/images/pic_bulbon.gif " width="20px">
            <a class="navi" href="{{ url_for(‘register‘) }}">注册</a>
            <a class="navi" href="{{ url_for(‘login‘) }}">登录</a>
            <a class="navi" href="">收藏</a>
        </nav>
    </div>
    <hr>
        <div>
             <div class="img">
                 <a href="https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=0&rsv_idx=1&tn=baidu&wd=%E5%B0%8F%E7%8C%AA%E4%BD%A9%E5%A5%87&rsv_pq=f77d08900001a419&rsv_t=45ebl8vOLWaojJB%2BJqWl4G2jgewDoaq6Eal6j0Zx2EIT96apylRhpP3Koqg&rqlang=cn&rsv_enter=1&rsv_sug3=6&rsv_sug1=6&rsv_sug7=100">
                     <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1508477292746&di=b4d222e641b5c06b07c55cd205bba706&imgtype=0&src=http%3A%2F%2Fimg.mp.itc.cn%2Fupload%2F20161220%2Fca4c1e06ab854a40bb2590408a7b2f19_th.jpg"></a>
             <div class="desc"><a href="http://www.baidu.com/">小猪佩奇</a></div>
             </div>
         </div>
         <div>
             <div class="img">
                 <a href="https://www.baidu.com/s?ie=utf-8&f=3&rsv_bp=1&rsv_idx=1&tn=baidu&wd=%E6%89%98%E9%A9%AC%E6%96%AF%E5%92%8C%E4%BB%96%E7%9A%84%E6%9C%8B%E5%8F%8B%E4%BB%AC&oq=%25E5%25B0%258F%25E7%258C%25AA%25E4%25BD%25A9%25E5%25A5%2587&rsv_pq=eb12f7da00019eba&rsv_t=de8cbtTwyWVcQv6xzo8AEbWJhamBkxPdSWJh9Imdf5qYr8rt2NZHXCfYWNg&rqlang=cn&rsv_enter=1&inputT=3189&rsv_sug3=14&rsv_sug1=14&rsv_sug7=100&rsv_sug2=1&prefixsug=tuomasi&rsp=2&rsv_sug4=3188">
                     <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1508477829747&di=fd07b5cc8dd393392af74d2b90404779&imgtype=0&src=http%3A%2F%2Ffdfs.xmcdn.com%2Fgroup23%2FM06%2F8A%2F7E%2FwKgJL1h52lGCOLCQAAEaqmTeglU035.jpg"></a>
                 <div class="desc"><a href="http://www.baidu.com/">托马斯和他的朋友们</a></div>
             </div>
         </div>
         <div>
             <div class="img">
                 <a href="https://www.baidu.com/s?ie=utf-8&f=3&rsv_bp=1&rsv_idx=1&tn=baidu&wd=%E7%8C%AB%E5%92%8C%E8%80%81%E9%BC%A0&oq=%25E6%2589%2598%25E9%25A9%25AC%25E6%2596%25AF%25E5%2592%258C%25E4%25BB%2596%25E7%259A%2584%25E6%259C%258B%25E5%258F%258B%25E4%25BB%25AC&rsv_pq=d23a15630001b4ed&rsv_t=7430JNuHLv7607LmZ%2B%2BWE2eYL%2Fp7GhOQe3j0f5S9RCnmHRWM5plbXIAinRg&rqlang=cn&rsv_enter=1&inputT=2790&rsv_sug3=20&rsv_sug1=19&rsv_sug7=100&rsv_sug2=1&prefixsug=maohe%2520&rsp=0&rsv_sug4=2790">
                     <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1508477964743&di=46e94537aabf5867005957b87cd85799&imgtype=0&src=http%3A%2F%2Fcdn.aixifan.com%2Fdotnet%2Fartemis%2Fu%2Fcms%2Fwww%2F201603%2F2615504731cpun6r.jpg"></a>
                 <div class="desc"><a href="http://www.baidu.com/">猫和老鼠</a></div>
             </div>
         </div>
         <div>
             <div class="img">
                 <a href="https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&rsv_idx=1&tn=baidu&wd=%E5%A4%A9%E7%BA%BF%E5%AE%9D%E5%AE%9D&oq=%25E7%258C%25AB%25E5%2592%258C%25E8%2580%2581%25E9%25BC%25A0&rsv_pq=8de48b3f0001c6b3&rsv_t=94c1qlZLktBv27KJJZA0Sxe9rIX64JhNE%2F7O030MAq3wDdaGuEiv99uR8Jg&rqlang=cn&rsv_enter=1&inputT=2790&rsv_sug3=27&rsv_sug1=26&rsv_sug7=100&bs=%E7%8C%AB%E5%92%8C%E8%80%81%E9%BC%A0">
                     <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1508478000480&di=5fe3f1bdcea73b098ec174ea6a7b5f8b&imgtype=0&src=http%3A%2F%2Fd2xosoyzehxi5w.cloudfront.net%2Fwp-content%2Fuploads%2F2014%2F12%2Fteletubbies-sun-baby-jess-smith-3.jpg"></a>
                 <div class="desc"><a href="http://www.baidu.com/">天线宝宝</a></div>
             </div>
         </div>
    {%  block main %}{% endblock %}
    
    </body>
    </html>
    {% extends‘base.html‘ %}
    
    {% block title %}
    登录
    {% endblock %}
    {% block head %}
        <link rel="stylesheet" type="text/css" href="{{ url_for(‘static‘,filename=‘css/js23.css‘) }}">
        <script src="{{ url_for(‘static‘,filename=‘js/js23.js‘) }}"></script>
    {% endblock %}
    {% block main %}
    <div class="bg-img">
       <div class="box">
           <h1>登录</h1>
           <div class="input_box">
               <h3>username</h3>
               <input id="username" type="text" placeholder="请输入用户名">
           </div>
           <div class="input_box">
               <h3>userpass</h3>
               <input id="userpass" type="password" placeholder="请输入密码">
           </div>
           <br>
           <div class="link_box">
               <a href="js24.html">
                   没有账号,立即注册
                   <b> ></b>
               </a>
           </div>
           <div id="error_box"><br></div>
           <div class="input_box">
               <button onclick="fnLogin()">LOGIN</button>
               <button onclick=window.alert(fnLogin())>RESET</button>
           </div>
       </div>
    </div>
    {% endblock %}
    {% extends‘base.html‘ %}
    
    {% block title %}
    注册
    {% endblock %}
    {% block head %}
        <link rel="stylesheet" type="text/css" href="{{ url_for(‘static‘,filename=‘css/js24.css‘) }}">
        <script src="{{ url_for(‘static‘,filename=‘js/js24.js‘) }}"></script>
    {% endblock %}
    {% block main %}
    <div class="bg-img">
        <div class="box">
            <h1>注册</h1>
            <div class="input_box">
                用户名:<input id="username" type="text" placeholder="请输入新用户名">
            </div>
            <br>
            <div class="input_box">
                密 码:&nbsp&nbsp<input id="userpass" type="password" placeholder="请输入新密码">
            </div>
            <br>
            <div class="input_box">
                密 码:&nbsp&nbsp<input id="reuserpass" type="password" placeholder="请再次输入新密码">
            </div>
            <br>
            <div class="link_box">
                <a href="js23.html">
                    已有帐号,立即登陆
                    <b> ></b>
                </a>
            </div>
            <div id="error_box"><br></div>
            <div class="input_box">
               <button id="button" onclick="fnRegister()">注册</button>
            </div>
        </div>
    </div>
    {% endblock %}

    技术分享技术分享

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

标签:esc   x64   user   button   put   set   width   mys   name   

原文地址:http://www.cnblogs.com/zsy-97/p/7803379.html

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