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

Posted 阿无文

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了加载静态文件,父模板的继承和扩展相关的知识，希望对你有一定的参考价值。

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.首页、登录页、注册页都按上述步骤改写

from flask import Flask,render_template

app = Flask(__name__)

@app.route(\'/\')
def base():
    return render_template(\'base.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>
<head lang="en">
    <meta charset="UTF-8">
    <title>{% block title %}首页{% endblock %}</title>
    <link href="{{ url_for(\'static\',filename=\'CSS/base.css\') }}" rel="stylesheet" type="text/css">
    <script src="{{ url_for(\'static\',filename=\'JScript/base.js\') }}"></script>
    {% block head %}{% endblock %}
</head>
<body id="mybody">
<nav class="meue">
    <div style="float: left;">
        <img src=" {{ url_for(\'static\',filename=\'image/smail.png\') }}" weight="60" height="60">
    </div>
    <div style="line-height:480%;">
        <img id="on_off" src="{{ url_for(\'static\',filename=\'image/on1.PNG\') }}" onclick="MySwitch()" width="30px" >
    </div>
    <div ><a href="{{ url_for(\'login\') }}">&nbsp;&nbsp;&nbsp;&nbsp;Login</a>♡<a href="{{ url_for(\'regist\') }}">&nbsp;&nbsp;&nbsp;&nbsp;Regist</a></div>
    <div style="line-height:340%;">|</div>
    <div>
        <a href="{{ url_for(\'base\') }}">Home</a>
        <a href="#">Images</a>
        <a href="#">Videos</a>
        <a href="#">Article</a>
        <a href="#">News</a>
        <a href="#">Others</a>
    </div>

</nav>

<div class="search">
    <input type="search" name="search" style="height:20px;width:300px">
    <button type="submit" ><img src="{{ url_for(\'static\',filename=\'image/search.png\') }}" width="14" height="14"></button>
</div>

{% block main %}
<div class="img">
    <div>
        <a href="#"><img src="{{ url_for(\'static\',filename=\'image/1.jpg\') }}" width="230" height="230"></a>
    </div>
    <div>
        <a href="#"><img src="{{ url_for(\'static\',filename=\'image/2.jpg\') }}" width="230" height="230"></a>
    </div>
</div>
{% endblock %}

<footer class="copyright">
    <p>Copyright ☺ All of the company</p>
</footer>
</body>
</html>
{% extends \'base.html\' %}

{% block title %}登录{% endblock %}

{% block head %}
    <link href="{{ url_for(\'static\',filename=\'CSS/login.css\') }}" rel="stylesheet" type="text/css">
    <script src="{{ url_for(\'static\',filename=\'JScript/login.js\') }}"></script>
{% endblock %}


{% block main %}
<div class="login">
    <div class="login-top">
        <h1>LOGIN FORM</h1>
        <form>
            <input id="uname" type="text" value="Username" onfocus="this.value = \'\';" onblur="if (this.value==\'\'){ this.value = \'Username\';}">
            <input id="upass" type="password" value="Password" onfocus="this.value = \'\';" onblur="if (this.value==\'\'){ this.value = \'Password\';}">
        </form>
        <div class="forgot">
            <input type="checkbox"><p>Keep me logged in</p>
            <a href="#">forgot Password</a>
        </div>
    </div>
    <div class="login-bottom">
        <div id="errorbox"></div><button type="submit" onclick="MyLogin()">Login</button>
    </div>
</div>
{% endblock %}
{% extends \'base.html\' %}

{% block title %}注册{% endblock %}

{% block head %}
    <link href="{{ url_for(\'static\',filename=\'CSS/regist.css\') }}" rel="stylesheet" type="text/css">
    <script src="{{ url_for(\'static\',filename=\'JScript/regist.js\') }}"></script>
{% endblock %}

{% block main %}
<div class="login">
    <div class="login-top">
        <h1>Register FORM</h1>
        <form>
            <input id="uname" type="text" value="Username" onfocus="this.value = \'\';" onblur="if (this.value==\'\'){ this.value = \'Username\';}">
            <input id="fupass" type="password" value="Password" onfocus="this.value = \'\';" onblur="if (this.value==\'\'){ this.value = \'Password\';}">
            <input id="supass" type="password" value="Password" onfocus="this.value = \'\';" onblur="if (this.value==\'\'){ this.value = \'Password\';}">
        </form>
    </div>
    <div class="login-bottom">
        <div id="errorbox"></div><button type="submit" onclick="MyRegister()">Register</button>
    </div>
</div>
{% endblock %}
html,body,div,h2,h3,p,a,nav {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
a{
    text-decoration:none;
}
.txt-rt{
    text-align:right;
}
.txt-lt{
    text-align:left;
}
.txt-center{
    text-align:center;
}
.pos-relative{
    position:relative;
}
.pos-absolute{
    position:absolute;
}
.vertical-base{
    vertical-align:baseline;
}
.vertical-top{
    vertical-align:top;
}
body {
    background-color: wheat;
    font-family: \'Candara\';
    font-size: 100%;
    margin-top:40px;
    margin-left:100px;
    margin-right:100px;
    margin-bottom:50px;
    text-align: center;
}
.meue{
    background-color: white;
    height:60px;
    background: rgba(0, 0, 0, 0);
}
.meue div{
    float:right;
    line-height:350%;
    margin: 0 auto;
    color:black;
}
.meue div a{
    margin-right:18px;
    color:black;
    font-family: Candara;
    font-size: 18px;
}
.meue a:hover{
    font-weight: bold;
}
.search{
    text-align: right;
}
.search input[type="search"]{
    border: solid 1px ;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    height: 20px;
}
.search button{
    border: none;
    background: transparent;
    height: 20px;
}
.img{
    align:center;
    width:485px;
    margin: 0 auto;
    padding: 100px 0px 0px 0px;
}
.img div{
    float: left;
    margin: 5px;
}
.img div img{
    border: solid 1px black;
}
.copyright {
    position: absolute;
    bottom: 0;
    width:85%;
    height:50px;
    text-align: center;
}
.copyright p {
    font-size: 16px;
    font-weight: 400;
    font-family: Candara;
}
a{
    text-decoration:none;
}
.txt-rt{
    text-align:right;
}
.txt-lt{
    text-align:left;
}
.txt-center{
    text-align:center;
}
.pos-relative{
    position:relative;
}
.pos-absolute{
    position:absolute;
}
.vertical-base{
    vertical-align:baseline;
}
.vertical-top{
    vertical-align:top;
}
.login {
    padding: 80px 0px 30px 0px;
    width: 35%;
    margin: 0 auto;
}
.login-top {
    background: #E1E1E1;
    border-radius: 25px 25px 0px 0px;
    -webkit-border-radius: 25px 25px 0px 0px;
    -moz-border-radius: 25px 25px 0px 0px;
    -o-border-radius: 25px 25px 0px 0px;
    padding: 30px 60px;
}
.login-top h1 {
    text-align: center;
    font-size: 30px;
    font-weight: 500;
    color:cadetblue;
    margin: 0px 0px 20px 0px;
    font-family: "Harrington";
}
.login-top input[type="text"] {
    outline: none;
    font-size: 15px;
    font-weight: 500;
    color: #818181;
    padding: 15px 20px;
    background: #CACACA;
    border: 1px solid #ccc;
    border-radius: 25px;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    -o-border-radius: 25px;
    margin: 0px 0px 12px 0px;
    width: 88%;
    -webkit-appearance: none;
}
.login-top input[type="password"] {
    outline: none;
    font-size: 15px;
    font-weight: 500;
    color: #818181;
    padding: 15px 20px;
    background: #ccc;
    border: 1px solid #ccc;
    border-radius: 25px;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    -o-border-radius: 25px;
    margin: 0px 0px 12px 0px;
    width: 88%;
    -webkit-appearance: none;
}
.forgot br {
    font-size: 13px;
    font-weight: 500;
    color: cadetblue;
    display: inline-block;
    padding: 0px 7px 0px 0px;
}
.login-bottom button {
    background: coral;
    color: #FFF;
    font-size: 17px;
    font-weight: 400;
    padding: 8px 7px;
    width: 21%;
    display: inline-block;
    cursor: pointer;
    border-radius: 6px;
    -webkit-border-radius: 19px;
    -moz-border-radius: 6px;
    -o-border-radius: 6px;
    margin: 0px 20px 0px 10px;
    outline: none;
    border: none;
}
.login-bottom button:hover {
    background: #818181;
    transition: 0.5s all;
    -webkit-transition: 0.5s all;
    -moz-transition: 0.5s all;
    -o-transition: 0.5s all;
}
.login-bottom div{
    color:#FFF;
    font-size: 13px;
    font-weight: 500;
    text-align: center;
    float:left;
    width:auto;
    padding:8px 8px;
}
.forgot {
    text-align: right;
}
.forgot input{
    float: left;
}
.forgot p{
    float: left;
    font-size: 13px;
    font-weight: 500;
    color: cadetblue;
}
.forgot a {
    font-size: 13px;
    font-weight: 500;
    color: cadetblue;
    display: inline-block;
    padding: 0px 15px 0px 0px;
}
.forgot a:hover {
    color: #818181;
}
.login-bottom {
    background: cadetblue;
    padding: 20px 65px;
    border-radius: 0px 0px 25px 25px;
    -webkit-border-radius: 0px 0px 25px 25px;
    -moz-border-radius: 0px 0px 25px 25px;
    -o-border-radius: 0px 0px 25px 25px;
    text-align: right;
    border-top: 2px solid coral;
}
a{
    text-decoration:none;
}
.txt-rt{
    text-align:right;
}
.txt-lt{
    text-align:left;
}
.txt-center{
    text-align:center;
}
.pos-relative{
    position:relative;
}
.pos-absolute{
    position:absolute;
}
.vertical-base{
    vertical-align:baseline;
}
.vertical-top{
    vertical-align:top;
}
body {
    font-family: \'Roboto\', sans-serif;
    font-size: 100%;
    background-color: wheat;
}
.login {
    padding: 80px 0px 30px 0px;
    width: 35%;
    margin: 0 auto;
}
.login-top {
    background: #E1E1E1;
    border-radius: 25px 25px 0px 0px;
    -webkit-border-radius: 25px 25px 0px 0px;
    -moz-border-radius: 25px 25px 0px 0px;
    -o-border-radius: 25px 25px 0px 0px;
    padding: 30px 60px;
}
.login-top h1 {
    text-align: center;
    font-size: 30px;
    font-weight: 500;
    color:cadetblue;
    margin: 0px 0px 20px 0px;
    font-family: "Harrington";
}
.login-top input[type="text"] {
    outline: none;
    font-size: 15px;
    font-weight: 500;
    color: #818181;
    padding: 15px 20px;
    background: #CACACA;
    border: 1px solid #ccc;
    border-radius: 25px;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    -o-border-radius: 25px;
    margin: 0px 0px 12px 0px;
    width: 88%;
    -webkit-appearance: none;
}
.login-top input[type="password"] {
    outline: none;
    font-size: 15px;
    font-weight: 500;
    color: #818181;
    padding: 15px 20px;
    background: #ccc;
    border: 1px solid #ccc;
    border-radius: 25px;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    -o-border-radius: 25px;
    margin: 0px 0px 12px 0px;
    width: 88%;
    -webkit-appearance: none;
}
.login-bottom button {
    background: coral;
    color: #FFF;
    font-size: 17px;
    font-weight: 400;
    padding: 8px 7px;
    width: 30%;
    display: inline-block;
    cursor: pointer;
    border-radius: 6px;
    -webkit-border-radius: 19px;
    -moz-border-radius: 6px;
    -o-border-radius: 6px;
    margin: 0px 20px 0px 10px;
    outline: none;
    border: none;
}
.login-bottom button:hover {
    background: #818181;
    transition: 0.5s all;
    -webkit-transition: 0.5s all;
    -moz-transition: 0.5s all;
    -o-transition: 0.5s all;
}
.login-bottom div{
    color:#FFF;
    font-size: 13px;
    font-weight: 500;
    text-align: center;
    float:left;
    width:auto;
    padding:8px 8px;
}
.login-bottom {
    background: cadetblue;
    padding: 20px 65px;
    border-radius: 0px 0px 25px 25px;
    -webkit-border-radius: 0px 0px 25px 25px;
    -moz-border-radius: 0px 0px 25px 25px;
    -o-border-radius: 0px 0px 25px 25px
以上是关于加载静态文件,父模板的继承和扩展的主要内容，如果未能解决你的问题，请参考以下文章
 

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


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


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


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


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


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