时间戳

首页 > 解决方案 > CSS 和 JS 不再适用于我的 Flask 应用程序

javascript - CSS 和 JS 不再适用于我的 Flask 应用程序

问题描述

我使用 CSS 和 JS 为我不久前使用 Flask 制作的应用程序制作了一个导航栏，并且过去一切都正常工作。然而，几周前，我在 localhost 上运行了该应用程序，发现导航栏不再应有的显示。我不知道是什么突然导致了这个问题，因为我没有对以前有效的 CSS、JS 或 HTML 进行任何更改（我记得）。

我已经使用了 CTRL-SHIFT-R 和 CTRL-F5 之类的方法来重新加载页面并避免缓存问题，但它们似乎并没有真正起作用。当我在使用 CTRL-F5 或 CTRL-SHIFT-R 刷新页面后查看网络选项卡时，它告诉我它正在加载所有必要的文件，据我所知，但它并没有反映在实际页面上导航栏仍然坏了。当我在浏览器中输入 CSS 或 JS 文件路径时，它会正确转到文件。同样，我确信这些文件没有任何问题，因为它们曾经可以工作。

这就是我的导航栏 HTML 的样子：

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
      integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
      crossorigin="anonymous">
    <style>main {padding-top: 70px;}</style>
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/styles.css') }}">
</head>
<body>
    <header id="navbar">
        <nav class="navbar-container container">
            <a href="{{ url_for('main.index') }}" class="home-link">
                APP NAME
            </a>
            <button type="button" class="navbar-toggle" aria-label="Open navigation menu">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <div class="navbar-menu">
                <ul class="navbar-links">
                    <li class="navbar-item">
                        <a class="navbar-link" href="{{ url_for('auth.login') }}">Log in/Register</a>
                    </li>
                </ul>
            </div>
        </nav>
    </header>
    <script src="{{ url_for('static', filename='js/navbar.js') }}"></script>
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
    integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
    crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
    integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
    crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
    integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
    crossorigin="anonymous"></script>
</body>
</html>

基本 HTML：

<body>
{% block navbar %}
    {% include 'navbar.html' %}
{% endblock %}

{% block content %}{% endblock %}
</body>
</html>

部分索引页：

{% extends 'base.html' %}

{% block content %}
<header class="masthead">
    <div class="container d-flex h-100 align-items-center">
        <div class="mx-auto text-center">
            <h1 class="mx-auto my-0 text-uppercase">APP NAME</h1>
            <h2 class="mx-auto mt-2 mb-5">TEXT</h2>
            <a class="btn-lg btn-danger" href="{{ url_for('auth.register') }}">Register for free!</a>
        </div>
    </div>
</header>

以下是相关文件的粘贴：

https://pastebin.com/gRmGKAQE - 我的导航栏的 HTML

https://pastebin.com/sVBu​​ZrcG - 索引页面 HTML

https://pastebin.com/PwYVZPed - 我的 styles.css 文件

https://pastebin.com/BQNHcRhi - 我的 navbar.js 文件

我希望这足够全面。

再次，我三重检查了所有文件路径是否正确，并且我的网络选项卡向我保证了以下内容的“200”状态代码：

非常感谢您对此问题的任何建议和解决方案。

标签： javascriptpythonhtmlcssflask

解决方案

几个月前，同样的事情发生在我身上。

我找到的解决方案是我最终使用了 flask_bootstrap 而不是直接引用引导样式表，这解决了我的问题。我强烈建议检查一下。

https://pythonhosted.org/Flask-Bootstrap/basic-usage.html#sample-application

推荐阅读