Menu
×
   ❮   
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS CYBERSECURITY DATA SCIENCE
     ❯   

Django - 全局静态文件


添加全局 CSS 文件

我们已经学习了如何在应用的 static 文件夹中添加静态文件,以及如何在应用中使用它。

但如果项目中的其他应用也想要使用该文件呢?

那么我们需要在根目录创建一个文件夹并将文件放在那里。

仅仅在根目录创建一个 static 文件夹是不够的,Django 会完成剩下的工作。我们需要告诉 Django 在哪里寻找这些静态文件。

首先,在项目的根目录创建一个文件夹,这个文件夹可以取任何名字,在本教程中我将它命名为 mystaticfiles

my_tennis_club
    db.sqlite3
    manage.py
    my_tennis_club/
    members/
    mystaticfiles/

mystaticfiles 文件夹中添加一个 CSS 文件,文件名由你决定,在本例中我们将其命名为 myglobal.css

my_tennis_club
    db.sqlite3
    manage.py
    my_tennis_club/
    members/
    mystaticfiles/
        myglobal.css

打开 CSS 文件并插入以下内容

my_tennis_club/mystaticfiles/myglobal.css:

body {
  color: violet;
}

修改设置

你需要告诉 Django 也在根目录的 mystaticfiles 文件夹中查找静态文件,这在 settings.py 文件中完成。

添加一个 STATICFILES_DIRS 列表

my_tennis_club/my_tennis_club/settings.py:

.
.

STATIC_ROOT = BASE_DIR / 'productionfiles'

STATIC_URL = 'static/'

#Add this in your settings.py file:
STATICFILES_DIRS = [
    BASE_DIR / 'mystaticfiles'
]
.
.

STATICFILES_DIRS 列表中,你可以列出所有 Django 应该查找静态文件的目录。

BASE_DIR 关键字代表项目的根目录,加上 / "mystaticfiles",表示根目录下的 mystaticfiles 文件夹。

搜索顺序

如果你有相同名称的文件,Django 会使用第一个找到的文件。

搜索从 STATICFILES_DIRS 中列出的目录开始,按照你提供的顺序进行。然后,如果找不到文件,搜索将继续在每个应用程序的 static 文件夹中进行。


修改模板

现在你拥有了整个项目的全局 CSS 文件,所有应用都可以访问它。

要在模板中使用它,请使用与 myfirst.css 文件相同的语法。

用以下内容开始模板:

{% load static %}

并像这样引用文件:

<link rel="stylesheet" href="{% static 'myglobal.css' %}">

示例

my_tennis_club/members/templates/template.html:

{% load static %}
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="{% static 'myglobal.css' %}">
<body>

{% for x in fruits %}
  <h1>{{ x }}</h1>
{% endfor %}

</body>
</html>
运行示例 »

没有效果?

没错。你需要再次收集静态文件。


收集静态文件

运行 collectstatic 命令来收集新的静态文件

py manage.py collectstatic

这将产生以下结果

你已请求将静态文件收集到
设置中指定的目的地

    C:\Users\Your Name\myworld\my_tennis_club\productionfiles

这将覆盖现有的文件!
你确定要这样做吗?

输入 'yes' 继续,或 'no' 取消

输入 yes

输入 'yes' 继续,或 'no' 取消: yes

这将产生以下结果

1 个静态文件复制到 'C:\Users\Your Name\myworld\my_tennis_club\productionfiles',131 个未修改。

示例应有效

启动服务器,示例将有效

py manage.py runserver

在你的浏览器中查看结果:127.0.0.1:8000/testing/

示例

my_tennis_club/members/templates/template.html:

{% load static %}
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="{% static 'myglobal.css' %}">
<body>

{% for x in fruits %}
  <h1>{{ x }}</h1>
{% endfor %}

</body>
</html>
运行示例 »


×

Contact Sales

If you want to use W3Schools services as an educational institution, team or enterprise, send us an e-mail:
[email protected]

Report Error

If you want to report an error, or if you want to make a suggestion, send us an e-mail:
[email protected]

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Copyright 1999-2024 by Refsnes Data. All Rights Reserved. W3Schools is Powered by W3.CSS.