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

Posted 肥牛

tags:

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

  2. 登陆用url_for加载静态文件
    1. <script src="{{ url_for(\'static\',filename=\'js/login.js\') }}"></script>
    2. flask 从static文件夹开始寻找
    3. 可用于加载css, js, image文件
  3. 继承和扩展
    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 %}
  4. 首页、登录页、注册页都按上述步骤改写。

父模板：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>
        {% block title %}
        {% endblock %}
        Home</title>
    <link rel="stylesheet" href="{{ url_for(\'static\',filename=\'css/base.css\')}}">
    <script src="{{ url_for(\'static\',filename=\'js/base.js\') }}"></script>
     <base target="_blank" />
{% block head %}
{% endblock %}
</head>
<body id="myBody">

<nav class="nav">
    <ul>
        <img id="me" src="../static/images/me.gif">
        <a href="{{ url_for(\'home\') }}" style="font-size: 23px ">首页</a>
        <a href="">下载</a>
        <a href="">新闻</a>
        <a href="{{ url_for(\'question\') }}">发布问答</a>
        <a>♥</a>
        <div>
           <a href="{{ url_for(\'sign_in\') }}" style="margin-right: -10px">登录</a>
           <a href="{{ url_for(\'sign_up\') }}" >注册</a>
        </div>

        <img id="on_off" onclick="mySwitch()" src="../static/images/bulbon.gif" >
        <div>
{#           <button type="submit" ></button>#}
            <input type="image" src="../static/images/search.gif" onmousemove="this.src=\'../static/images/search.gif\'" />
           <input type="text" name="search"PLACEHOLDER="输入要搜索的内容">
        </div>

    </ul>
</nav>
{% block main %}
    <br class="br">
{% endblock %}

<div class="copyright">
    <a href="">联系我们·</a>
    <a href="">加入我们·</a>
    <a href="">品牌与徽标·</a>
    <a href="">帮助中心·</a>
    <a href="">合作伙伴</a>
    <br>
    <p>Copyright &copy; 2017. Created by <a href="#" target="_blank">niu</a></p>
</div>

</body>
</html>
.nav ul{
    width: 97.5%;
    background-color: lightblue;
    height: 38px;
    margin: 20px auto 0px auto;
        }
.nav ul a{
    float: left;
    width: 80px;
    height: 28px;
    line-height: 28px;
    background-color: lightblue;
    color: aliceblue;
    margin: 5px 8px;
    font-size: 16px;
    display: block;
    text-align: center;
    text-decoration: none;
}
#me{
    float:left;
    width: 50px;
    height: 45px;
}
.nav ul a:hover{
    width: 80px;
    height: 28px;
    line-height: 28px;
    border: 1px solid cadetblue;
    background: lightblue;
    font-weight: 600;
        }
#on_off{
    float: right;
    margin: -7px;
    margin-right: 15px;
    width: 50px;

        }
body{
    height: 100%;
    margin: 0;
    background-color: lavender;
}

/* === Copyright === */
.copyright {
    height: 50px;
    margin-bottom: 0px;
    position:absolute ;
    bottom: 0;
    width: 100%;
    text-align: center;
}
.copyright p, .copyright a {
  color: #828078;
  font-size: 12px;
  text-decoration: none;
  transition: color 0.3s ease-out;
}
.copyright p a:hover, .copyright a a:hover {
  color: #f2672e;
}

ul div input[type="text"]{
    float: right;
    margin: 8px auto;
    border-radius: 8px;
    width: 300px;
    height: 20px;
    border: 1px solid cadetblue;
}
ul div a{
    border: 1px dashed cadetblue;
}
ul div input[type="image"]{

    float: right;
    border-radius: 6px;
    height: 24px;
    margin: 7px 7px;
}

首页：

{% extends\'base.html\' %}
{% block title %}
    Home
{% endblock %}
{% block head %}
    <link rel="stylesheet" href="{{ url_for(\'static\',filename=\'css/shouye.css\')}}" type="text/css">
{% endblock %}
{% block main %}
<body>
<img id="pig" src="../static/images/pig.jpg">
</body>
{% endblock %}
</html>
#pig{

     width: 440px;
     height: 300px;
     position: relative;
     margin: 150px 460px;
 }

登录：

{% extends\'base.html\' %}
{% block title %}
    Login
{% endblock %}
{% block head %}
    <script src="{{ url_for(\'static\',filename=\'js/denglu1.js\') }}"></script>
    <link rel="stylesheet" href="{{ url_for(\'static\',filename=\'css/denglu1.css\')}}">

{% endblock %}
{% block main %}
<body>
  <div class="login">
    <h1>Login</h1>
    <form class="form" method="post" action="#">
      <p class="field">
        <input id="uname" type="text" name="login" placeholder="Username" required/>
        <i class="fa fa-user"><img src="../static/images/daohang1.jpg" width="44px" height="auto"></i>
      </p>
      <p class="field">
        <input id="upass" type="password" name="password" placeholder="Password" required/>
        <i class="fa fa-lock"><img src="../static/images/daohang1.jpg" width="44px" height="auto"></i>
      </p>
        <p class="submit"><input type="button" name="sent" value="Login" onclick="myLogin()"></p>

        <div id="error_box"><br></div>
    </form>
  </div>
</body>
{% endblock %}
</html>
/* === Form === */
.form {
  width: 100%;
}
.form .field {
  position: relative;
  margin: 0 50px;
}
.form .field i {
  top: 0px;
  position: absolute;
  height: 44px;
  width: 44px;

}

/* === Login styles === */
.login {
  position: relative;
  margin: 100px auto;
  width: 370px;
  height: 315px;
  background: moccasin;
  border-radius: 3px;
  min-height: 100%;
}
.login:before {
  content: \'\';
  position: absolute;
  top: -8px;
  right: -8px;
  bottom: -8px;
  left: -8px;
  z-index: -1;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
}
.login h1 {
  line-height: 55px;
  font-size: 45px;
  font-family:  \'华文彩云\';
  color: #fff;
  text-align: center;
  background: lightblue;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}
.login .submit {
  text-align: center;


}
.login p:first-child {
  margin-top: 30px;
}
.login p .remember {
  float: left;
}
.login p .remember label {
  color: #a7a599;
  font-size: 12px;
  cursor: pointer;
}
.login p .forgot {
  float: right;
  margin-right: 50px;
}
.login p .forgot a {
  color: #a7a599;
  font-size: 12px;
  text-decoration: none;
  font-style: italic;
  transition: all 0.3s ease-out;
}
.login p .forgot a:hover {
  color: #f2672e;
}

/*input style*/
/* === Input Form === */
::-webkit-input-placeholder {
  color: #ded9cf;
  font-family: \'Open Sans\';
}

:-moz-placeholder {
  color: #ded9cf !important;
  font-family: \'Open Sans\';
}

.form input[type=text], input[type=password] {
  font-family: \'Open Sans\', Calibri, Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  padding: 10px 15px 10px 55px;
  position: relative;
  width: 200px;
  height: 24px;
  color: #676056;
  border: none;
  background: #f7f3eb;
  color: #777;
  transition: color 0.3s ease-out;
}

.form input[type=text] {
  margin-bottom: 15px;
}

.form input[type=button] {
  margin-top: 15px;
  width: 270px;
  text-align: center;
  font-size: 14px;
  font-family: \'Open Sans\',sans-serif;
  font-weight: bold;
  padding: 12px 0;
  letter-spacing: 0;
  box-shadow: inset 0px 0px 0px 0px lightblue;
  color: #fff;
  background-color:lightblue;
  text-shadow: none;
  text-transform: uppercase;
  border: none;
  cursor: pointer;
  position: relative;
  margin-bottom: 20px;
  -webkit-animation: shadowFadeOut 0.4s;
  -moz-animation: shadowFadeOut 0.4s;
}

.form input[type=button]:hover, input[type=button]:focus {
  color: #fff;
  box-shadow: inset 0px 46px 0px 0px lightskyblue;
  -webkit-animation: shadowFade 0.4s;
  -moz-animation: shadowFade 0.4s;
}

/*continued styling for input */
.form input[type="checkbox"] {
  display: none;
}

注册：

{% extends\'base.html\' %}
{% block title %}
    register
{% endblock %}
    {% block head %}
    <link rel="stylesheet" href="{{ url_for(\'static\',filename=\'css/zhuce.css\')}}">
     <script src="{{ url_for(\'static\',filename=\'js/zhuce.js\') }}"></script>
{% endblock %}
{% block main %}
<body>
<div class="login">
    <h1>Register</h1>
    <form class="form" method="post" action="#">
        <h3>set username:</h3>
        <input id="uname" type="text" name="login" placeholder="Username" required/>
        <br>
        <h3>set password:</h3>
        <input id="upass1" type="password" name="password" placeholder="Password" required/>
        <br>
        <h3>repeat password:</h3>
         <input id="upass2" type="password" name="password" placeholder="Password again" required/>

        <p class="submit"><input type="button" name="sent" value="Register" onclick="myLogin()"></p>

        <div id="error_box"><br></div>
    </form>
  </div>
</body>
{% endblock %}
</html>
/* === Form === */
.form {
  width: 100%;
}
.form .field {
  position: relative;
  margin: 0 50px;
}


/* === Login styles === */
.login {
  position: relative;
  margin: 70px auto;
  width: 400px;
  height:450px;
  background: moccasin;
  border-radius: 3px;
}
.login:before {
  content: \'\';
  position: absolute;
  top: -8px;
  right: -8px;
  bottom: -8px;
  left: -8px;
  z-index: -1;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
}
.login h1 {
  line-height: 55px;
  font-size: 45px;
  font-family: \'华文彩云\';
  color: #fff;
  text-align: center;
  background: lightblue;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}
.login .submit {
  text-align: center;
}
.login p:first-child {
  margin-top: 30px;
}
.login p .remember {
  float: left;
}
.login p .remember label {
  color: #a7a599;
  font-size: 12px;
  cursor: pointer;
}
.login p .forgot {
  float: right;
  margin-right: 50px;
}
.login p .forgot a {
  color: #a7a599;
  font-size: 12px;
  text-decoration: none;
  font-style: italic;
  transition: all 0.3s ease-out;
}
.login p .forgot a:hover {
  color: #f2672e;
}

/*input style*/
/* === Input Form === */
::-webkit-input-placeholder {
  color: #ded9cf;
  font-family: \'Open Sans\';
}

:-moz-placeholder {
  color: #ded9cf !important;
  font-family: \'Open Sans\';
}

.form input[type=text], input[type=password] {
  font-family: \'Open Sans\', Calibri, Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  padding: 10px 15px 10px 55px;
  position: relative;
  width: 200px;
  height: 24px;
  color: #676056;
  border: none;
  background: #f7f3eb;
  color: #777;
  transition: color 0.3s ease-out;
}

.form input[type=text] {
  margin-bottom: 15px;
}

.form input[type=text]:focus,
.form input[type=password]:focus,
.form button[type=button]:focus {
  outline: none;
}

.form input[type=button] {
  margin-top: 15px;
  width: 270px;
  text-align: center;
  font-size: 14px;
  font-family: \'Open Sans\',sans-serif;
  font-weight: bold;

  padding: 12px 0;
  letter-spacing: 0;
  box-shadow: inset 0px 0px 0px 0px lightblue;
  color: #fff;
  background-color: lightblue;
  text-shadow: none;

  border: none;
  cursor: pointer;
  position: relative;
  margin-bottom: 20px;
  -webkit-animation: shadowFadeOut 0.4s;
  -moz-animation: shadowFadeOut 0.4s;
}

.form input[type=button]:hover, input[type=button]:focus {
  color: #fff;
  box-shadow: inset 0px 46px 0px 0px lightskyblue;
  -webkit-animation: shadowFade 0.4s;
  -moz-animation: shadowFade 0.4s;
}
/*continued styling for input */
.form input[type="checkbox"] {
  display: none;
}
.form h3,input[type="text"],input[type="password"]{
  margin-left: 60px;
}

 

以上是关于加载静态文件,父模板的继承和扩展的主要内容，如果未能解决你的问题，请参考以下文章

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

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

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

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

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

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