django静态文件有时不服务

时间：2017-11-03 16:27:35

标签： python django django-staticfiles static-files

亲爱的Stackoverflow社区。我有一段时间在我的Django项目开发期间一直在努力处理我的静态文件。问题主要是我的样式表有时工作，有时不工作。示例 - 我的base.html的样式表base_style.css总是加载，但当我为home.html添加样式表时，我通过jinja模板标签加载它有时可以工作，有时不工作，同样适用于我的其他观点。

使用python3和Django 1.11.5

这是我的设置文件（静态）= 

STATIC_URL = '/static/'

STATICFILES_DIRS = [ os.path.join(BASE_DIR, "static"),

]

STATIC_ROOT = os.path.join(os.path.dirname(BASE_DIR), "static_cdn")


MEDIA_URL = '/media/'

MEDIA_ROOT = os.path.join(os.path.dirname(BASE_DIR), "media_cdn")

这是我的模板Base.html = 

    {% load static %}

    <html>
        <head>
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link rel="apple-touch-icon" sizes="180x180" href="{% static 'img/favicons/apple-touch-icon.png' %}">
    <link rel="icon" type="image/png" sizes="32x32" href="{% static 'img/favicons/favicon-32x32.png' %}">
    <link rel="icon" type="image/png" sizes="16x16" href="{% static 'img/favicons/favicon-16x16.png' %}">
    <link rel="manifest" href="{% static 'img/favicons/manifest.json' %}">
    <link rel="mask-icon" href="{% static 'img/favicons/safari-pinned-tab.svg' %}" color="#5bbad5">
    <meta name="theme-color" content="#ffffff">


      <title>Leaf</title>


        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">

    <link href="https://fonts.googleapis.com/css?family=Roboto:100" rel="stylesheet">

        <link rel="stylesheet" href="{% static 'mainapp/base_style.css' %}" type="text/css" />

    </head>

    <body>  



    <!-- NAVBAR -->

  <div class="container">
    <nav class="navbar navbar-expand-lg navbar-light navbar-custom text-uppercase">

    <img src="{% static 'img/logo.png' %}" width="55" height="75" alt="">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>


  <div class="collapse navbar-collapse justify-content-stretch" id="navbarSupportedContent">
    <ul class="navbar-nav ml-auto">

      <li class="nav-item">
        <a class="nav-link" href="{% url 'home' %}">Hem<span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item ">
        <a class="nav-link py-md-2" href="{% url 'list' %}">Blog</a>
      </li>
      <li class="nav-item ">
        <a class="nav-link" href="#">Story</a>
      </li>
      <li class="nav-item ">
        <a class="nav-link" href="#">Kontakt</a>
      </li>
    </ul>

  </div>
    </nav>
</div>


      {% block content %} 






    {% endblock content %}


    <!-- FOOTER -->



       <footer class="footer-bs">
        <div class="row">
          <div class="col-sm-6 footer-brand animated fadeInLeft">
              <h2>LEAF</h2>
                <p>Suspendisse hendrerit tellus laoreet luctus pharetra. Aliquam porttitor vitae orci nec ultricies. Curabitur vehicula, libero eget faucibus faucibus, purus erat eleifend enim, porta pellentesque ex mi ut sem.</p>
                <p>© 2017, All rights reserved</p>
            </div>
          <div class="col-sm-3 footer-nav animated fadeInUp">
              <h4>— Menu —</h4>

                <ul class="list">
                    <li><a href="#">About Us</a></li>
                    <li><a href="#">Contact</a></li>
                    <li><a href="#">Copyright</a></li>
                    <li><a href="#">Example</a></li>
                </ul>

            </div>
          <div class="col-sm-3 footer-social animated fadeInDown">
              <h4>Follow Us</h4>
              <ul>
                  <li><a href="#">Facebook</a></li>
                  <li><a href="#">Twitter</a></li>
                  <li><a href="#">Instagram</a></li>
                  <li><a href="#">RSS</a></li>
                </ul>
            </div>


        </div>

     </footer>














    <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.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>


    </body>





</html>

这是我的home.html文件= 

{% extends 'base.html' %} 


{% block content %} 

{% load static %}


<link rel="stylesheet" href="{% static 'css/style_home.css' %}" type="text/css" />[enter image description here][1]





<div class="block text-center my-block">
  <h1 class="header-1">Leaf</h1>
  <h4 class="header-4">A genuinly healthy all natural energy drink</h4> 

  <img src="{% static 'img/slide-one.jpg' %}" class="img-fluid" >
</div>




<!-- START CAROUSEL -->

<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
     <li data-target="#carouselExampleIndicators" data-slide-to="3"></li>
  </ol>

  <div class="carousel-inner" role="listbox">


    <div class="carousel-item myCarousel active">
        <img class="d-block img-fluid" src="{% static 'img/white-background.gif' %}" alt="First slide" style="max-height: 300px; width: 100%; display: block; ">
      <div class="carousel-caption">
        <img class="img-circle img-fluid" src="{% static 'img/Man-face-one.jpeg' %}" >
        <h3 class="review-caption">"I love how it tastes so fresh"</h3>
        <p class="name-caption">Mathias</p>
      </div>
    </div>

    <div class="carousel-item myCarousel">
        <img class="d-block img-fluid" src="{% static 'img/white-background.gif' %}" alt="Second slide" style="max-height: 300px; width: 100%; display: block; ">
      <div class="carousel-caption">
        <img class="img-circle img-fluid" src="{% static 'img/Man-face-two.jpeg' %}" >
        <h3 class="review-caption">"This is the best ive drinken"</h3>
        <p class="name-caption">Eric</p>
      </div> 
    </div>


    <div class="carousel-item myCarousel">
        <img class="d-block img-fluid" src="{% static 'img/white-background.gif' %}" alt="Third slide" style="max-height: 300px; width: 100%; display: block; ">
        <div class="carousel-caption">
        <img class="img-circle img-fluid" src="{% static 'img/Woman-face-one.jpeg' %}" >
        <h3 class="review-caption">"I wish this product came out years ago!"</h3>
        <p class="name-caption">Rebecca</p>
      </div>
    </div>


    <div class="carousel-item myCarousel">
        <img class="d-block img-fluid" src="{% static 'img/white-background.gif' %}" alt="Fourth slide" style="max-height: 300px; width: 100%; display: block; ">
      <div class="carousel-caption">
        <img class="img-circle img-fluid" src="{% static 'img/Man-face-three.jpeg' %}" >
        <h3 class="review-caption">"I Which i could drink it all the time"</h3>
        <p class="name-caption">Jake</p>
      </div>
    </div>


    <div class="carousel-item myCarousel">
      <img class="d-block img-fluid" src="{% static 'img/white-background.gif' %}" alt="Fourth slide" style="max-height: 300px; width: 100%; display: block; ">
      <div class="carousel-caption">
        <img class="img-circle img-fluid" src="{% static 'img/Woman-face-two.jpeg' %}" >
        <h3 class="review-caption">"I Which i could drink it all the time"</h3>
        <p class="name-caption">Anna</p>
      </div>
    </div>
  </div>



  <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

<!-- END CAROUSEL -->




<div class="container">
    <div class="row">
        <div class="col">
            <img src="{% static 'img/single-can.png' %}" alt="Leaf" class="img-fluid">
        </div>


        <div class="col">

      <div class="myText" align="center">

                <h1>Leaf</h1>
                <p>"En Genuint Hälsosam, Helt Naturlig Energidryck"</p>

                <button type="button" class="btn btn-outline-success">Mer info</button>
     </div>

        </div>
    </div>
</div>



<div class="container-fluid">
  <div class="row align-items-center" style="margin-left: 110px;">
    <div class="col">
       <img src="{% static 'img/middle-section-1.jpg' %}" class="img-fluid" style="max-height: 200px; width: auto;" />
    </div>

    <div class="col">
      <img src="{% static 'img/middle-section-3.png' %}" class="img-fluid" style="max-height: 170px; width: auto;" />

    </div>

    <div class="col">
      <img src="{% static 'img/middle-section-2.png' %}" class="img-fluid" style="max-height: 155px; width: auto;" />
    </div>
  </div>
</div> 


















{% endblock content %}

Folder Structure!

（试图在这里包含我的文件夹结构图片）

我真的希望有人能够帮助我，这是我在这里发表的第一篇文章，我对编码很新。

0 个答案:

没有答案
相关问题
最新问题