我下载了这个模板https://github.com/BlackrockDigital/startbootstrap-resume我正在尝试在 Django 中使用它。我在处理静态文件时遇到问题，即 .css 和 .jpg。
我的元素叫做 Djangoresume，应用是 resume。我将模板文件复制到我的/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 中，我不明白什么是加载的，什么不是。
最佳答案
静态资源没有为您加载的原因是 Django 无法在静态文件夹中找到它们。 Django 在元素中查找模板和静态文件夹，并在呈现它们时收集所有 Assets 。
您可以阅读更多相关信息 here .
您在为模板组织元素结构时是正确的。
- 应该是project/app/templates/app/--files--
--files-- 是保存您的 index.html 和其他 *.html 文件的地方。
但是模板仅用于保留由 View 呈现的 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' 指的是您的resume 应用中的 static 文件夹。为此，您可以像我在上面使用“bootstrap.min.css”时所做的那样，通过将路径添加到这些 Assets 来附加要呈现的 Assets 。
我希望你的一些困惑得到了消除。据我所知，您的 views.py 和 urls.py 文件配置正确。
关于css - Django 静态文件未加载。修复 settings.py 以加载相对路径上的文件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49060731/