Django - 在模板中引用静态文件

Question

我在模板中引用静态文件时遇到了困难。我正在使用Twitter Bootstrap，将bootstrap文件（css、img、js）放置在mysite/static文件夹下。

我已经按照此教程设置了STATIC_URL、STATIC_ROOT 和 TEMPLATE_CONTEXT_PROCESSORS。我已经运行了./manage.py collectstatic 命令，将72个文件复制过来了。我还在我的模板（index.html）文件中添加了以下模板标签，但这并没有起作用。

{% load staticfiles %}
<link rel="stylesheet" href="{% static user_stylesheet %}" type="text/css" media="screen"/>

任何有关如何引用文件以使Bootstrap样式返回到模板的帮助将不胜感激！

任何有关如何引用文件以使Bootstrap样式返回到模板的帮助将不胜感激！

- Jess

Answer 1

应该是这样的

{% load static %}

然后就是类似这样的东西

<!-- path -->
<link href="{% static 'bootstrap/css/bootstrap.css' %}" rel="stylesheet" type="text/css">
<!--->

更新以确保完整性

文件夹结构

• proj
• app1
• app2
• myproj_public
• static
  • css
    • bootstrap.css
  • js
    • xyz.js

设置文件

STATIC_ROOT = os.path.join(os.path.abspath(
    os.path.join(PROJECT_ROOT, 'myproj_public', 'static')), '')

STATIC_URL = '/static/'

- super9

---

谢谢。我已经将这个添加到了我的index.html文件的顶部，但是它没有起作用。我可能还错过了什么吗？ - Jess

当您在Firebug（Firefox）或开发者工具（Chrome）中检查页面时，它会显示什么？您的CSS文件是否放置在正确的目录中？ - super9

谢谢您的回答，我修复了静态文件路径后终于让它正常运行了。 - Jess

这个解决方案还适用吗？我正在使用Django 1.8.6，但是它对我不起作用。我的目录结构非常相似。 - MadPhysicist

不，它看起来已经过时了。https://docs.djangoproject.com/en/1.11/howto/static-files/ - Thismatters

Answer 2

你是否在视图中设置了 user_stylesheet 上下文变量？在将其传递到模板之前，需要先进行设置。

通常我会使用 {{ static_url }} 标签来完成这个操作，因此我的引用 Bootstrap 组件的代码会像这样写：

<link href="{{ STATIC_URL }}bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
<script src="{{ STATIC_URL }}bootstrap/js/jquery.js"></script>

假设 bootstrap 文件夹位于静态文件夹内。

编辑：

对于您的情况，要设置user_stylesheet上下文变量，您需要执行类似以下操作：

dict["user_stylesheet"]= <path to your file>
#add other context variables you might have to
render_to_response(<your template name>, dict, context_instance=RequestContext(request))

- ersran9

---

谢谢@ersran9。我还没有在views.py中设置user_stylesheet上下文变量。目前这都是新领域，所以我不太确定该设置什么。你的user_stylesheet上下文变量会是什么？ - Jess

@Jess 编辑了回答。顺便说一句，如果您像我展示的那样使用 static_url，则无需设置 user_stylesheet，在 settings.py 中设置正确的 static_root 和 static_url 就足够了。 - ersran9

好的，谢谢。我已经在settings.py中设置了static_root和static_url，并按照super9的建议将代码添加到index.html的顶部，但这没有起作用。我可能还有哪些地方做错了吗？ - Jess

@Jess 请在您的模板中尝试打印 {{ STATIC_URL }}，检查它是否设置为正确的 URL。一旦确认无误，请尝试通过浏览器直接请求文件，例如：127.0.0.1:8000/<static_url>/bootstrap/css/bootstrap.css，以检查 {{ STATIC_ROOT }} 是否正确设置。 - ersran9

Answer 3

当你设置 static_root 时，例如：

STATIC_ROOT = os.path.join(BASE_DIR, "static_root/")

所有文件都被复制到那里，而不是在project_root/static中。这是Django 1.3引入的一种新机制，用于简化静态文件处理：它将收集每个STATICFILES_DIR和每个已安装应用程序下的所有static目录中的所有文件，因此您只需将它们复制一次即可。

使用static_root路径引用css/js文件。

- WesternGun