Question

我在桌面上打开了Slick-Carrousel包。当我在桌面上运行包时，它可以工作。但是当我将Slick复制并粘贴到我的Flask模板目录并修改我的控制器以加载索引文件时，所有链接都被破坏了。我也提取到我的程序的根目录，链接仍然被破坏。

我可以通过使用jsdeliver.net修复CSS链接来获得有限的功能，但我不知道如何链接字体类别中的所有不同文件类型，这些文件类型在控制台中不显示为404。

可在此处找到文件： http://www.jsdelivr.com/projects/jquery.slick

具体来说，如何链接gif，eot，svg，ttf和woff文件？

编辑：这是我的HTML

<!DOCTYPE html>
<html>
<head>
  <title>Slick Playground</title>
  <meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" href="./slick/slick.css">
  <link rel="stylesheet" type="text/css" href="./slick/slick-theme.css">
  <style type="text/css">
    html, body {
      margin: 0;
      padding: 0;
    }

    * {
      box-sizing: border-box;
    }

    .slider {
        width: 50%;
        margin: 100px auto;
    }

    .slick-slide {
      margin: 0px 20px;
    }

    .slick-slide img {
      width: 100%;
    }

    .slick-prev:before,
    .slick-next:before {
        color: black;
    }
  </style>
</head>
<body>

  <section class="regular slider">
    <div>
      <img src="http://placehold.it/350x300?text=1">
    </div>
    <div>
      <img src="http://placehold.it/350x300?text=2">
    </div>
    <div>
      <img src="http://placehold.it/350x300?text=3">
    </div>
    <div>
      <img src="http://placehold.it/350x300?text=4">
    </div>
    <div>
      <img src="http://placehold.it/350x300?text=5">
    </div>
    <div>
      <img src="http://placehold.it/350x300?text=6">
    </div>
  </section>

  <section class="center slider">
    <div>
      <img src="http://placehold.it/350x300?text=1">
    </div>
    <div>
      <img src="http://placehold.it/350x300?text=2">
    </div>
    <div>
      <img src="http://placehold.it/350x300?text=3">
    </div>
    <div>
      <img src="http://placehold.it/350x300?text=4">
    </div>
    <div>
      <img src="http://placehold.it/350x300?text=5">
    </div>
    <div>
      <img src="http://placehold.it/350x300?text=6">
    </div>
    <div>
      <img src="http://placehold.it/350x300?text=7">
    </div>
    <div>
      <img src="http://placehold.it/350x300?text=8">
    </div>
    <div>
      <img src="http://placehold.it/350x300?text=9">
    </div>
  </section>

  <section class="variable slider">
    <div>
      <img src="http://placehold.it/350x300?text=1">
    </div>
    <div>
      <img src="http://placehold.it/200x300?text=2">
    </div>
    <div>
      <img src="http://placehold.it/100x300?text=3">
    </div>
    <div>
      <img src="http://placehold.it/200x300?text=4">
    </div>
    <div>
      <img src="http://placehold.it/350x300?text=5">
    </div>
    <div>
      <img src="http://placehold.it/300x300?text=6">
    </div>
  </section>

  <script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
  <script src="./slick/slick.js" type="text/javascript" charset="utf-8"></script>
  <script type="text/javascript">
    $(document).on('ready', function() {
      $(".regular").slick({
        dots: true,
        infinite: true,
        slidesToShow: 3,
        slidesToScroll: 3
      });
      $(".center").slick({
        dots: true,
        infinite: true,
        centerMode: true,
        slidesToShow: 3,
        slidesToScroll: 3
      });
      $(".variable").slick({
        dots: true,
        infinite: true,
        variableWidth: true
      });
    });
  </script>

</body>
</html>

这是我的文件结构的截图：

修改：此帖子被标记为此问题的副本：Link to Flask static files with url_for

但我有一个不同的问题。我不是试图使用URL-for链接单个文件。我正在尝试链接整个目录，以便javascript可以找到它需要的所有文件。

Answer 1

问题是我需要写：

 <link rel="stylesheet" type="text/css" href="/static/slick/slick.css">

添加静态目录。 Flask文件需要进入静态目录，我需要在链接中反映这一变化。

光滑的转盘不在Flask中工作

1 个答案: