Для подключения CSS и JS файлов в шаблон Django есть несколько способов, вот некоторые из них:
1. Встроенный тег {% static %}: Django предоставляет встроенный тег {% static %} для подключения статических файлов (то есть CSS и JS файлов), которые находятся в директории STATIC_ROOT в вашем проекте. Для использования этого тега вам необходимо добавить следующую строку в верхней части вашего шаблона:
{% load static %}
Затем вы можете использовать тег {% static %} для включения CSS и JS файлов в вашем шаблоне. Например:
<link rel="stylesheet" href="{% static 'css/style.css' %}">
<script src="{% static 'js/script.js' %}"></script>
Помните, что перед использованием тега {% static %}, вам необходимо добавить 'django.contrib.staticfiles' в список установленных приложений (INSTALLED_APPS) в файле settings.py вашего проекта.
2. Использование ссылок на внешние файлы: Вы также можете использовать обычные ссылки на внешние CSS и JS файлы, если они хранятся в другом месте (например, CDN или другом хостинге). Для этого просто добавьте следующие теги в ваш шаблон:
<link rel="stylesheet" href="https://example.com/css/style.css">
<script src="https://example.com/js/script.js"></script>
Однако помните, что внешние файлы могут быть недоступными или могут меняться, поэтому они могут быть менее надежными, чем файлы, хранящиеся в вашем проекте.
3. Использование пакета django-compressor: Django-compressor — это инструмент, который помогает сжимать и объединять статические файлы (CSS и JS) в вашем проекте Django. Это может быть особенно полезно, если у вас большое количество файлов или если вы хотите оптимизировать загрузку ресурсов. Чтобы использовать django-compressor, вам нужно установить его через pip, добавить его в список установленных приложений (INSTALLED_APPS) и настроить соответствующие параметры в settings.py вашего проекта. После этого вы можете использовать специальные теги, предоставляемые django-compressor, для подключения сжатых и объединенных версий файлов CSS и JS в вашем шаблоне.
4. Использование шаблонного наследования: Если вы используете шаблонное наследование в Django, вы можете определить блоки (например, {% block extra_css %} и {% block extra_js %}) в базовом шаблоне и затем расширить его в дочерних шаблонах, добавляя ссылки на ваши CSS и JS файлы в соответствующие блоки. Например:
Базовый шаблон (base.html):
<html>
<head>
<link rel="stylesheet" href="https://example.com/css/style.css">
{% block extra_css %}{% endblock %}
</head>
<body>
<!-- ваш код тела страницы -->
<script src="https://example.com/js/script.js"></script>
{% block extra_js %}{% endblock %}
</body>
</html>
Дочерний шаблон (child.html):
{% extends 'base.html' %}
{% block extra_css %}
<link rel="stylesheet" href="{% static 'css/child-style.css' %}">
{% endblock %}
{% block extra_js %}
<script src="{% static 'js/child-script.js' %}"></script>
{% endblock %}
Таким образом, вы можете добавлять и переопределять ссылки на CSS и JS файлы в каждом дочернем шаблоне, вставляя их в соответствующие блоки.