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

 

  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 %}Hogwarts</title>
    <base  target="_blank">
    <link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='css/first.css') }}">
    <script src="{{ url_for('static',filename='js/first.js') }}"></script>
{% block head %}
{% endblock %}

</head>
<body class="body" id="myBody">

<div class="title">
    <nav class="nav">
        <img id="on_off" onclick="mySwitch()" src="{{ url_for('static',filename='image/bulboff.jpg') }}" width="50px">
        <a href="{{ url_for('first') }}">首页</a>
        <a href="">校园新闻</a>
        <a href="">格兰芬多</a>
        <a href="">赫奇帕奇</a>
        <a href="">拉文克劳</a>
        <a href="">斯莱特林</a>
        <a href="{{ url_for('sign_up') }}">登陆</a>
        <a href="{{ url_for('sign_in') }}">注册</a>
        <a href="">退出</a>
        <input type="text"name="search">
        <button type="submit">搜索</button>
    </nav>
    <h1>霍格沃兹校园论坛</h1>
    <h2>Hogwarts'BBS</h2>
</div>

{% block main %}

{% endblock %}

<div id="bottom">
    <a href="">联系我们</a>
    <a href="">加入我们</a>
    <a href="">校长室</a>
    <a href="">帮助中心</a>
    <a href="">合作伙伴</a>
</div>

<div class="copyright">
    <p>Copyright &copy; 2017. Created by <a href="#" target="_blank">Judy_L</a></p>
</div>

</body> </html>
{% extends 'first.html'%}
{% block title %}
注册*
{% endblock %}
{% block head %}
    <link href="{{ url_for('static',filename='css/sign.css') }}" rel="stylesheet" type="text/css">
    <script src="{{ url_for('static',filename='js/sign.js') }}"></script>
{% endblock %}


{% block main %}
    <div class="box">
            <h3>欢迎注册</h3>
            <div class="input_box">
               输入用户名： <input id="uname" type="text" placeholder="请输入用户名" class="b1">
        </div>
             <div class="input_box">
                输入密码： <input id="upass" type="password" placeholder="请输入密码" class="b1">
             </div>
            <div class="input_box">
                确认密码： <input id="checkpass" type="password" placeholder="请确认密码" class="b1">
             </div>
        <div id="error_box" class="error_box"><br></div>
        <div class="button">
            <button  class="login" onclick="fnLogin()">登录</button>
            <button  class="cancel" onclick=window.alert("是否确认离开，您输入的数据可能不会被保存")>取消</button></div>
    </div>
{% endblock %}
{% extends 'first.html' %}
{% block title %}
登录*
{% endblock %}
{% block head %}
    <link href="{{url_for('static',filename='css/sign.css') }}" rel="stylesheet" type="text/css">
    <script src="{{ url_for('static',filename='js/sign.js') }}"></script>
{% endblock %}

{% block main %}
    <div class="box">
            <h3>欢迎登陆</h3>
            <div class="input_box">
               用户名： <input id="uname" type="text" placeholder="请输入用户名" class="b1">
        </div>
             <div class="input_box">
                密码： <input id="upass" type="password" placeholder="请输入密码" class="b1">
             </div>
        <div id="error_box" class="error_box"><br></div>
        <div class="button">
            <button  class="login" onclick="fnLogin()">登录</button>
            <button  class="cancel" onclick=window.alert("是否确认离开，您输入的数据可能不会被保存")>取消</button></div>

    </div>
{% endblock %}

 

 

posted @ 2017-11-08 13:20  011赖颖璇  阅读(132)  评论(0)    收藏  举报