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

时间：2017-11-08 14:52:07 阅读：122 评论：0 收藏：0 [点我收藏+]

标签：src 输入 main mit script ace ima aac lang

用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%}{% endblock %}base</title>
<link rel="stylesheet" href="{{ url_for(‘static‘,filename=‘css/base.css‘)}}">
    <script src="{{ url_for(‘static‘,filename=‘js/base.js‘) }}"></script>
<base target="_blank" />
{% block head %}
{% endblock %}
</head>
<body>
<div><h1>武林</h1></div>
<nav>

    <a href="http://127.0.0.1:5000/" style="color: red">首页</a>
    <a href="" style="color: red">下载</a>
    <input type="text"name="search">
    <button type="submit" >搜索</button>
    <a href="http://127.0.0.1:5000/login" style="color: red">登录</a>
    <a href="{{ url_for(‘regist‘)}}" style="color: red">注册</a>
</nav>
{% block main %}{% endblock %}

</body>
</html>

首页

{% extends‘base.html‘ %}
{% block title %}
    首页
{% endblock %}
{% block head %}
    <link rel="stylesheet" href="{{ url_for(‘static‘,filename=‘css/hh.css‘)}}" type="text/css">
{% endblock %}
{% block main %}
<body>
<div class="all">
    <div class="img">
        <a href="">
            <img src="http://img2.touxiang.cn/file/20160601/78050c8c02997f95d03bc5c8041b5131.jpg"></a>
        <div class="wenzi1"><a  href="">一念无明</a></div>
    </div>
    <div class="img">
        <a href="">
            <img src="http://img2.touxiang.cn/file/20160601/9144c9b9c9bc63150d9aa5aac727b392.jpg"></a>
        <div class="wenzi2"><a href="">美人为馅</a></div>
    </div>
    <div class="img">
        <a href="">
            <img src="http://img2.touxiang.cn/file/20160504/b1e6d1af8b96f4506d4a8acc9a1182f7.jpg"></a>
        <div class="wenzi3"><a href="">公子如玉</a></div>
    </div>
    <div class="img">
        <a href="">
            <img src="http://img2.touxiang.cn/file/20160601/99473e3887d3e8c6e8a9015e134c3307.jpg"></a>
        <div class="wenzi4"><a href="">刀剑无眼</a></div>
    </div>
</div>

</body>
{% endblock %}
</html>

登录页

{% extends‘base.html‘ %}
{% block title %}
    登录
{% endblock %}
{% block head %}
    <link href="../static/css/hh.css" rel="stylesheet" type="text/css">
    <script src="../static/js/hl.js"></script>
{% endblock %}
{% block main %}
<body>
  <div><h1>武林|登录</h1></div>

    <div class="box">

        <div class="input_box">
             姓名：<input type="text" id="uname" placeholder="敢问阁下大名">
        </div>
        <br>
        <div class="input_box">
             密码：<input type="password" id="upass" placeholder="请输入通关密码">
        </div>
        <br>
        <div id="error_box"><br></div>
        <div class="input_box">
            <button onclick="fnLogin()">登录</button>

        </div>
        <br>
    </div>

</div>
{% endblock %}
</body>
</html>

注册页

{% extends‘base.html‘ %}
{% block title %}
    注册
{% endblock %}
    {% block head %}
    <link href="../static/css/hh.css" rel="stylesheet" type="text/css">
    <script src="../static/js/hl.js"></script>
{% endblock %}
{% block main %}
<body>
  <div><h1>武林|注册</h1></div>

    <div class="box">

        <div class="input_box">
              请输入账号：<input id="name" type="text"placeholder="请输入用户名"><br>

        </div>
        <br>
        <div class="input_box">
          请输入密码：<input id="password" type="password"placeholder="请输入密码"><br><br>
          请确认密码：<input id="password2" type="password"placeholder="请再次输入密码"><br>
        </div>
        <br>
        <div id="error_box"><br></div>
        <div class="input_box">
            <button onclick="fnLogin()">注册</button>

        </div>
        <br>
    </div>

</div>
</body>
{% endblock %}
</html>

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

标签：src 输入 main mit script ace ima aac lang

原文地址：http://www.cnblogs.com/00js/p/7803560.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)

周排行