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

转载 于 2017-11-07 19:29:00 发布 · 50 阅读 · 0 ·
CC 4.0 BY-SA版权
原文链接：http://www.cnblogs.com/lqx12/p/7798608.html
文章标签：

#python #javascript #ViewUI

本文介绍如何使用Flask框架进行模板继承，并详细解释如何加载静态文件如CSS、JS和图片等资源。通过具体实例展示了登录页、注册页和首页的设计方式。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

  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 %}</title>
    <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 id="myBody">
<nav>
<div class="container">
    <img id="images" src="{{ url_for('static',filename='images/flower.jpg') }}" alt="fl" width="50">
    <a class="one" href="{{url_for('shouye')}}">首页&nbsp;&nbsp;</a>
    <a class="one" href="{{url_for('question')}}">发布问题&nbsp;&nbsp;</a>
    <a class="one" href="">联系我们&nbsp;&nbsp;</a>
    <input id="keyword" type="text" name="search" placeholder="请输入关键字">
    <input type="submit" value="搜索">
    <a class="login" href="{{url_for('login')}}">登录</a>
    <a class="register" href="{{url_for('register')}}">注册</a>
    <img id="on_off" onclick="mySwitch()" src="../static/images/bulbon.gif">
</div>
</nav>
{% block main %}

<footer>
    <div class="footer_box">
         Copyright@ 2017-2022 个人版权，版权所有
     </div>
 </footer>
{% endblock %}

  1.  

    首页：

    {% extends'base.html' %}
{% block title %}
    首页
{% endblock %}
{% block head %}
    <link rel="stylesheet" href="{{ url_for('static',filename='css/shouye.css')}}" type="text/css">
{% endblock %}
{% block main %}
<body>
<div class="daohang">
<p>用户导航</p>
<hr>
 <div class="img">
        <a href="http://music.baidu.com/tag/%E6%B5%81%E8%A1%8C">
            <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1508478031679&di=ff1b37b2f4b046bb6b035f800fcc1400&imgtype=0&src=http%3A%2F%2Fpic9.nipic.com%2F20100923%2F4845745_011226734994_2.jpg"></a>
        <div class="desc"><a href="http://music.baidu.com/tag/%E6%B5%81%E8%A1%8C">流行歌曲</a></div>
    </div>
    <div class="img">
        <a href="http://music.163.com/#/playlist?id=105393276">
            <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1508478031677&di=1179157de7164fa75c56875751209545&imgtype=0&src=http%3A%2F%2Fpic.58pic.com%2F58pic%2F11%2F50%2F48%2F20P58PICesf.jpg"></a>
        <div class="desc"><a href="http://music.163.com/#/playlist?id=105393276">零零年代曲</a></div>
    </div>
    <div class="img">
        <a href="http://music.baidu.com/tag/%E6%AC%A7%E7%BE%8E">
            <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1508478031678&di=623a8822585eb7e98099f5b646b2243c&imgtype=0&src=http%3A%2F%2Fpic.58pic.com%2F58pic%2F14%2F13%2F36%2F87A58PICdZ6_1024.jpg"></a>
        <div class="desc"><a href="http://music.baidu.com/tag/%E6%AC%A7%E7%BE%8E">欧美Hits</a></div>
    </div>
     <div class="img">
        <a href="http://music.163.com/#/playlist?id=23043140">
            <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1508478031678&di=0f421a2aaf8a7d441fd6eebfb9019105&imgtype=0&src=http%3A%2F%2Fimg1.3lian.com%2Fimg013%2Fv1%2F93%2Fd%2F87.jpg"></a>
        <div class="desc"><a href="http://music.163.com/#/playlist?id=23043140">九十年代四大天王</a></div>
    </div>
</div>
</body>

</html>
{% endblock %}

     

    登录页：

    {% extends 'base.html'%}
{% block title %}
登录
{% endblock %}
{% block head %}
    <script src="{{url_for('static',filename='js/login.js') }}"></script>
<script src="{{url_for('static',filename='js/base.js') }}"></script>
<link rel="stylesheet" type="text/css"  href="{{url_for('static',filename='css/login.css') }}">

{% endblock %}
{% block main %}
<div class="box">
        <a class="one" href="{{url_for('login')}}">登录</a>
        &nbsp;<b>·</b>&nbsp;
        <a class="one"href="{{url_for('register')}}">注册</a>
         <div class="input_box">
             username:<input type="text" id="uname" placeholder="请输入用户名">
         </div>
         <div class="input_box">
             password:<input type="password" id="upass" placeholder="请输入密码">
         </div>
         <div id="error_box"><br></div>
         <div class="input_box">
             <button id="login" onclick="myLogin()">Login </button>
         </div>
</div>
{% endblock %}

     

    注册页：

    {% extends 'base.html'%}
{% block title %}
注册
{% endblock %}
{% block head %}
<link rel="stylesheet" type="text/css"  href="{{url_for('static',filename='css/register.css') }}">
    <script src="{{url_for('static',filename='js/register.js') }}"></script>
{% endblock %}
{% block main %}
    <div class="box">
        <a class="one" href="{{url_for('login')}}">登录</a>
         &nbsp;<b>·</b>&nbsp;
        <a class="one" href="{{url_for('register')}}">注册</a>
         <div class="input_box">
            &nbsp;&nbsp; 用户名：<input type="text" id="uname" placeholder="请设置用户名">
         </div>
        <div class="input_box">
             &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;昵称：<input type="text" id="unumber" placeholder="请输入昵称" >
         </div>
         <div class="input_box">
            密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码：<input type="password" id="upass" placeholder="请设置登录密码">
         </div>
        <div class="input_box">
             确定密码：<input type="password" id="uupass" placeholder="请再次输入登录密码">
         </div>
         <div id="error_box"><br></div>
         <div class="input_box">
             <button id="register" onclick="check()">register </button>
         </div>
    </div>
{% endblock %}

     

     

转载于:https://www.cnblogs.com/lqx12/p/7798608.html

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值