Django静态文件到目前为止，我们还没有在简单的Django应用程序中看到任何层叠样式表、JavaScript代码或图

到目前为止，我们还没有在简单的Django应用程序中看到任何层叠样式表、JavaScript代码或图像文件。这些类型的文件被称为静态文件。这些类型的文件通常不会改变，因此我们称它们为静态文件。我们一直在使用的模板确实会发生变化，因为它们里面有逻辑，而且是根据逻辑有条件地输出数据。每个网站或应用程序都需要一定数量的静态文件来支持它，这就是我们现在要学习的内容。

应用程序特定的静态文件

在app文件夹中，我们可以添加一个名为static的新文件夹。

django static files in app

现在在static文件夹内，我们应该创建另一个与应用程序同名的文件夹。我们正在遵循创建模板文件夹时使用的相同惯例。

static files app name folder

在这个文件夹中，我们可以像这样为图片、CSS和JavaScript添加文件夹。

css js image static files django

审查settings.py的静态文件

默认情况下，你不应该对settings.py文件做任何修改，但这有助于了解Django是如何支持静态文件的。在 settings.py 的 INSTALLED_APPS 列表中，应该有一行读作django.contrib.staticfiles，如下图所示。

INSTALLED_APPS = [
    'goals',
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
]

这是 Django 所要求的，用来开启处理静态文件的功能。在 settings.py 的末尾，你会看到一行看起来像这样。

# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/3.2/howto/static-files/

STATIC_URL = '/static/'

这个设置并不涉及你可以在哪里存储静态文件，而是涉及它们的服务位置。默认设置是/static/，所以这意味着提供静态文件的URL可能以类似myproject.com/static/ 的方式开始。你不需要在这里做任何改变。Django已经知道要在项目的任何应用文件夹中寻找一个静态文件夹。

添加style.css

现在我们可以在css文件夹中添加一个CSS文件，并给它一个名字。我们将简单地称它为style.css。

css static file django

在style.css文件中，我们可以添加一些基本的CSS样式。

ul {
  list-style: square;
  outline: solid red 5px;
  padding: 20px;
}

li {
  color: green;
  font-size: 20px;
  padding: 5px;
}

a:visited {
  color: blue;
}

{% load static %}

在你的模板中包括静态文件现在是一个两步的过程。第一步是在文件的顶部调用**{% load static %}**指令。我们在我们的base.html模板文件中调用，它所做的是加载一些额外的功能，比如一个插件。

{% load static %}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>{% block title %} Hello World {% endblock title %}</title>
  </head>
  <body>
    {% block content %}{% endblock content %}
  </body>
</html>

{% static %}

在Django模板中包含静态文件的第二步是调用**{% static %}插件，同时给它提供一个相关文件的路径。我们现在有一个style.css文件，我们想使用它。要访问它，我们可以像这样使用{% static 'goals/css/style.css' %}。

{% load static %}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="{% static 'goals/css/style.css' %}" />
    <title>{% block title %} Hello World {% endblock title %}</title>
  </head>
  <body>
    {% block content %}{% endblock content %}
  </body>
</html>

在这一点上，网站在加载时应该包含我们的新style.css文件。

django css static file

项目（全局）静态文件

我们完全可以在整个项目中设置静态文件，而不仅仅是在每个应用的基础上使用。这个过程是类似的，我们可以在项目层面添加一个新的静态文件夹来开始。

django global static files

我们还将像这样在静态文件夹内设置相关的图片、css和js子文件夹。

global static files

最后，让我们像这样在css子文件夹中添加一个global.css文件。

css for entire django project

为了测试这个全局CSS，我们将改变一下字体，就像这样。

static\css\global.css

* {
    font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif
}

全局静态设置.py

Django已经知道如何在每个应用的基础上寻找静态文件，正如我们上面讨论的那样。它不知道如何在项目或全局层面上寻找静态文件，除非你进行一些配置。为了让Django知道你在项目层面的静态文件夹，我们可以通过添加所示的高亮代码来更新settings.py。

# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/3.2/howto/static-files/

STATIC_URL = '/static/'

STATICFILES_DIRS = [
    BASE_DIR / 'static'
]

为了在全局范围内包含这个CSS，我们在base.html文件中使用*{% static 'css/global.css' %}*。注意，我们已经删除了原来的CSS，因为那应该是在应用层面上的。

{% load static %}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="{% static 'css/global.css' %}" />
    <title>{% block title %} Hello World {% endblock title %}</title>
  </head>
  <body>
    {% block content %}{% endblock content %}
  </body>
</html>

django global css styles

为了保留只与特定应用程序相关的静态文件，我们可以使用熟悉的块内容范式。

templates/base.html

{% load static %}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="{% static 'css/global.css' %}" />
    {% block css %}{% endblock css %}
    <title>{% block title %} Hello World {% endblock title %}</title>
  </head>
  <body>
    {% block content %}{% endblock content %}
  </body>
</html>

goals\templates\goals\index.html

{% extends 'base.html' %} 

{% load static %}

{% block css %}
<link rel="stylesheet" href="{% static 'goals/css/style.css' %}"/>
{% endblock css %}

{% block title %}Goals{% endblock title %} 

{% block content %}
<ul>
  {% for timeframe in timeframes reversed %} {% if timeframe == 'monthly' %}
  <li><a href="{% url 'namedurl' timeframe %}">{{ timeframe|upper }}</a></li>
  {% else %}
  <li><a href="{% url 'namedurl' timeframe %}">{{ timeframe|capfirst }}</a></li>
  {% endif %} {% endfor %}
</ul>
{% endblock content %}

很好！我们现在正在为特定应用的静态文件提供服务。我们现在正在为特定的应用程序提供静态文件，我们可以通过时髦的红色轮廓和方形列表属性看到。我们也在为全局性的静态文件提供服务，我们可以从页面上出现的Impact字体中看到。

app static files and global static files together

了解更多关于Django静态文件的信息

如何使用静态文件 (docs.djangoproject.com)
使用Django模板静态文件(digitalocean.com)
Django静态文件教程(dev.to)
Django静态文件处理（data-flair.training）
Django静态文件(javatpoint.com)
Python Django静态文件模板如何使用 (kite.com)
Django staticfiles (help.pythonanywhere.com)
教程 Django静态文件(learnndjango.com)
在Django生产中提供静态文件的教程（stackoverflow.com）。
Django静态文件和图片(vegibit.com)