Настройка и подключение статических файлов в Django

Если вы искали способ добавить изображения, стили и js в свой проект на Django, то пришли по адресу.

Что такое статические файлы в Django?
Изображения, JS и CSS-файлы называются статическими файлами или ассетами проекта Django.

Код из урока: https://gitlab.com/PythonRu/django_static

1. Создадим папку для статических файлов

В папке проекта Django создайте новую папку «static». В примере выше она находится в директории «dstatic».

Создадим папку для статических файлов

2. Укажите статический URL Django в настройках

Теперь убедитесь, что статические файлы Django django.contrib.staticfiles указаны в списке установленных приложений в settings.py.

# dstatic > dstatic > settings.py

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

Они должны быть там по умолчанию.

После этого пролистайте в нижнюю часть файла настроек и укажите статический URL, если такого еще нет. Вы также можете указать статическую папку, чтобы Django знал, где искать статические файлы.

# dstatic > dstatic > settings.py

STATIC_URL = '/static/'

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

Не забудьте импортировать библиотеку os после добавления кода выше.

После завершения базовой настройки рассмотрим, как добавлять и показывать изображения в шаблонах, а также как подключить свои JavaScript и CSS файлы.

3. Создайте папку для изображений

Создайте папку в «static» специально для изображений. Назовите ее «img». Главное после этого правильно ссылаться на нее в шаблонах.

Создайте папку для изображений

4. Загрузите статический файл в свой HTML-шаблон

Теперь в выбранном шаблоне (например, в «home.html») загрузите статический файл в верхней части страницы.

Загрузите статический файл в свой HTML-шаблон

Важно добавить {% load static %} до того, как добавлять изображение. В противном случае оно не будет загружено.

Использование тега static в шаблоне

После этого вы можете использовать тег «static» в шаблоне для работы с источником изображения.

dstatic > templates > home.html

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Home</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container">
    <h1 class="text-center">Привет Django</h1>
    <img class="w-50 mx-auto d-block" src="{% static 'img/example.png' %}" alt="photo">
  </div>
</body>
</html>

Стоит отметить, что этот файл использует также Bootstrap CDN. Результат:

Настройка и подключение статических файлов в Django

5. Создание папки и файла JavaScript

Если нужно добавить кастомные JS-файлы в проект, создайте папку «js» внутри «static».

Можно также использовать элемент <script> внутри шаблона, но создание отдельного JS-файла улучшит организацию проекта и поможет проще находить все скрипты в одном месте.

Создание файла script.js

В папке static > js создайте файл «script.js», в котором будут храниться все функции JavaScript.

$(window).scroll(function() {
    if ($(document).scrollTop() > 600 && $("#myModal").attr("displayed") === "false") {
        $('#myModal').modal('show');
        $("#myModal").attr("displayed", "true");
    }
});

6. Загрузите скрипт в шаблон

Теперь для подключения JS-файла к проекту добавьте файл в «header.html». Файл должен вызываться так же, как и в случае с изображениями.

Не забудьте и о {% load static %} в верхней части страницы для корректной работы тегов.

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Home</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="{% static 'js/script.js' %}"></script>
</head>
<body>
  <div class="container">
    <h1 class="text-center">Привет Django</h1>
    <img class="w-50 mx-auto d-block" src="{% static 'img/example.png' %}" alt="photo">
  </div>
</body>
</html>

7. Создание папки и файла для CSS

Также можно подключить CSS-файлы. Для этого создайте папку «css» внутри «static». Вы также можете использовать элемент <style> и вложить все стили туда.

Создание папки и файла для CSS

Но в случае создания отдельных классовых атрибутов, которые затем используются в разных шаблонах, лучше создавать отдельные папки и файлы.

Создание файла стилей css

Создайте файл «stylesheet.css» в static > css. Там будут храниться все ваши стили.

.custom {
    color:#007bff;
    background:#000000;
    font-size:20px;
}

8. Загрузите ссылку на CSS в шаблон

Для подключения собственных стилей к проекту, добавьте HTML-элемент <link> в «header.html». Файл вызывается так же, как изображения и JS-файлы.

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Home</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="{% static 'css/stylesheet.css'%}" type="text/css">
  <script src="{% static 'js/script.js' %}"></script>
</head>
<body>
  <div class="container custom">
    <h1 class="text-center">Привет Django</h1>
    <img class="w-50 mx-auto d-block" src="{% static 'img/example.png' %}" alt="photo">
  </div>
</body>
</html>

И снова не забудьте о {% load static %} в верхней части страницы. Если не добавить эту строку, то будет ошибка.

Если класс custom добавить к container вы увидите изменения:

Загрузите ссылку на CSS в шаблон

Ошибки, связанные с загрузкой статических файлов Django

Если вы получили ошибку «Invalid block tag on line 8: ‘static’, expected ‘endblock’. Did you forget to register or load this tag?», то вы наверняка забыли добавить тег загрузки статических файлов в верхней части страницы: {% load static %} до вызова самого изображения.

{% load static %}
<img src="{% static 'img/photo.jpg' %}">

Такая ошибка «Could not parse the remainder: ‘/photo.jpg’ from ‘img/photo.jpg’» значит, что вы забыли добавить кавычки вокруг ссылки на изображения. В этом случае нужно использовать две пары кавычек: одни для всего содержимого src, а вторые — для ссылки на изображение.

<img src="{% static img/photo.jpg %}"> {# ошибка #}
<img src="{% static 'img/photo.jpg' %}"> {# верно #}

«Invalid block tag on line 9: »static/img/photo.jpg», expected ‘endblock’. Did you forget to register or load this tag?» говорит о том, что вы случайно добавили тег static в URL.

<img src="{% 'static/img/photo.jpg' %}"> {# ошибка #}
<img src="{% static 'img/photo.jpg' %}"> {# верно #}

Если страница не загружается, и появляется следующая ошибка: «django.core.exceptions.ImproperlyConfigured: You’re using the staticfiles app without having set the required STATIC_URL setting», то это указывает на то, что вы забыли указать статический URL в файле настроек. Его нужно задать в settings.py и сохранить документ.

STATIC_URL = '/static/'

Наконец, если вы не получаете ошибку, но изображение не отображается, то убедитесь, что вы правильно используете тег.

<img src="{ static img/photo.jpg }"> {# ошибка #}
<img src="{% static 'img/photo.jpg' %}"> {# верно #}

Появились вопросы? Задайте на Яндекс Кью

У блога есть сообщество на Кью >> Python Q <<. Там я и другие участники отвечаем на вопросы по python, программированию и контенту сайта.

Обучение Python и Data Science

Профессия Data Scientist

Профессия Data Scientist

11 800 5 900 ₽/мес.
Профессия Python-разработчик

Профессия Python-разработчик

9 800 4 900 ₽/мес.
Профессия Python Fullstack

Профессия Python Fullstack

7 800 3 900 ₽/мес.
Курс Аналитик данных с нуля

Курс Аналитик данных с нуля

6 500 3 900 ₽/мес.

Вам помогла эта статья? Поделитесь в соцсетях или блоге. Репосты помогают сайту развиться.