开发中的 Django 站点：未为所有页面加载 CSS答案

【问题标题】：Django site in developement: CSS not loading for all pages开发中的 Django 站点：未为所有页面加载 CSS
【发布时间】：2023-03-16 18:44:01
【问题描述】：

恐怕我在这里不知所措，我检查了一些类似的问题，但似乎没有一个适用。

我正在笔记本电脑上运行 django 开发服务器。我也用它来提供静态文件。我在静态根目录中有一个文件夹，其中包含两个名为 base.html 的模板的 CSS。

这是有效部分的头部：

<head>
    <title>| Entries | Latest entries</title>
    <link rel="stylesheet" type="text/css" href="/static/css/serenity.css" />
</head>

这是没有的：

<head>
    <title>Latest Photo Galleries</title>
    <link rel="stylesheet" type="text/css" href="/static/css/photologue.css" />
</head>

urls.py:

    (r'^static/(?P<path>.*)$', 'django.views.static.serve',{'document_root': settings.STATIC_ROOT}),

和静态网址：

    STATIC_URL = '/static/'

STATIC_ROOT 是绝对路径。

当我查看源代码并尝试打开指向 css 的链接时，我得到一个 404（未找到）

为什么 Django 为一个应用程序提供 css 文件而不为另一个应用程序提供 css 文件？（不工作的在photologue模板中。）

任何帮助将不胜感激。

【问题讨论】：

我知道这是一个愚蠢的问题，但文件实际上是 in 那个目录吗？尝试直接在浏览器中加载它。如果你得到一个 404，那么，...
由于他在 Django 开发服务器中运行它们，他应该能够在服务器窗口本身中看到请求以及它们各自的响应代码。
我从服务器窗口得到以下输出："GET /Static/css/photologue/css HTTP/1.1" 404 1745 文件直接加载到浏览器中。
如果您正确复制粘贴了该错误，则其中没有 1 个错误，而是 2 个错误。 /Static 应该是 /static 和 photologue/css 应该是 photologue.css
我不得不输入我在提示中看到的错误，所以我打错字并将第一个 'S' 大写 :) 非常有洞察力。

标签： django django-templates

【解决方案1】：

我看到了两个可能发生的问题：

您的设置文件中未设置 STATIC 变量。

（你有很多答案）

您可能没有在 apache 配置中设置 /static/ 别名。

将此行添加到您的 /etc/apache2/httpd.conf 文件或 /etc/apache2/sites-available/myDjangoConfig：

Alias /static/ {valueOfSTATIC_ROOT}

然后重启你的 Apache 服务器：

sudo service apache2 reload

【讨论】：

【解决方案2】：

您可以尝试以下步骤：

打开您的 settings.py 并

-在文件的第一行添加：

import os.path
PROJECT_DIR = os.path.dirname(os.path.abspath(__file__))

-将您的 STATIC_ROOT 的值更改为：

STATIC_ROOT = os.path.join(PROJECT_DIR, 'static/')

-将您的 STATIC_URL 的值更改为：

STATIC_URL = '/static/'

在您的项目根目录中创建一个名为“static”的文件夹。
为您的静态文件（如 css、javascript 等）创建一个文件夹。我建议您为不同类型的文件使用不同的文件夹。
打开项目的 urls.py -将此添加到您的导入中：导入设置 - 将此添加到 url 模式：

(r'(?:.*?/)?(?P(css|jquery|jscripts|images)/.+)$', 'django.views.static.serve', {'document_root': 设置.STATIC_ROOT }),

注意：在此示例中，我的静态文件夹中有名为 css、jquery、jscripts 和 images 的文件夹。
在您的模板中添加：

对于 css 文件：（在本例中，default.css 是 css 文件的名称）

<link href="{{ STATIC_URL }}css/default.css" rel="stylesheet" type="text/css" media="all" />

对于 javascript：

<script type="text/javascript" src="{{ STATIC_URL }}jquery/jquery.js"></script>

【讨论】：

在模板中使用STATIC_ROOT是错误的；它应该是 STATIC_URL 并且在它前面加上“/”也是不正确的。此外，在项目根目录中填充“静态”文件夹将不适用于 collectstatic 范例。该文件夹是一个收集点。当您运行manage.py collectstatic 时，您会看到类似这样的消息：“您已请求在设置文件中指定的目标位置收集静态文件。这将覆盖现有文件。您确定要这样做吗？”

【解决方案3】：

您使用staticfiles 的方式有点不正确。虽然我不能确切地告诉你是什么导致了你现在的情况，但我可以告诉你，你的方法将来会让你头疼。首先，我同意 cmets 关于在 Django 服务器终端中查看您的请求流量的观点。查找 4xx 响应并确保请求的 URL 正确。这：/Static/css/photologue/css 有两个错误。

如果您不想进一步阅读，请删除 urls.py static.server 行并观察服务器终端。现在，这就是它的工作原理......

您的设置变量正确，但您可能误解了STATIC_ROOT 的用途。 STATIC_URL 是静态文件的完全限定或相对 URL。 STATIC_ROOT 是最终保存所有静态文件的文件夹。 它应该是空的。 Django 负责通过manage.py collectstaticcommand 填充它。这个想法是你的 Django 项目中的每个应用程序都有自己的 static/ 文件夹，其中包含它需要的 js/css/image 资产。此外，Django 将为 Admin 和您使用的任何其他第三方包收集静态资产。所有这些资产都将被组织到您的 STATIC_ROOT 文件夹中。假设您在收集之前拥有的文件会保留是不安全的。

STATIC_ROOT = '/path/to/empty/static/folder/'  # or something dynamic with os.path methods
STATIC_URL = '/static/'

在您的情况下，您的 serenity 应用程序可能有 serenity/static/css/serenity.css，而 photologue 有 photologue/static/css/photologue.css。您可以将共享资产放在base/static/ 文件夹中。

现在正确地投放静态媒体。不要在urls.py 中使用'django.views.static.serve' 行。 Django 的runserver 将自动提供静态文件。在幕后，它正在处理 collectstatic 行为并将所有静态资产收集在一起并提供服务。在 Django 1.3 中使用这种类型的 URL 模式是不必要的，会造成混淆，并且会错误地投入生产。请记住，您的网络服务器（Apache/Nginx）提供静态资产。你的 Django urls.py 文件不需要了解它们。

引用模板中的静态 URL。您的模板中有/static/ 硬编码。这将起作用（但仅因为 STATIC_URL 是相同的值）。为了更灵活，你有three options。

使用href="{{ STATIC_URL }}css/photologue.css"。只要您在 TEMPLATE_CONTEXT_PROCESSORS 中包含“django.core.context_processors.static”，该变量就会在您的模板中。
使用模板标签：{% load static %} ... href="{% get_static_prefix %}css/photologue.css"
在 Django 1.4 中，您将能够使用 {% load static from staticfiles %}... href="{% static 'css/photologue.css' %}"

值得阅读 Django 中的静态文件并了解 Django 1.4 中的变化

【讨论】：

感谢您非常清楚的解释！我清空了指示为 STATIC_ROOT 的文件夹并修改了 urls.py。我使用了您上面答案中的选项 2。我的应用程序文件夹中确实已经有一个静态子文件夹（app/static/css 等）。现在可以正确提供 css 文件。 django-markitup 现在正在管理员中工作，但我会看看我是否可以自己解决这个问题，然后再问另一个问题。再次感谢。
感谢您的解释，刚开始使用 Django，这解决了我的问题！

【解决方案4】：

STATIC_ROOT 不与 Django 开发服务器一起使用 - 仅当您部署到产品或使用不同的服务器时。 STATIC_ROOT 是您收集静态文件后将存储它们的位置（使用“collectstatic”方法）。

它适用于一个应用程序而不适用于另一个应用程序的原因是，一个应用程序具有对 CSS 文件夹的正确引用，而另一个则没有。对于初学者，请尝试将“静态”目录从一个应用程序复制到另一个应用程序，看看它是否有效。

【讨论】：