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

最新推荐文章于 2025-03-01 23:11:33 发布

转载最新推荐文章于 2025-03-01 23:11:33 发布 · 49 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/yin-yeah/p/7806217.html

本文介绍如何使用Flask框架进行模板继承，并展示如何加载静态文件如CSS、JS等资源。通过具体实例，详细解释了父模板与子模板的定义及应用，以及url_for函数的使用。

用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 %}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>