最适合网络开发者的网站
Django。初学者课程

尿素 西斯

Django 全局静态文件


添加全局 CSS 文件

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

但是如果项目中的其他应用程序想要使用该文件怎么办?

然后我们必须在根目录上创建一个文件夹并将文件放在那里。

创建一个 static 文件夹位于根目录中,Django 将修复其余部分。我们必须告诉 Django 在哪里寻找这些静态文件。

首先在项目的根目录创建一个文件夹,这个文件夹可以随意命名,我将这样命名 mystaticfiles 在本教程中:

我的网球俱乐部
数据库.sqlite3
管理.py
我的网球俱乐部/
会员/
我的静态文件/

在中添加 CSS 文件 mystaticfiles 文件夹,名字由您选择,我们将称之为myglobal.css 在此示例中:

我的网球俱乐部
数据库.sqlite3
管理.py
我的网球俱乐部/
会员/
我的静态文件/
我的全局.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 管理.py collectstatic

这将产生以下结果:

您已请求在目的地收集静态文件
您的设置中指定的位置:

C:\用户\你的名字\我的世界\我的网球俱乐部\生产文件

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

输入‘yes’继续,或输入‘no’取消:

输入是:

输入“yes”继续,或输入“no”取消:yes

这将产生以下结果:

1 个静态文件已复制到 'C:\Users\你的名字\myworld\my_tennis_club\productionfiles',131 未修改。

示例应该有效

启动服务器,示例就可以运行了:

py 管理.py 运行服务器

在您自己的浏览器中检查结果: 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>
运行示例 »


评论