标签：扩展 tle org html 静态 ace base href css
用url_for加载静态文件
<script src="{{ url_for(‘static‘,filename=‘js/login.js‘) }}"></script>
flask 从static文件夹开始寻找
可用于加载css, js, image文件
继承和扩展
把一些公共的代码放在父模板中，避免每个模板写同样的内容。base.html
子模板继承父模板
父模板提前定义好子模板可以实现一些自己需求的位置及名称。block
子模板中写代码实现自己的需求。block
{% block title %}登录{% endblock %}
首页、登录页、注册页都按上述步骤改写。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>{% block title %}{% endblock %}France </title> <link href="../static/base.css" rel="stylesheet" type="text/css"> <script src="../static/base.js"></script> {% block head %}{% endblock %} </head> <body class="bodycolor" id="myBody"> <div class="daohanglang" id="daohanglang"> <nav> <img class="turn_on_off" id="on_off" onclick="mySwitch()" src="{{ url_for(‘static‘,filename=‘image/on.jpg‘) }}" width="40px"> <a class="daohang" href="{{ url_for(‘base‘)}}">首页</a> <a class="daohang" href="">卢浮宫</a> <a class="daohang" href="">塞纳河</a> <a class="daohang" href="">埃菲尔铁塔</a> <a class="daohang" href="">香榭丽大道</a> <a class="daohang" href="">巴黎圣母院</a> <input class="sousuo" id="sousuo" type="text" placeholder="搜索" > <img onclick="chaZhao()" id="chazhao" src="{{ url_for(‘static‘,filename=‘image/on.jpg‘) }}" width="20px"> <a class="daohangright" href="{{ url_for(‘sign_in‘) }}" >登录</a> </nav> <HR align=center width=100% color=#c0c0c0 SIZE=1> </div> {% block main %}{% endblock %} <div class="foot-menu" id="dibudaohang"> <HR align=center width=100% color=#c0c0c0 SIZE=1> <nav> <a class="daohang" href="">法国历史</a> <a class="daohang" href="">法国地图</a> <a class="daohang" href="">旅行攻略</a> </nav> <p>版权@ linxx</p> </div> </body> </html>
sign_in.html
{% extends ‘base.html‘ %} {% block title %} 登陆 {% endblock %} {% block head %} <link href="{{ url_for(‘static‘,filename=‘zz.css‘) }}" rel="stylesheet" type="text/css"> <script src="../static/sign_in.js"></script> {% endblock %} {% block main %} <body bgcolor="#696969"> <div class="box"> <h2 class="title"> <div class="normal-title"> <a class="color" href="http://127.0.0.1:5000/login">登录</a> <b>|</b> <a class="color" href="http://127.0.0.1:5000/regiter">注册</a> </div> </h2> <div class="input-box" > <p></p> <p></p> <input id="name" type="text" placeholder="Name" > <p></p> </div> <div class="input_box"> <input id="pass" type="password" placeholder="Password"> <p></p> <a href="a">forget password -0-</a> <br> </div> <div id="error_box"><br></div> <div class="input_box"> <button onclick="myLogin()">Login</button> </div> </div> </body> {% endblock %}
sign_up.html
{% extends ‘base.html‘ %} {% block title %} 注册 {% endblock %} {% block head %} <link href="../static/zz.css" rel="stylesheet" type="text/css"> <script src="../static/sign_up.js"></script> {% endblock %} {% block main %} <body bgcolor="#696969"> <div class="box"> <h2 class="title"> <div class="normal-title"> <a class="color" href="http://127.0.0.1:5000/login">登录</a> <b>|</b> <a class="color" href="http://127.0.0.1:5000/regiter">注册</a> </div> </h2> <div class="input-box" > <p></p> <p></p> <input id="newname" type="text" placeholder="please enter user name"> <p></p> </div> <div class="input_box"> <input id="newpass" type="password" placeholder="Please enter your password"> <p></p> </div> <div class="input_box"> <input id="againpass" type="password" placeholder="Please enter your password again"> <p></p> </div> <div id="error_box"><br></div> <div class="input_box"> <button onclick="mySubmit()">Submit</button> </div> </div> </body> {% endblock %}
运行结果：
标签：扩展 tle org html 静态 ace base href css
原文地址：http://www.cnblogs.com/xxxiaoxiannv/p/7798257.html
