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

用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>
<head><meta charset="utf-8"><title>base</title><link rel="stylesheet" type="text/css" href="../aa/css/base.css"><link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css"><script src="../aa/js/base.js"></script>
</head>
<body id="mybody"><nav class="navbar navbar-inverse" role="navigation"><div class="container-fluid" id="container"><div class="navbar-header"><a class="navbar-brand" href="#">首页</a></div><div><ul class="nav navbar-nav"><li><a href="#" onclick="">登录</a></li><li><a href="#" onclick="">注册</a></li><li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">更多 <b class="caret"></b></a><ul class="dropdown-menu"><li><a href="#">收藏</a></li><li><a href="#">分享</a></li><li><a href="#">搜索</a></li><li class="divider"></li><li><a href="#">点赞</a></li></ul></li></ul></div><div style="float: right"><img id="myonoff" onclick="mySwitch()" src="https://ps.ssl.qhimg.com/sdmt/119_135_100/t01ebad6510c93738fc.gif" style="width:50px" ></div><div><input type="text" name="user" id="user" placeholder="请输入搜索关键词"><input type="button" value="搜索" class="btn btn-success" onclick=""></div></div>
</nav>
function mySwitch() {var oBody = document.getElementById("mybody");var oOnoff = document.getElementById("myonoff");if (oOnoff.src.match("t01ebad6510c93738fc")) {oOnoff.src = "https://ps.ssl.qhimg.com/sdmt/119_135_100/t01ebad6510c93738fc.gif";oBody.style.background = "black";oBody.style.color = "yellow"} else {oOnoff.src = "https://ps.ssl.qhimg.com/sdmt/119_135_100/t01ebad6510c93738fc.gif";oBody.style.background = "white";oBody.style.color = "black"}
}img {width: 200px;
}
#container {background: lightsteelblue;}div.sa {border-style: solid;border-width: 5px;border-color: gold;width: 400px;float: left;margin: 5px;
}div.sa img {width: 80%;heigh: aute;
}div.st {text-align: center;padding: 2px;
}div.sa:hover {border-style: solid;border-width: 5px;border-color: green;
}

from flask import Flask,render_templateapp = Flask(__name__)@app.route('/')
def base():return render_template('base.html')@app.route('/index/')
def index():return render_template('index.html')@app.route('/login/')
def login():return render_template('login.html')@app.route('/zhuce/')
def zhuce():return render_template('zhuce.html')if __name__ == '__main__':app.run(debug=True）

转载于:https://www.cnblogs.com/xiepingjian/p/7805181.html

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/454118.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！