Django 简明教程

Django - Add Static Files

What are Static Files in Django?

django 模板语言允许数据动态插入到网页中。然而，一个网页应用程序还需要一些资源，例如图像、JavaScript 代码和样式表，以渲染完整的网页。这些类型的文件被称为 static files 。在 Django 应用程序中，这些文件存储在应用程序文件夹内的静态文件夹中。

The django template language allows data to be inserted in a web page dynamically. However, a web application also needs certain resources such as images, JavaScript code and style sheets to render the complete web page. These types of files are called static files. In a Django application, these files are stored in a static folder inside the application folder.

The Staticfiles App

Django 中自动安装 staticfiles 应用程序 ( django.contrib.staticfiles )，该应用程序管理静态文件。

The staticfiles app (django.contrib.staticfiles), which manages the static files, is installed automatically in a Django project.

INSTALLED_APPS = [
   . . .,
   'django.contrib.staticfiles',
   'firstapp',
]

Django 在" app/static "文件夹中查找所有静态资源（该文件夹被命名为 static ，位于应用程序的 package 文件夹中）。

Django looks for all the static assets in the "app/static" folder (a folder named as static in the app’s package folder).

首先，我们需要在 myapp package 文件夹内创建一个名为" static "的文件夹来存储这些文件。让我们将"django.png"文件存储在此文件夹中。

First, we need to create a folder named "static" inside the myapp package folder to store these files. Let us store the "django.png" file in this folder.

确保在 " settings.py " 模块中，STATIC_URL 参数被设置为指向此文件夹。

Make sure that in the "settings.py" module, the STATIC_URL parameter is set to point to this folder.

STATIC_URL = 'static/'

Add a View

让我们添加以下视图 −

Let us add the following view −

from django.shortcuts import render
from django.http import HttpResponse

# Create your views here.
def index(request):
   return render(request, "index.html", {})

Register the View

还应当在应用程序的 URLCONF 中注册此视图 −

You should also register this view in the app’s URLCONF −

from django.urls import path
from . import views

urlpatterns = [
   path("", views.index, name="index"),
]

为了在模板中使静态文件夹可用，请使用 load template tag 例如在以下语句中 −

In the template, to make the static folder available, use the load template tag as in the following statement −

{% load static %}

index.html

现在，我们可以使用静态路径在 <img src> 标记中引用该图像。让我们修改 " index.html " 文件为 −

Now, we can use the static path to refer to the image in the <img src> tag. Let us modify the "index.html" file as −

<html>
<body>
   {% load static %}
   <img src="{% static 'django.png' %}" alt="My image">
</body>
</html>

启动服务器并访问 URL " http://localhost:8000/myapp/ "。"django.png"文件将显示在浏览器中。

Start the server and visit the URL "http://localhost:8000/myapp/". The "django.png" file will be displayed in the browser.

django add static files

staticfiles app 还帮助提供 CSS 和 JS 文件。要将其包含为 CSS 文件，提供其相对于 href 属性的 {% static %} 标签的相对路径。

The staticfiles app also helps in serving the CSS and JS files. To include it as a CSS file, provide its relative path to the {% static %} tag in the href attribute.

<link rel="stylesheet" type="text/css" href="{% static 'style.css' %}">

要加载 JavaScript 代码，请使用以下语法 −

To load the JavaScript code, use the following syntax −

<head>
   {% load static %}
   <script src = "{% static 'script.js' %}"></script>
</head>