css файлы не отображаются в моем приложении для просмотра страниц github - PullRequest
Новая
       15

css файлы не отображаются в моем приложении для просмотра страниц github

0 голосов
/ 29 марта 2020

Я размещаю свое приложение flask на странице 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

любая помощь будет высоко ценится

Ответы [ 2 ]

2 голосов
/ 29 марта 2020

Прежде чем перейти на StackOverflow, вы должны проверить консоль на наличие проблем. На вашем веб-сайте говорится, что не удалось загрузить все ваши файлы css и javascript 404.

Почему вы добавили static / static2 в свои ссылки, а не в репозиторий. Посмотрите на каталоги.

0 голосов
/ 30 марта 2020

На самом деле вы ссылаетесь на файлы css и js "относительно", однако вы неправильно указали их префикс.

1 - Пример абсолютной ссылки: 

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

2 - Пример относительной ссылки: 

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

Проще говоря, относительная ссылка относится к текущей странице, поэтому относительный URL второго примера будет отображаться в https://amanpuranik.github.io/stock2/vendor/bootstrap/css/bootstrap.min.css

Если вы обслуживаете контент с https://amanpuranik.github.io/stock2 url, и вы намерены создать «относительную» ссылку на любой существующий файл, вы должны знать его путь ... Как вы видите в примере 2, ваш bootstrap.min.css файл находится здесь: /vendor/bootstrap/css/, вниз к каталогу root вашего репозитория.

Итак, в конце концов, в вашем проекте нет таких каталогов, как "/static/static2/", удаляя ссылки на ссылки из ваших ссылок. должен решить проблему.

...