我正在使用jinja2和flask,带有bootstrap / js模板。我有一个base.html
,其中index.html
,register.html
,login.html
和my_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.html
和login.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-->