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

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

时间:2017-11-08 21:25:43      阅读:158      评论:0      收藏:0      [点我收藏+]

标签:span   charset   扩展   erro   class   href   code   char   for   

  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 %}Victoria</title> <link href="../static/css/vv.css" rel="stylesheet" type="text/css"> <script src="{{url_for("static",filename="js/change.js")}}"> </script> {% block head %}{% endblock %} </head> <body id="myBody"> <nav class="nav"> <a href="{{ url_for("vi")}}">首页</a> <a href="">下载</a> <input type="text" name="search"> <button type="submit">搜索</button> <a href="{{ url_for("login")}}">登录</a> <a href="{{ url_for("regist")}}">注册</a> <img id="on_off" onclick="change()" src="{{ url_for("static",filename="images/on.jpg") }}" width="30px"> </nav> {% block main %}{% endblock %} <div class="box"> <a href="" class="nav"><span>关于我们</span></a> <a href="" class="nav"><span>意见反馈</span></a> <a href="" class="nav"><span>安全保障</span></a> </div> </body> </html>
    {% extends ‘base.html‘ %}
    {% block title %}
    登录
    {% endblock %}
    {% block head %}
        <link href="{{ url_for("static",filename="css/vv.css") }}" rel="stylesheet" type="text/css">
        <script src="{{ url_for("static",filename="js/new.js") }}"></script>
    {% endblock %}
    {% block main %}
    <body bgcolor="#778899" class="div4">
    <div class="div1">
        <h2 class="title"></h2>
            <div class="normal-title">
                <a class="div2" href="{{ url_for("templates",filename="vv.html") }}">登录</a>
                <b>|</b>
                <a  class="div2" href="{{ url_for("templates",filename="vv1.html") }}">注册</a>
            </div>
    
        <div class="div3">
            用户:<input id="username" type="text" placeholder="请输入昵称">
        </div>
        <div class="div3">
            密码:<input id="userpass" type="text" placeholder="请输入密码">
        </div>
        <div id="error_box"><br></div>
         <div class="div3">
            <button onclick="myLogin()">Login</button>
        </div>
        <div class="div2">ByYin</div>
    </div>
    <br>
    </body>
    {% endblock %}
    </html>
    {% extends ‘base.html‘ %}
    {% block title %}
    注册
    {% endblock %}
    {% block head %}
        <link href="{{url_for("static",filename="css/vv.css") }}" rel="stylesheet" type="text/css">
        <script src="{{ url_for("static",filename="js/new.js") }}"></script>
    {% endblock %}
    {% block main %}
    <body bgcolor="#778899" class="div4">
    <div class="div1">
        <h2 class="title"></h2>
            <div class="normal-title">
                <a class="div2" href="{{ url_for("templates",filename="vv.html") }}">登录</a>
                <b>|</b>
                <a  class="div2" href="{{ url_for("templates",filename="vv1.html") }}">注册</a>
            </div>
    
        <div class="div3">
            用户:<input id="newname1" type="text" placeholder="请输入昵称">
        </div>
        <div class="div3">
            密码:<input id="newpass1" type="text" placeholder="请输入密码">
        </div>
        <div class="div3">
            密码:<input id="newpass2" type="text" placeholder="请再次输入密码">
        </div>
        <div id="error_box"><br></div>
         <div class="div3">
            <button onclick="myRegister()">Register</button>
        </div>
        <div class="div2">ByYin</div>
    </div>
    <br>
    </body>
    {% endblock %}
    </html>

     

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

标签:span   charset   扩展   erro   class   href   code   char   for   

原文地址:http://www.cnblogs.com/yin-yeah/p/7806217.html

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