加载静态文件,父模板的继承和扩展
Posted 爱斯基摩人
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了加载静态文件,父模板的继承和扩展相关的知识,希望对你有一定的参考价值。
用url_for加载静态文件
- <script src="{{ url_for(\'static\',filename=\'js/login.js\') }}"></script>
- flask 从static文件夹开始寻找
- 可用于加载css, js, image文件
继承和扩展
- 把一些公共的代码放在父模板中,避免每个模板写同样的内容。base.html
- 子模板继承父模板
- {% extends \'base.html’ %}
- 父模板提前定义好子模板可以实现一些自己需求的位置及名称。block
- <title>{% block title %}{% endblock %}-MIS问答平台</title>
- {% block head %}{% endblock %}
- {% block main %}{% endblock %}
- 子模板中写代码实现自己的需求。block
- {% block title %}登录{% endblock %}
首页、登录页、注册页都按上述步骤改写
py
from flask import Flask,render_template
app = Flask(__name__)
@app.route(\'/\')
def danghangye():
return render_template(\'danghangye.html\')
@app.route(\'/login/\')
def login():
return render_template(\'login.html\')
@app.route(\'/base/\')
def base():
return render_template(\'base.html\')
@app.route(\'/register/\')
def register():
return render_template(\'register.html\')
if __name__ == \'__main__\':
app.run(debug=True)
导航页
<!DOCTYPE html> <html lang="en"> <head> {% block head %}{% endblock %} <meta charset="UTF-8"> <title>{% block title %}{% endblock %}首页</title> <nav style="background-color: slategray"> <img src="http://cdn2.jianshu.io/assets/web/logo-58fd04f6f0de908401aa561cda6a0688.png" width="40px"> <link rel="stylesheet" href="{{url_for(\'static\',filename=\'css/loginMy.css\')}}"> <img src="{{url_for(\'static\',filename=\'image/yezi.jpg\')}}" alt="wo" width="50px"> <a href="{{url_for(\'login\')}}">login</a> <a href="{{url_for(\'register\')}}">register</a> <a href="{{url_for(\'base\')}}">base</a> <img id="myOnOff" onclick="mySwitch()" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1509532539555&di=5c7e5df90fa122e5a6dcae2de5fb45d5&imgtype=0&src=http%3A%2F%2Fwww.jbhdq.com%2Fuploadfile%2F2016%2F0617%2F20160617103213932.jpg" width="40px"> </nav>
登陆
{% extends\'danghangye.html\' %} {% block title %}欢迎来到登录界面,请登录{% endblock %} {% block head %} <script type="text/javascript" src="../static/js/cao.js"></script> <link rel="stylesheet" href="../static/css/font-awesome.min.css"/> <link rel="stylesheet" href="../static/css/loginMy.css"/> <style> html,body{width:100%;} </style> {% endblock %} {% block main %} <div id="container" style="width: 300px;margin-left: auto;margin-right: auto"> <div id="header"><h2 align="center" style="color: azure">登陆界面</h2></div> <div id="content"> <p align="center"><input id="uname" type="text" name="user" placeholder="请输入账号"> </p> <p align="center"><input id="upass" type="password" name="psw" placeholder="请输入密码"></p> <br> <div id="error_box"><br> </div> <br> <input type="checkbox" value="true" width="30px">记住密码 <br> <p align="center"><button onclick="fnLogin()">登录</button></p> <a href="http://localhost:63342/untitled/templates/register.html?_ijt=l785tte8f1v8n30nbrmi0bkp7"><p align="center" style="background-color: darkgrey"><button>注册</button></p></a>     </div> </div> {% endblock %}
注册
{% extends\'danghangye.html\' %} {% block title %} 欢迎来到注册界面{% endblock %} {% block head %} <script type="text/javascript" src="../static/js/cao.js"></script>{% endblock %} {% block main %} <body> <div id="container" style="width: 300px;margin-left: auto;margin-right: auto"> <div id="header" style="background-color: darkorange"><h2 align="center">注册</h2></div> <div id="content"> <p align="center">用户名:<input id="uname" type="text" name="user" placeholder="请输入账号"> </p> <p align="center"> 密码 :<input id="upass" type="password" name="psw" placeholder="请输入密码"></p> <p align="center">密码 :<input id="upass2" type="password" name="psw2" placeholder="请再次输入密码"></p> <br> <div id="error_box"><br> </div> <br> <input type="checkbox" value="true">记住密码 <br> <p align="center"><button onclick="fnLogin()">注册</button></p>     </div> <p id="meto">中国标准时间</p> <script>document.getElementById("meto").innerHTML = Date()</script> </div> </body> </html> {% endblock %}
以上是关于加载静态文件,父模板的继承和扩展的主要内容,如果未能解决你的问题,请参考以下文章