Django загружает статические CSS-файлы, но не загружает JS-файлы

Я бьюсь над этим уже несколько часов. Я перепробовал все варианты, которые смог найти на SO, но не смог найти никакого решения моей проблемы.

По какой-то причине Django (версия 4.1.6 в коде VS) загружает файлы css, но не файл javascript. Стиль css работает, настраивается (я могу вносить изменения в файл css и изменения в стиле сайта) и виден в элементе inspect -> sources. фрагмент исходников

Однако js файл, который я сделал, не работает. Предполагается, что скрипт запускается при нажатии на кнопку, и он работает, когда js скрипт размещен в самом html, но возвращает неопределенное значение, когда используется как внешний js файл.

Я пробовал использовать collectstatic, STATICFILES_DIRS, очищать кэш, перемещать js-файл в разные папки, использовать все возможные пути (blog/js или static/blog/js или static/js или js, например, в моем скрипте src) и даже переустановил django. Когда я использую findstatic, js файл найден.

Ниже я упростил пример настолько, насколько это возможно.

Settings.py

STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'static/')

Views.py

class Archive(generic.ListView):
    queryset = Blog.objects.order_by('-pub_date')
    template_name = 'blog/archive.html'

Urls.py

urlpatterns = [
    path('', include('blog.urls')),
    path('admin/', admin.site.urls),

]

if settings.DEBUG:
    urlpatterns += static(settings.MEDIA_URL,
                          document_root=settings.MEDIA_ROOT)

Base.html

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>My Blog</title>

    <!-- static CSS & JS -->
    <link rel="stylesheet" href="{% static 'blog/style.css' %}">
    <!-- jquery -->
    <script defer src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js" ></script>

    <!-- JS -->
    <script type = "text/javascript" scr="{% static '/blog/js/blog_list.js' %}" ></script>

</head>
<body>
{% block content %}

{% endblock %}
</body>

Archive.html

{% extends 'base.html' %}

{% block content %}
 
<button onclick="myFunction()">Click me!</button>     

{% endblock %}

Blog_list.js (внутри static/blog/js/)

function myFunction() {
    alert("Hello from a static file!");
  }

Удалите или закомментируйте путь STATIC_ROOT и добавьте STATICFILES_DIRS

STATIC_URL = '/static/'
# STATIC_ROOT = os.path.join(BASE_DIR, '

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

Я почти уверен, что при загрузке CSS это ведущий слэш, если он не подставляется правильно. Даже если это так, вы захотите опустить ведущую косую черту из соображений последовательности.

Как упоминалось в другом ответе, вы также используете неправильный атрибут для загрузки скрипта - он должен быть src, а не scr. Тип mime является необязательным, и для стандартного JS не рекомендуется.

Я бы рекомендовал использовать его только при использовании JS модулей или если вам нужен блок данных.

Django объединяет два пути в статическом теге. Это эффективно:

STATIC_ROOT + [Your template parameter]

Итак, из этого:

<script type = "text/javascript" scr="{% static '/blog/js/blog_list.js' %}" ></script>

К этому:

<script src="{% static 'blog/js/blog_list.js' %}"></script>

Для получения дополнительной информации о статических тегах смотрите документацию здесь (если вы еще этого не сделали): https://docs.djangoproject.com/en/4.1/ref/templates/builtins/#static

Если вы хотите посмотреть, как работает статический модуль под капотом, исходный текст находится здесь: https://github.com/django/django/blob/main/django/templatetags/static.py

Добро пожаловать на StackOverflow! Надеюсь, вам здесь понравится.

В вашем теге script вы неправильно написали src как scr. измените его на src, тогда он может работать.

<script type = "text/javascript" src="{% static '/blog/js/blog_list.js' %}" ></script>

Пожалуйста, проверьте консоль вашего браузера на наличие ошибок, иногда файлы javascript блокируются из-за несоответствия MIME. если это так, то удалите атрибут type в теге script.

Вернуться на верх