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>
运行示例 »