Ви вже налаштували свої шаблони і почали впроваджувати динамічний HTML-контент у свої проєкти. Але як щодо того, щоб додати трохи стилю і оживити наші сторінки? Саме для цього на сцену виходять статичні файли — CSS, JavaScript, зображення і навіть шрифти.
Сьогодні ми розберемо, як Django працює зі статичними файлами, як їх підключати і, найголовніше, як правильно організувати їх у проєкті.
Так, структуру теж обговоримо — нікуди без неї!
Що таке статичні файли і навіщо вони потрібні?
Статичні файли — це незмінні ресурси, які не залежать від логіки вашого застосунку або стану даних. Це можуть бути:
- CSS-файли, щоб ваші елементи виглядали гарно (або хоча б намагалися).
- JavaScript-файли для інтерактивності, наприклад, для обробки спливаючих вікон або валідації форм.
- Зображення, які потішать око користувача та прикрасять ваш сайт.
- Шрифти, звуки та інше.
Django допомагає керувати цими файлами, надаючи вбудований механізм їх обробки та доставки.
Де зберігаються статичні файли в Django?
Django очікує, що ваші статичні файли будуть лежати в певних директоріях. Давайте розберемося, як і де їх зберігати.
Папка для статичних файлів
Для статичних файлів прийнято використовувати папку static. Вона може розташовуватися:
- У папці вашого застосунку, наприклад:
myapp/static/. - В окремій глобальній директорії, вказаній у налаштуваннях проєкту.
Давайте створимо структуру файлів:
project_name/
|-- myapp/
| |-- static/
| |-- css/
| | |-- styles.css
| |-- js/
| |-- scripts.js
|-- static/
| |-- css/
| |-- js/
| |-- images/
Назви, такі як css, js, images, не обов'язкові, але вони допомагають тримати файли впорядкованими.
Налаштування статичних файлів у проєкті
Для початку нам потрібно переконатися, що наш проєкт знає, де шукати статичні файли. Усі налаштування знаходяться у файлі settings.py.
Базові налаштування:
- Вказати STATIC_URL:
У settings.py:
STATIC_URL = '/static/'
Це налаштування визначає URL, за яким статичні файли будуть доступні на сайті. Наприклад, /static/css/styles.css.
- Додати директорію для статичних файлів:
Якщо ви хочете використовувати глобальну папку static для всього проєкту, додайте її до STATICFILES_DIRS:
STATICFILES_DIRS = [
BASE_DIR / "static",
]
Це налаштування повідомляє Django, де шукати додаткові статичні файли у вашому проєкті.
- Папка для зібраних файлів (на продакшені):
На етапі розробки нічого не потрібно робити, але для продакшена слід вказати STATIC_ROOT, куди Django збере всі статичні файли:
STATIC_ROOT = BASE_DIR / "staticfiles"
Ця папка потім використовується для роздачі файлів через веб-сервер, наприклад, Nginx або Apache.
Підключення CSS у шаблони
CSS відповідає за стиль сторінок. Для підключення CSS до шаблону потрібно використовувати спеціальний тег {% static %}. Цей тег автоматично підставить правильний шлях для статичних файлів.
Приклад:
Створіть файл styles.css у папці myapp/static/css/ зі наступним вмістом:
body {
background-color: #f5f5f5;
font-family: Arial, sans-serif;
color: #333;
}
h1 {
color: #007bff;
}Тепер підключіть цей файл у шаблоні:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Моя стильна сторінка</title>
<!-- Підключаємо CSS -->
{% load static %}
<link rel="stylesheet" type="text/css" href="{% static 'css/styles.css' %}">
</head>
<body>
<h1>Привіт, світ!</h1>
</body>
</html>Що тут відбувається?
{% load static %}— команда для завантаження тега{% static %}, необхідного для роботи зі статичними файлами.{% static 'css/styles.css' %}— формує правильний шлях до файлуstyles.css.
Відкрийте браузер, оновіть сторінку і насолоджуйтесь сірим фоном та синім заголовком.
Підключення JavaScript
JavaScript (JS) додає інтерактивність. Створимо файл scripts.js у папці myapp/static/js/:
// scripts.js
document.addEventListener('DOMContentLoaded', () => {
alert('Сторінка завантажена!');
});
Тепер підключіть цей скрипт у шаблон:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Сторінка з інтерактивом</title>
{% load static %}
<link rel="stylesheet" type="text/css" href="{% static 'css/styles.css' %}">
</head>
<body>
<h1>Привіт, світ!</h1>
<script src="{% static 'js/scripts.js' %}"></script>
</body>
</html>Як тільки ви оновите сторінку, браузер покаже спливаюче повідомлення "Сторінка завантажена!".
Чи працює це на продакшені?
На етапі розробки Django обслуговує статичні файли прямо з папки проєкту. Однак на продакшені Django цим не займається. Вам потрібно зібрати всі файли в одну папку (використовуючи команду collectstatic) і налаштувати сервер (наприклад, Nginx) для їх роздачі.
Команда collectstatic:
python manage.py collectstatic
Ця команда збере всі статичні файли з STATICFILES_DIRS і додатків в одну папку STATIC_ROOT.
Якщо ви використовуєте Nginx, налаштування приблизно таке:
location /static/ {
alias /path/to/your/project/staticfiles/;
}
Загальні помилки та їх усунення
Забув
{% load static %}в шаблоні. Це призводить до помилкиInvalid block tag: 'static'. Додайте завантаження блоку на початок файлу.Статичні файли не відображаються: Переконайтеся, що
STATIC_URLі шляхи до файлів налаштовані правильно. На продакшені перевірте роботу сервера (наприклад, Nginx).404 Not Found для CSS/JS: Це часто трапляється, якщо файл знаходиться не в папці
staticдодатку або шлях у шаблоні вказаний з помилкою.
Практичне завдання
- Створіть CSS-файл, який змінює колір заголовків на червоний.
- Додайте JS-функцію, яка змінює текст заголовка при натисканні на нього.
- Організуйте CSS та JS файли в папці
staticвашого застосунку.
Вітаю, тепер ви вмієте підключати статичні файли, не боячись хаосу! Продовжуйте стилізувати свої застосунки та додавати інтерактивність, але не забувайте про структуру та порядок.
ПЕРЕЙДІТЬ В ПОВНУ ВЕРСІЮ