[Django] About static file related settings (css, js)

I tried to summarize the setting method of css file etc. with Django

What is a static file?

--css file --js file

A file whose contents do not change due to a request from a client such as is called a static file.

Settings in Setting.py

There are three main parameters that need to be set.

STATIC_URL Specify the URL for static file delivery. The default is'/ static /'. http (s): // hostname / static / ... You will be able to access it with.

settings.py


STATIC_URL = '/static/'

STATICFILES_DIRS Specifies where to save the static file in the project. The default save destination is Project name / app name / static / app name / ... However, it is troublesome to place static / application name / ... each time when you want to use css file in multiple applications. It is preferable to define it as follows and place it directly under the project directory where manage.py and the application folder are located.

settings.py


STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static')
                    ] 

By the way, BASE_DIR is a path that points directly under the project, and is a variable defined in settings.py as follows.

settings.py


BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__))) 

STATIC_ROOT The save destination of the static file referenced when DEBUG = False in setting.py. In other words, for production. From the viewpoint of security, change the save destination because it is better that the save destination of the static file in the project and the save destination in the production are different.

settings.py


STATIC_ROOT = '/var/www/Project name/static' 

Settings in urls.py

urls.py


from django.contrib import admin
from django.urls import path, include
from django.conf import settings
from django.conf.urls.static import static

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('app1.urls')),
] + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)

First, import settings and static. Then add it to the urlpatterns variable as above. Specify the delivery URL of the static file in the first argument and the save destination of the static file in the document_root argument. This associates the URL with the save destination, and when you access the URL, it will lead to the save destination of the static file. Isn't STATICFILES_DIRS used here? I think this is because STATICFILES_DIRS is referenced when STATIC_ROOT was not set.

How to call with html template

{% load static %}

<link rel="stylesheet" type="text/css" href="{% static 'style.css' %}">
<img src="{% static 'images/logo.png' %}"> 

First, enable static with {% load static%}. And by specifying the url in each tag {% static'filename'%} Specify. This describes the path from under STATICFILES_DIRS or STATIC_ROOT.

In the above example

project -static - images - logo.png
                L style.css
        Lmanage.py

It will be a structure such as.

Recommended Posts

[Django] About static file related settings (css, js)
[Django] About static file related settings (images, videos)
Django static file (static) related settings summary
Python-compress Django css / js
Django tutorial summary for beginners by beginners ⑥ (static file)
Django related sites
Django + MySQL settings
Django URL settings