首页 > 其他 > 详细

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

时间:2017-11-03 19:55:10      阅读:240      评论:0      收藏:0      [点我收藏+]

  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. 首页、登录页、注册页都按上述步骤改写。

untitled

from flask import Flask,render_template

app = Flask(__name__)


@app.route(/)
def base():
    return render_template(base.html)

@app.route(/load/)
def load():
    return render_template(load.html)

@app.route(/register/)
def register():
    return render_template(register.html)

if __name__ == __main__:
    app.run()

base.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>
        {% block title %}{% endblock %}
        首页
    </title>

    <link rel="stylesheet" type="text/css" href="{{ url_for(‘static‘,filename=‘css/base.css‘) }}">
    <script src="{{ url_for(‘static‘,filename=‘js/base.js‘) }}"></script>
{% block head %}
{% endblock %}

</head>

<body id="myBody">

    <nav>
    <img src="http://p1.img.cctvpic.com/photoAlbum/page/performance/img/2013/8/27/1377583188891_732.jpg" width="800px"height="150px"><br>

        <img id="myOnOff" onclick="mySwitch()" src="http://www.runoob.com/images/pic_bulbon.gif" width="25px">

    <a href="http://www.sesamestreetchina.com.cn/">首页</a>
    <input type="text"name="search">
    <button type="submit">搜索</button>
    <a href="{{ url_for(‘login‘) }}">登录</a>
    <a href="{{ url_for(‘regist‘) }}">注册</a>
<img src="{{ url_for(‘static‘,filename=‘image/86x97sZ11K4.jpg‘) }}" alt="" width="50px">


</nav>

<div class="area">
{% block main %}
{% endblock %}

</div>

<footer>
    <div class="footer_box">
        Copyright@2017 个人版权,版权所有  作者:杨碧茜</div>
    </footer>


</body>
</html>

技术分享

技术分享

技术分享

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

原文:http://www.cnblogs.com/yybx/p/7779509.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!