Question

我正在构建一个博客应用程序，但遇到了一个问题。

问题

Static Files 未从 static folder 加载。有些文件正在加载，但有些文件没有加载。

我做了什么？

urls.py

我还把 static url 放在 urls.py 中，它对我也不起作用。

urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)

settings.py

os.path.join(BASE_DIR, "static", "static")

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

]
STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'static_cdn')

my_template.html

    {% load static %}

   <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:400,600" />
    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>Next Level - Gallery</title>
    <!--
    Next Level CSS Template
    https://templatemo.com/tm-532-next-level
    -->
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:400,600" />



    <script src="{% static 'comments/all.min.css' %}"></script>

    <script src="{% static 'comments/bootstrap.min.css' %}"></script>

    <script src="{% static 'comments/templatemo-style.css' %}"></script>

      </head>
          <div class="row tm-welcome-row">
            <div class="col-12">
              <div
                class="tm-welcome-parallax tm-center-child"
                data-parallax="scroll"
                data-image-src="static/images/blooming-bg.jpg"
              >
                <div class="tm-bg-black-transparent tm-parallax-overlay">
                  <h2>Our Gallery</h2>
                  <p>this is a parallax background image</p>
                </div>
              </div>
            </div>
          </div>

              <div class="tm-page-col-right">
                <div class="tm-gallery" id="tmGallery">
                  <div class="tm-gallery-item category-1">
                    <figure class="effect-bubba">
                      <img
                        src="static/comments/gallery/gallery-item-01.jpg"
                        alt="Gallery item"
                        class="img-fluid"
                      />
                    </figure>
                  </div>
                </div>
              </div>
            </div>
          </section>

    <script src="{% static 'comments/jquery.min.js' %}"></script>
    <script src="{% static 'coments/parallax.min.js' %}"></script>
    <script src="{% static 'comments/imagesloaded.pkgd.min.js' %}"></script>
    <script src="{% static 'comments/isotope.pkgd.min.js' %}"></script>
    <script src="{% static 'comments/bootstrap.min.js' %}"></script>

        <script>
          $(function() {
            /* Isotope Gallery */

            // init isotope
            var $gallery = $(".tm-gallery").isotope({
              itemSelector: ".tm-gallery-item",
              layoutMode: "fitRows"
            });
            // layout Isotope after each image loads
            $gallery.imagesLoaded().progress(function() {
              $gallery.isotope("layout");
            });

            $(".filters-button-group").on("click", "a", function() {
              var filterValue = $(this).attr("data-filter");
              $gallery.isotope({ filter: filterValue });
              console.log("Filter value: " + filterValue);
            });

            /* Tabs */
            $(".tabgroup > div").hide();
            $(".tabgroup > div:first-of-type").show();
            $(".tabs a").click(function(e) {
              e.preventDefault();
              var $this = $(this),
                tabgroup = "#" + $this.parents(".tabs").data("tabgroup"),
                others = $this
                  .closest("li")
                  .siblings()
                  .children("a"),
                target = $this.attr("href");
              others.removeClass("active");
              $this.addClass("active");

              // Scroll to tab content (for mobile)
              if ($(window).width() < 992) {
                $("html, body").animate(
                  {
                    scrollTop: $("#tmGallery").offset().top
                  },
                  200
                );
              }
            });
          });
        </script>
      </body>
    </html>

我尝试了什么

我也试过 python manage.py collectstatic，结果显示 0 static files copied to 'D:\myapp\static_cdn', 248 unmodified.

我尝试了很多答案，有些人说 urls.py` 中的 add static url 但没有用。

我不知道该怎么办

任何帮助将不胜感激

提前致谢

Answer 1

确保您的 settings.py 具有以下内容

settings.py

from pathlib import Path
import os

# Build paths inside the project like this: BASE_DIR / 'subdir'.
BASE_DIR = Path(__file__).resolve().parent.parent
TEMPLATE_DIR = os.path.join(BASE_DIR,"templates")
STATIC_DIR = os.path.join(BASE_DIR,"static")
MEDIA_DIR = os.path.join(BASE_DIR, 'media')

下面最好在底端

# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/3.1/howto/static-files/

STATIC_URL = '/static/'

STATICFILES_DIRS = [
    STATIC_DIR,
]

#MEDIA
MEDIA_ROOT = MEDIA_DIR
MEDIA_URL = '/media/' 


LOGIN_URL = 'user_login'

现在在基本目录（您的 manage.py 所在的位置）中创建一个名为 static 的文件夹，并将您的静态文件放在其中

确保在模板中{% load static %}

如果没有任何效果，请尝试打开一个新项目并尝试上述操作

静态文件未从静态文件夹加载

1 个答案: