首页 > 解决方案 > 我的实时 github 页面应用程序中没有出现 css 文件

问题描述

我在 github 页面上托管我的烧瓶应用程序。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

任何帮助将非常感激

标签: cssgithubflaskhost

解决方案


在进入 StackOverflow 之前,您应该检查控制台以发现问题。在您的网站上,它指出无法加载您的所有 css 和 javascript 文件 404。

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


推荐阅读