加载静态文件,父模板的继承和扩展
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 %}
- 首页、登录页、注册页都按上述步骤改写。
from flask import Flask,render_template app = Flask(__name__) @app.route(‘/‘) def index(): return render_template(‘index.html‘) @app.route("/login/") def login(): return render_template(‘login.html‘) @app.route(‘/regist/‘) def regist(): return render_template(‘regist.html‘) if __name__ == ‘__main__‘: app.run(debug=True)
<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/html"> <head> <meta charset="UTF-8"> <title> {% block title %}{% endblock %}首页</title> <link type="text/css" rel="stylesheet" href="{{ url_for(‘static‘,filename=‘css/index.css‘)}}"index href=""target="_blank"> {% block head %} {% endblock %} </head> <body> <nav> <img src="../static/image/1.jpg" alt="wo" width="30"height="50"> <input type="text"> <button type="submit">搜索</button> <a href="{{ url_for(‘index‘) }}">首页</a> <a href="http://127.0.0.1:5000/login">登录</a> <a href="{{ url_for(‘regist‘) }}">注册</a> <img src="{{ url_for(‘static‘,filename="../static/image/1.jpg")}}" width="30px"> <script>document.write(Date())</script> </nav> {% block main%} {% endblock %} <div class="area"> </div> <footer> <div class="footer_box"> [email protected] </div> </footer> </body> </html>
{% extends‘index.html‘ %} {% block title %}注册{% endblock %} {% block head %} <link rel="stylesheet" type="text/css" href="{{ url_for(‘static‘,filename=‘css/regist.css‘) }}"> <script src="{{ url_for(‘static‘,filename=‘js/regist.js‘) }}"></script> {% endblock %} {% block main%} <div class="box"> <h2>注册</h2> <div class="input_box"> 你的昵称 <input id="uname" type="text" placeholder="请输入你的昵称"> </div> <div class="input_box"> 密码: <input id="upass"type="password"placeholder="请输入密码"> </div> <div class="input_box"> 手机号:<input id="phonenumber" type="text"placeholder="请输入手机号"> </div> <div id="error_box"><br></div> <div class="input_box"> <button onclick="fnLogin()">确认注册</button> </div> </div>
{% extends‘index.html‘ %} {% block title %} 登录 {% endblock %} {% block head %} <link rel="stylesheet" type="text/css" href="{{ url_for(‘static‘,filename=‘css/login.css‘)}}"> <script sxc="{{ url_for(‘static‘,filename=‘js/login.js‘) }}"></script> {% endblock %} {% block main %} <div class="box"> <h2>登录</h2> <div class="input_box"> 用户名:<input id="username"type="text" placeholder="请输入用户名"> </div> <div class="input_box"> 密码:<input id="userpassworld" type="text" placeholder="请输入密码"> </div> <div id="error_box"><br></div> <div class="input_box"> <button onclick="fnLogin()">确认登录</button> </div> </div> {% endblock %}
以上是关于加载静态文件,父模板的继承和扩展的主要内容,如果未能解决你的问题,请参考以下文章