Bootstrap / css / js会在一个模板上加载,但不会在另一个模板上加载-两个模板完全相同。烧瓶

我正在使用jinja2和flask,带有bootstrap / js模板。我有一个base.html,其中index.htmlregister.htmllogin.htmlmy_profile.html都成功地从那里扩展了。

但是,我还有一个channel.html-这也扩展了base.html,但是CSS / JS拒绝在此页面上呈现。即使我将register.html中的HTML粘贴到channel.html中并发送了相同的上下文,该页面仍然拒绝加载其CSS / JS,并且我得到了准系统HTML页面...

如果我从配置文件中删除“扩展自”和“阻止内容”,则页面将呈现-但显然没有CSS / base.html包装页面。如果删除宏,然后仅插入一个简单的<h1>hello</h1>标签,则该页面仍拒绝加载CSS / JS。它似乎挂起,Chrome中显示“正在等待develepment-url.co ...”。

本质上,在此页面上,{%扩展了'base.html'%}导致加载CSS JS加载时出现问题,但它可以在register.htmllogin.html等上工作。

更新:

我可以看到,该应用正在channel.html上投放

INFO:werkzeug:127.0.0.1 - - [08/Nov/2019 12:11:42] "GET /channel/static/vendor/perfect-scrollbar/perfect-scrollbar.js HTTP/1.1" 404 -

代替

INFO:werkzeug:127.0.0.1 - - [08/Nov/2019 12:11:42] "GET static/vendor/perfect-scrollbar/perfect-scrollbar.js HTTP/1.1" 404 -

但是我不明白为什么。

Routes.py

@app.route('/channel/<username>')
@login_required
def channel(username):
    user = User.query.filter_by(username=username).first()
    return render_template('channel.html',user=user)

Channel.html -不呈现

{% extends "base.html" %}
{% block content %}
{% from 'signal_table.html' import signal_table with context %}
  <div class="page-content--bgf7">
    <section class="p-t-2>
    <h2>{{ user.username }} <a href="{{ url_for('follow',username=user.username) }}" role="button" class="btn btn-sm btn-outline-success">Follow</a>
        </h2>
    {{signal_table(user)}}
    </secdion>
    </div>
{% endblock %}

login.html -确实呈现

<!DOCTYPE html>
<html lang="en">
{% extends "base.html" %}
{% block content %}
<body class="animsition">
    <div class="page-wrapper">
        <div class="page-content--bge5">
            <div class="container">
                <div class="login-wrap">
                    <div class="login-content">
                        <div class="login-logo">
                            <a href="#">
                                <img src="static/images/icon/signally.png" alt="CoolAdmin" width=15% class="img-fluid rounded-circle">
                            </a>
                        </div>
                        <div class="login-form">
                            <form action="" method="post">
                              {{ form.hidden_tag() }}
                                <div class="form-group">
                                    <label display='None'>{{form.username.label}}</label>
                                    {{form.username(class_='au-input au-input--full',placeholder='username')}}

                                </div>
                                <div class="form-group">
                                    <label>{{form.password.label}}</label>
                                    {{form.password(class_='au-input au-input--full',placeholder='Password')}}
                                </div>
                                <div class="login-checkbox">
                                  <p>{{ form.remember_me() }} {{ form.remember_me.label }}</p>
                                    <!-- <label>
                                        <a href="#">Forgotten Password?</a>
                                    </label> -->
                                </div>

                                <button class="au-btn au-btn--block au-btn--green m-b-20" type="submit">submit</button>
                            </form>
                            <div class="register-link">
                                <p>
                                    Don't you have account?
                                    <a href="{{ url_for('register') }}">Sign Up Here</a>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
{% endblock %}

Base.html

<!DOCTYPE html>
<html lang="en">

<head>
    <!-- Required meta tags-->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
    <meta name="description" content="au theme template">
    <meta name="author" content="Hau Nguyen">
    <meta name="keywords" content="au theme template">

    <!-- Title Page-->
    <title>Dashboard 3</title>

    <!-- Fontfaces CSS-->
    <link href="static/css/font-face.css" rel="stylesheet" media="all">
    <link href="static/vendor/font-awesome-4.7/css/font-awesome.min.css" rel="stylesheet" media="all">
    <link href="static/vendor/font-awesome-5/css/fontawesome-all.min.css" rel="stylesheet" media="all">
    <link href="static/vendor/mdi-font/css/material-design-iconic-font.min.css" rel="stylesheet" media="all">

    <!-- Bootstrap CSS-->
    <link href="static/vendor/bootstrap-4.1/bootstrap.min.css" rel="stylesheet" media="all">

    <!-- static/vendor CSS-->
    <link href="static/vendor/animsition/animsition.min.css" rel="stylesheet" media="all">
    <link href="static/vendor/bootstrap-progressbar/bootstrap-progressbar-3.3.4.min.css" rel="stylesheet" media="all">
    <link href="static/vendor/wow/animate.css" rel="stylesheet" media="all">
    <link href="static/vendor/css-hamburgers/hamburgers.min.css" rel="stylesheet" media="all">
    <link href="static/vendor/slick/slick.css" rel="stylesheet" media="all">
    <link href="static/vendor/select2/select2.min.css" rel="stylesheet" media="all">
    <link href="static/vendor/perfect-scrollbar/perfect-scrollbar.css" rel="stylesheet" media="all">

    <!-- Main CSS-->
    <link href="static/css/theme.css" rel="stylesheet" media="all">

    <script src="http://localhost:35729/livereload.js"></script>

</head>

<body class="animsition">
  <div class="page-wrapper">
  <!-- HEADER DESKTOP-->
  <header class="header-desktop3 d-none d-lg-block">
      <div class="section__content section__content--p35">
          <div class="header3-wrap">
              <div class="header__logo account-item">
                <a href='/'>
                      <div class="image">
                        <img src="static/images/icon/signally.png" alt="signally.co" class='rounded-circle' >
                      </div>
                    </a><a href='/'>
                      <div class="ml-2">
                      <h2 class='text-light'>signally.co</h2>
                    </div></a>

              </div>
              <div class="header__tool">
                {% if current_user.is_anonymous %}
                  <div class="header-button-item">
                      <script async src="https://telegram.org/js/telegram-widget.js?7" data-telegram-login="zigdevbot" data-size="small" data-auth-url="telegram" data-request-access="write"></script>
                  </div>
                  <div class="header3-button-item">
                      <a href="{{ url_for('login') }}"><i class="fas fa-sign-in-alt mr-1"></i>login</a>
                  </div>
                      {% else %}

                  <div class="account-wrap">
                      <div class="account-item account-item--style2 clearfix js-item-menu">
                          <div class="image">
                              <img class="rounded-circle" src="{{current_user.photo_url}}" alt="{{current_user.username}}" />
                          </div>
                          <div class="content">
                              <a class="js-acc-btn" href="#">{{current_user.username}}</a>
                          </div>
                          <div class="account-dropdown js-dropdown">
                              <div class="info clearfix">
                                  <div class="image">
                                      <a href="#">
                                          <img class="rounded-circle" src="{{current_user.photo_url}}" alt="{{current_user.username}}" />
                                      </a>
                                  </div>
                                  <div class="content">
                                      <h5 class="name">
                                          <a href="{{ url_for('channel',username=current_user.username) }}">{{current_user.username}}</a>
                                      </h5>
                                      <span class="email">BINANCE NOT SETUP</span>
                                  </div>
                              </div>
                              <div class="account-dropdown__body">
                                  <div class="account-dropdown__item">
                                      <a href="{{ url_for('channel',username=current_user.username) }}">
                                          <i class="zmdi zmdi-account"></i>My Channel</a>
                                  </div>
                                  <div class="account-dropdown__item">
                                      <a href="{{  url_for('my_profile') }}">
                                          <i class="zmdi zmdi-settings"></i>My Profile</a>
                                  </div>
                              </div>
                              <div class="account-dropdown__footer">
                                  <a href="{{ url_for('logout') }}">
                                      <i class="zmdi zmdi-power"></i>Logout</a>
                              </div>
                          </div>

                      </div>
                  </div>
                  {% endif %}
              </div>
          </div>
      </div>
  </header>
  <!-- END HEADER DESKTOP-->

  <!-- HEADER MOBILE-->
  <header class="header-mobile header-mobile-2 d-block d-lg-none">
      <div class="header-mobile__bar">
          <div class="container-fluid">
              <div class="header-mobile-inner account-item">
                  <a class="logo image rounded-circle" href="index.html">
                      <img src="static/images/icon/signally.png" alt="signally" />
                  </a>
                  <button class="hamburger hamburger--slider" type="button">
                      <span class="hamburger-box">
                          <span class="hamburger-inner"></span>
                      </span>
                  </button>
              </div>
          </div>
      </div>
  </header>
  <div class="sub-header-mobile-2 d-block d-lg-none">
      <div class="header__tool">
        {% if current_user.is_anonymous %}
          <div class="header-button-item">
              <script async src="https://telegram.org/js/telegram-widget.js?7" data-telegram-login="zigdevbot" data-size="small" data-auth-url="telegram" data-request-access="write"></script>
          </div>
          <div class="header-button-item">
              <button class='btn btn-primary btn-small'>login</button>
          </div>
              {% else %}
              <div class="account-wrap">
                  <div class="account-item account-item--style2 clearfix js-item-menu">
                      <div class="image">
                          <img class="rounded-circle" src="{{current_user.photo_url}}" alt="{{current_user.username}}" />
                      </div>
                      <div class="content">
                          <a class="js-acc-btn" href="#">{{current_user.username}}</a>
                      </div>
                      <div class="account-dropdown js-dropdown">
                          <div class="info clearfix">
                              <div class="image">
                                  <a href="#">
                                      <img class="rounded-circle" src="{{current_user.photo_url}}" alt="{{current_user.username}}" />
                                  </a>
                              </div>
                              <div class="content">
                                  <h5 class="name">
                                      <a href="{{ url_for('channel',username=current_user.username) }}">{{current_user.username}}</a>
                                  </h5>
                                  <span class="email">BINANCE NOT SETUP</span>
                              </div>
                          </div>
                          <div class="account-dropdown__body">
                              <div class="account-dropdown__item">
                                  <a href="{{ url_for('channel',username=current_user.username) }}">
                                      <i class="zmdi zmdi-account"></i>My Channel</a>
                              </div>
                              <div class="account-dropdown__item">
                                  <a href="{{  url_for('my_profile') }}">
                                      <i class="zmdi zmdi-settings"></i>My Profile</a>
                              </div>
                          </div>
                          <div class="account-dropdown__footer">
                              <a href="{{ url_for('logout') }}">
                                  <i class="zmdi zmdi-power"></i>Logout</a>
                          </div>
                      </div>

                  </div>
              </div>
              {% endif %}
      </div>
  </div>
  <!-- END HEADER MOBILE -->

  <!-- PAGE CONTENT-->

        {% block content %}{% endblock %}
      </div>

        <!-- Jquery JS-->
        <script src="static/vendor/jquery-3.2.1.min.js"></script>
        <!-- Bootstrap JS-->
        <script src="static/vendor/bootstrap-4.1/popper.min.js"></script>
        <script src="static/vendor/bootstrap-4.1/bootstrap.min.js"></script>
        <!-- static/vendor JS       -->
        <script src="static/vendor/slick/slick.min.js">
        </script>
        <script src="static/vendor/wow/wow.min.js"></script>
        <script src="static/vendor/animsition/animsition.min.js"></script>
        <script src="static/vendor/bootstrap-progressbar/bootstrap-progressbar.min.js">
        </script>
        <script src="static/vendor/counter-up/jquery.waypoints.min.js"></script>
        <script src="static/vendor/counter-up/jquery.counterup.min.js">
        </script>
        <script src="static/vendor/circle-progress/circle-progress.min.js"></script>
        <script src="static/vendor/perfect-scrollbar/perfect-scrollbar.js"></script>
        <script src="static/vendor/chartjs/Chart.bundle.min.js"></script>
        <script src="static/vendor/select2/select2.min.js">
        </script>

        <!-- Main JS-->
        <script src="static/js/main.js"></script>

    </body>

    </html>
    <!-- end document-->
achenoffice82 回答:Bootstrap / css / js会在一个模板上加载,但不会在另一个模板上加载-两个模板完全相同。烧瓶

暂时没有好的解决方案,如果你有好的解决方案,请发邮件至:iooj@foxmail.com
本文链接:https://www.f2er.com/3139887.html

大家都在问