码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2017-11-03 20:24:38      阅读:131      评论:0      收藏:0      [点我收藏+]

标签:避免   _for   meta   oct   cli   登录   rman   code   个人版   


  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>

技术分享

技术分享

技术分享

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

标签:避免   _for   meta   oct   cli   登录   rman   code   个人版   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!