css 文件没有出现在我的实时 github 页面应用程序中

Question

我在 github 页面上托管我的 Flask 应用程序。 index.html 文件出现在我的网页上，但是 css 和与之关联的 js 由于某种原因没有加载。这是什么原因？

我的索引文件：

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

<head>

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="">
  <meta name="author" content="">

  <title>Scrolling Nav - Start Bootstrap Template</title>

  <!-- Bootstrap core CSS -->
  <link href="/static/static2/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">

  <!-- Custom styles for this template -->
  <link href="/static/static2/css/scrolling-nav.css" rel="stylesheet">

</head>

<body id="page-top">

  <!-- Navigation -->
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top" id="mainNav">
    <div class="container">
      <a class="navbar-brand js-scroll-trigger" href="#page-top">Stock Guru</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarResponsive">
        <ul class="navbar-nav ml-auto">
          <li class="nav-item">
            <a class="nav-link js-scroll-trigger" href="#about">About</a>
          </li>
          <li class="nav-item">
            <a class="nav-link js-scroll-trigger" href="#services">Prediction</a>
          </li>
          <li class="nav-item">
            <a class="nav-link js-scroll-trigger" href="#contact">Graph</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

  <header class="bg-primary text-white">
    <div class="container text-center">
      <h1>Welcome to my stock price predictor!</h1>
      <p class="lead"> Where I use machine learning to train data sets in an attempt to predict stock prices</p>
    </div>
  </header>

  <section id="about">
    <div class="container">
      <div class="row">
        <div class="col-lg-8 mx-auto">
          <h2>About this program</h2>
          <p class="lead">The way this program works is by taking a large data set of previous stock prices and training off of them. Once trained, another data set is fed to the program; The testing data set. This testing data is fed through a linear regression model and spits out an output; The predicted price. </p>
          <ul>
            <li>Clickable nav links that smooth scroll to page sections</li>
            <li>Responsive behavior when clicking nav links perfect for a one page website</li>
            <li>Bootstrap's scrollspy feature which highlights which section of the page you're on in the navbar</li>
            <li>Minimal custom CSS so you are free to explore your own unique design options</li>
          </ul>
        </div>
      </div>
    </div>
  </section>

  <section id="services" class="bg-light">
    <div class="container">
      <div class="row">
        <div class="col-lg-8 mx-auto">
          <h2>Here is the prediction for Tesla stock price</h2>
          <p class="lead">Stock prediction: {{variable}}</p>
        </div>
      </div>
    </div>
  </section>

  <section id="contact">
    <div class="container">
      <div class="row">
        <div class="col-lg-8 mx-auto">
          <h2>Graph</h2>
          <p class="lead"> {{image}}
            <img src="/static/images/plot.png" style = "width: 600px; height: 600px"> <!-- this part diplays by plot-->

          </p>
        </div>
      </div>
    </div>
  </section>

  <!-- Footer -->
  <footer class="py-5 bg-dark">
    <div class="container">
      <p class="m-0 text-center text-white">Copyright &copy; Your Website 2019</p>
    </div>
    <!-- /.container -->
  </footer>

  <!-- Bootstrap core JavaScript -->
  <script src="/static/static2/vendor/jquery/jquery.min.js"></script>
  <script src="/static/static2/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>

  <!-- Plugin JavaScript -->
  <script src="/static/static2/vendor/jquery-easing/jquery.easing.min.js"></script>

  <!-- Custom JavaScript for this theme -->
  <script src="/static/static2/js/scrolling-nav.js"></script>

</body>

</html>

我的实时站点：https://amanpuranik.github.io/stock2/ 我的回购：https://github.com/amanpuranik/stock2

任何帮助将不胜感激

Answer 1

在使用 Whosebug 之前，您应该检查控制台以查找问题。在您的网站上，它声明无法加载您的所有 css 和 javascript 文件 404.

为什么你把 static/static2 放在你的链接中，它不在存储库中。考虑查看目录。

Answer 2

实际上您 link 访问 css 和 js 文件 "relatively"，但是，您给它们添加的前缀不正确。

1 - 绝对 link 示例：

<!-- Bootstrap core CSS -->
<link href="https://amanpuranik.github.io/stock2/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">

2 - 相对 link 示例：

<!-- Bootstrap core CSS -->
<link href="/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">

很简单，相对 link 是相对于当前页面的，因此第二个示例的相对 url 将映射到 https://amanpuranik.github.io/stock2/vendor/bootstrap/css/bootstrap.min.css

如果您提供来自 https://amanpuranik.github.io/stock2 url 的内容，并且您的目的是为任何现有文件创建 "relative" link，您必须知道它路径...如您在示例 2 中所见，您的 bootstrap.min.css 文件位于此处：/vendor/bootstrap/css/，一直到存储库的根目录。

所以最后，您的项目中没有 "/static/static2/" 这样的目录，从您的 link 中删除对这些目录的任何引用应该可以解决问题。

css 文件没有出现在我的实时 github 页面应用程序中

css files are not appearing on my live github pages application

css

host

github

flask