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

时间：2017-11-08 16:00:07 阅读：230 评论：0 收藏：0 [点我收藏+]

标签：开始代码 css styles http sig 平台 img double

用url_for加载静态文件
1. <script src="{{ url_for(‘static‘,filename=‘js/login.js‘) }}"></script>
2. flask 从static文件夹开始寻找
3. 可用于加载css, js, image文件
继承和扩展
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 %}
首页、登录页、注册页都按上述步骤改写。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{% block title %}BIG SALE in TB{% endblock %}</title>
    <base href="https://ai.taobao.com/?pid=mm_12351394_2325537_70732358" target="_blank">
    <script src="{{ url_for(‘static‘,filename=‘js/base.js‘) }}" type="text/javascript"></script>
    <link href="{{ url_for(‘static‘,filename=‘css/base.css‘) }}" rel="stylesheet" type="text/css">
{% block head %}{% endblock %}
</head>
<body>

<nav>

    <a class="logo" href="/">
        <img src="https://ss2.bdstatic.com/8_V1bjqh_Q23odCf/pacific/1185915212.png" alt="Logo"></a>

    <a href="http://127.0.0.1:5000/">首页</a>
    <a href="http://127.0.0.1:5000/login">登录</a>
    <a href="http://127.0.0.1:5000/res">注册</a>
    <input type="text"name="search">
    <button type="submit">搜索</button>
</nav>
{% block main %}{% endblock %}
<hr>

</body>
</html>

{% extends ‘base.html‘ %}
{% block title %}REGISTER{% endblock %}
{% block head %}

    <link rel="stylesheet" type="text/css" href="../static/css/200.css">
    <script src="../js/200.js"></script>
{% endblock %}

{% block main %}

<body class="bg">

<div class="box" >
    <div class="lg1" ><h2>?   欢迎注册   ?</h2></div>
    <div class="box2" >
            请输入账号:　<input id="name" type="text" placeholder="name"><br>
            请输入密码:　<input id="password" type="password" placeholder="PIN"><br>
            再输入密码:　<input id="password1" type="password" placeholder="PIN"><br>
        </div>
        <div id="error_box"><br></div>
      <div class="lg2" >
         <button type="submit" onclick="myLogin()">注册</button>
         <button type="submit" onclick=window.alert("是否取消注册！")>取消</button>
          <br>
          <div class="design">
          <div class="lg3" ><h4>   </h4></div>
                <p>Design by Doublewhere</p>
         </div>

    </div>
</div>

</body>
{% endblock %}

{% extends ‘base.html‘ %}
{% block title %}LOGIN{% endblock %}
{% block head %}
    <link rel="stylesheet" type="text/css" href="../static/css/100.css">
    <script src="../js/100.js"></script>
{% endblock %}

{% block main %}

<body class="bg">

<div class="box" >
    <div class="lg1" ><h2>?  欢迎登录  ?</h2></div>
    <div class="box2" >
        姓名：<input id="name" type="text" placeholder="请输入用户名"><br>
        密码：<input id="password" type="password" placeholder="请输入密码"><br>
    </div>

        <div id="error_box"><br></div>
      <div class="lg2" >
         <button type="submit" onclick="myLogin()">登录</button>
         <button type="submit" onclick=window.alert("是否取消登录！")>取消</button>
          <br>
          <div class="design">
          <div class="lg3" ></div>
                <p>Design by Doublewhere</p>
         </div>

    </div>
</div>

</body>
{% endblock %}

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

标签：开始代码 css styles http sig 平台 img double

原文地址：http://www.cnblogs.com/laifai666/p/7804266.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行