Django静态文件没有加载。修复settings.py以在相对路径上加载文件

问题描述 投票：0回答：1

我下载了这个模板https://github.com/BlackrockDigital/startbootstrap-resume，我试图在Django中使用它。我遇到静态文件问题，即.css和.jpg。

我的项目名为Djangoresume，应用程序是简历。我将模板文件复制到我的/ home / kinkyboy / Djangoresume / resume / templates / resume（如果您认为最后一个简历文件夹不是组织项目的常用方法，请告诉我）：

> pwd
/home/kinkyboy/Djangoresume/resume/templates/resume
> tree -L1
.
├── css
├── gulpfile.js
├── img
├── js
├── index.html
├── scss
├── static
│   ├── css
│   ├── img
│   ├── js
│   ├── scss
│   └── vendor
└── vendor

请注意，我将相同的静态文件添加到新文件夹“static”以增加使Django工作的机会，但我宁愿不使用它。

这是settings.py的IMO相关部分：

BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
...
STATIC_URL = 'static/'
STATICFILES_DIRS = [
        os.path.join(BASE_DIR, '/resume/templates/resume/static')
]

但我尝试了很多不同的文件夹。我看到{％static％}使用STATIC_URL，而静态文件可能会使用STATICFILES_DIRS。 BASE_DIR是manage.py的地方，对吗？

我在这里复制了存储库中index.html的较短版本：

<!DOCTYPE html>
<html lang="en">
{% load static %}
{% load staticfiles %}
  <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>Resume - Start Bootstrap Theme</title>

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

    <!-- no it does not work -->
    <link href="{% static 'vendor/bootstrap/css/bootstrap.min.css' %}" rel="stylesheet">

    <!-- Custom fonts for this template -->
    <link href="https://fonts.googleapis.com/css?family=Saira+Extra+Condensed:100,200,300,400,500,600,700,800,900" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i" rel="stylesheet">
    <link href="vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet">
    <link href="vendor/devicons/css/devicons.min.css" rel="stylesheet">
    <link href="vendor/simple-line-icons/css/simple-line-icons.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="css/resume.min.css" rel="stylesheet">

  </head>

  <body id="page-top">

    <nav class="navbar navbar-expand-lg navbar-dark bg-primary fixed-top" id="sideNav">
      <a class="navbar-brand js-scroll-trigger" href="#page-top">
        <span class="d-block d-lg-none">Start Bootstrap</span>
        <span class="d-none d-lg-block">
          <img class="img-fluid img-profile rounded-circle mx-auto mb-2" src="img/profile.jpg" alt="">

<!--Try using static-->
<img class="img-fluid img-profile rounded-circle mx-auto mb-2" src="{% static 'img/profile.jpg' %}" alt="">

        </span>
      </a>
      <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" id="navbarSupportedContent">
        <ul class="navbar-nav">
          <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="#experience">Experience</a>
          </li>
          <li class="nav-item">
            <a class="nav-link js-scroll-trigger" href="#education">Education</a>
          </li>
          <li class="nav-item">
            <a class="nav-link js-scroll-trigger" href="#skills">Skills</a>
          </li>
          <li class="nav-item">
            <a class="nav-link js-scroll-trigger" href="#interests">Interests</a>
          </li>
          <li class="nav-item">
            <a class="nav-link js-scroll-trigger" href="#awards">Awards</a>
          </li>
        </ul>
      </div>
    </nav>


    <!-- Bootstrap core JavaScript -->
    <script src="vendor/jquery/jquery.min.js"></script>
    <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>

    <!-- Plugin JavaScript -->
    <script src="vendor/jquery-easing/jquery.easing.min.js"></script>

    <!-- Custom scripts for this template -->
    <script src="js/resume.min.js"></script>

  </body>

</html>

这个html工作直接在浏览器中打开，就是格式很好。当用作Django的模板时，它不会。我确实尝试在任何地方使用{％static''％}，如下所示：

<link href="{% static 'vendor/bootstrap/css/bootstrap.min.css' %}" rel="stylesheet">
src="{% static 'img/profile.jpg' %}"

并同时更改STATIC_URL。我甚至在STATIC_URL中有一些混合成功（一些css被应用，有些没有）和一些路径，现在它甚至很难再现（我在浏览器中禁用了缓存）。我确实在终端收到消息，例如

Not Found: /js/resume.min.js
[01/Mar/2018 18:59:45] "GET /js/resume.min.js HTTP/1.1" 404 3599

我想我的views.py，urls.py都可以，因为我可以加载index.html。只有css和jpg不加载。

如何解决这个问题？从浏览器中生成的html我不明白什么是加载的，什么不是。

css django static
1个回答
1
投票

静态资产没有为您加载的原因是Django无法在静态文件夹中找到它们。 Django在项目中查找模板和静态文件夹，并在渲染时收集所有资源。

你可以阅读更多关于它here。

您在组织模板的项目结构时是正确的。

  • 它应该是project / app / templates / app / - files--

--files--是index.html和其他* .html文件的保存位置。

但模板仅用于保留视图呈现的HTML文件。此文件夹不用于存储静态资产（即CSS，JS，其他框架文件等）。

就像模板文件夹一样，您需要为静态资产提供类似的结构。

  • 它应该是project / app / static / app / - files--

--files--这里包括所有CSS，JS和其他依赖的静态资产。这是您保存img，js，css，vendor，scss等文件夹的地方，包括任何* .css或* .js文件。

以下是静态文件夹的外观。

static
├── resume
    ├── css...
    ├── img...
    ├── js...
    ├── scss...
    └── vendor...  
    ├── gulpfile.js

以下可能是一些有用的代码更改：

#settings.py
...
STATIC_URL = '/static/'
...

对于index.html模板，

{% load static %}  <!-- skip {% load staticfiles %} as it is not needed  anymore -->

<!DOCTYPE html>
...
<!-- Bootstrap core CSS -->
<link href="{% static 'resume/vendor/bootstrap/css/bootstrap.min.css' %}" rel="stylesheet">
...
etc

href =“{％static ..％}”中的'static'指的是简历应用中的静态文件夹。为此，您可以通过添加上述资源的路径来附加要渲染的资源，以使用“bootstrap.min.css”。

我希望你的一些困惑得到澄清。从我收集的内容，您的views.py和urls.py文件配置正确。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.