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

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(‘/login‘)
    def login():
        return render_template(‘login.html‘)
    
    @app.route(‘/regist‘)
    def register():
        return render_template(‘regist.html‘)
    
    @app.route(‘/base‘)
    def base():
        return render_template(‘base.html‘)
    
    @app.route(‘/‘)
    def index():
        return render_template(‘index.html‘)
    
    
    if __name__ == ‘__main__‘:
        app.run(debug=True)
    

      

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>{% block title%}父模板{% endblock %}</title>
        <script src="{{url_for(‘static‘,filename=‘js/base.js‘) }}" type="text/javascript"></script>
        <link href="{{ url_for(‘static‘ ,filename=‘css/base.css‘) }}"  rel="stylesheet" type="text/css">
        {% block head %}
        {% endblock %}
    
    
    
    
    </head>
    <body>
    <nav>
       <img src="https://gss2.bdstatic.com/-fo3dSag_xI4khGkpoWK1HF6hhy/baike/whfpf%3D180%2C140%2C50/sign=9f84efaedc2a60595245b25a4e0905a3/8718367adab44aede0f8bd83b81c8701a18bfb27.jpg">
    
    
        <input type="text"name="search">
        <button type="submit">搜索</button>
    
    <a href="{{ url_for(‘index‘) }}">首页</a>
    <a href="{{ url_for(‘login‘) }}">登陆</a>
    <a href="{{ url_for(‘regist‘) }}">注册</a>
    </nav>
           <img src="../static/images/lx2.png" alt="wo" width="30">
           <img src="{{ url_for(‘static‘,filename=‘images/lx2.png‘) }}" alt="wo" width="50">
           {% block main %} {% endblock %}
    
    
    
    <footer>
        <div class="footer_box">
             [email protected] 2017-2022 个人版权,版权所有
         </div>
     </footer>
    {% endblock %}
    

      

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>{% block title%}父模板{% endblock %}</title>
        <script src="{{url_for(‘static‘,filename=‘js/base.js‘) }}" type="text/javascript"></script>
        <link href="{{ url_for(‘static‘ ,filename=‘css/base.css‘) }}"  rel="stylesheet" type="text/css">
        {% block head %}
        {% endblock %}
    
    
    
    
    </head>
    <body>
    <nav>
       <img src="https://gss2.bdstatic.com/-fo3dSag_xI4khGkpoWK1HF6hhy/baike/whfpf%3D180%2C140%2C50/sign=9f84efaedc2a60595245b25a4e0905a3/8718367adab44aede0f8bd83b81c8701a18bfb27.jpg">
    
    
        <input type="text"name="search">
        <button type="submit">搜索</button>
    
    <a href="{{ url_for(‘index‘) }}">首页</a>
    <a href="{{ url_for(‘login‘) }}">登陆</a>
    <a href="{{ url_for(‘regist‘) }}">注册</a>
    </nav>
           <img src="../static/images/lx2.png" alt="wo" width="30">
           <img src="{{ url_for(‘static‘,filename=‘images/lx2.png‘) }}" alt="wo" width="50">
           {% block main %} {% endblock %}
    
    
    
    <footer>
        <div class="footer_box">
             [email protected] 2017-2022 个人版权,版权所有
         </div>
     </footer>
    {% endblock %}
    

      

    {% extends‘base.html‘ %}
    {% block title %}
        首页
    {% endblock %}
    {% block head %}
        <link rel="stylesheet" href="{{ url_for(‘static‘,filename=‘css/base.css‘) }}" type="text/css">
    {% endblock %}
    {% block main %}
    <body id="myBody">
    
    <nav>
        <img id="myOnOff" onclick="mySwitch()" src="https://www.runoob.com/images/pic_bulbon.gif" height="20" width="20px">
        <a href="https://www.baidu.com/">首页</a>
        <input type="text" name="search">
        <button type="submit">搜索</button>
        <a href="http://localhost:63342/my1/templates/login.html?_ijt=258mlfkqv5j4ogr05tb7rdj75i">登录</a>
        <a href="http://localhost:63342/my1/templates/zhuce.html?_ijt=vfohs6o03buojpcgd8i9m4991j">注册</a>
    </nav>
    
    <div>
        <p><span style="font-size: 40px;color: blue;font-family: ‘Consolas‘, ‘Deja Vu Sans Mono‘, ‘Bitstream Vera Sans Mono‘, monospace";>浩瀚星空</p>
    </div>
    
     <div>
            <div class="img">
                <a href="https://www.baidu.com/">
                    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1509806558937&di=e9f6b3da7e4525b5048761d321e7a334&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimage%2Fc0%253Dshijue1%252C0%252C0%252C294%252C40%2Fsign%3D9d0e654a05b30f242197e440a0fcbb36%2F43a7d933c895d1434bcc2a0879f082025aaf0767.jpg"></a>
                <div class="desc"><a href="https://www.baidu.com/">地球</a></div>
                </div>
    
             <div class="img">
                <a href="https://www.baidu.com/">
                  <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1509806558936&di=f4549e6b6f694583b5e01832ae57ff79&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimage%2Fc0%253Dshijue1%252C0%252C0%252C294%252C40%2Fsign%3D7e5fc0351bdfa9ece9235e540ab99d76%2F8b13632762d0f7031d0337f502fa513d2697c562.jpg"></a>
                <div class="desc"><a href="https://www.baidu.com/">星云</a></div>
                </div>
    
        <div class="img">
                <a href="https://www.baidu.com/">
                  <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1509806558935&di=01d805549265c8b439c92ed817f2664d&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimage%2Fc0%253Dshijue1%252C0%252C0%252C294%252C40%2Fsign%3D1fd11f0e9716fdfacc61ceaddce6e621%2Fae51f3deb48f8c542cd0210a30292df5e0fe7f90.jpg"></a>
                <div class="desc"><a href="https://www.baidu.com/">璀璨星空</a></div>
                </div>
    
           <div class="img">
                <a href="https://www.baidu.com/">
                 <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1509806558935&di=b77b1b7fb70e8474b8a317fd70ea71ce&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimage%2Fc0%253Dshijue1%252C0%252C0%252C294%252C40%2Fsign%3D2820c0958dd6277ffd1f3a7b40517545%2F9f2f070828381f304605d987a3014c086e06f084.jpg"></a>
                <div class="desc"><a href="https://www.baidu.com/">星轨</a></div>
                </div>
        </div>
         <br>
    
    
    
    {% endblock %}
    

      

    {% extends‘base.html‘ %}
    {% block title %}
        注册
    {% endblock %}
    {% block head %}
        <link rel="stylesheet" href="{{ url_for(‘static‘,filename=‘css/regist.css‘) }}" type="text/css">
        <script src="{{url_for(‘static‘,filename=‘js/regist.js‘) }}"></script>
    {% endblock %}
    {% block main %}
    
    <div class="bigbox">
          <div class="box">
              <h2>注册</h2>
    
           <div class="input_box">
               输入账户:<input id="umane"type="text"placeholder="请输入用户名">
           </div>
            <div class="input_box">
               输入密码:<input id="upass"type="password"placeholder="请输入密码">
           </div>
              <div class="input_box">
               再输密码:<input id="userpass1" type="password" placeholder="请再次输入密码">
        </div>
              <div id="error_box"><br></div>
              <div class="input_box">
                  <button onclick="myLogin()">注册</button>
    
              </div>
                   </div>
    
    {% endblock %}
    

      

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

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

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

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

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

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

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