Использовать JS-библиотеку с Django
У меня проблема с использованием библиотеки js с django. Я пытаюсь использовать библиотеку Particle.js для создания фона частиц для домашней страницы, и я пробовал следовать этот учебник.
Я создал particle.json и style.css в своей статической папке.
ОБНОВЛЕННАЯ ВЕРСИЯ (со статическими файлами)
home.html
<!-- templates/home.html -->
{% load socialaccount %}
{% load account %}
{% load static %}
<head>
<link rel = "stylesheet" href = "{% static 'style.css' %}"> </head>
<body>
<div id = "particles-js">
{% if user.is_authenticated %}
<p>Welcome {{ user.username }} !!!</p>
<a href = "/accounts/logout/" >Logout</a>
{% else %}
<a href = "{% provider_login_url 'github' %}">Log In with Github</a>
<a href = "{% provider_login_url 'twitter' %}">Log In with Twitter</a>
<a href = "{% provider_login_url 'facebook' %}">Log In with Facebook</a>
<a href = "{% provider_login_url 'linkedin' %}">Log In with LinkedIn</a>
{% endif %}
</div>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/particlesjs/2.2.2/particles.min.js"></script>
<script>
particlesJS.load('particles-js', '{% static 'particles.json' %}', function(){
console.info('particles.json loaded...');
});
</script> </body>
определил статический путь в settings.py
STATIC_URL = '/static/'
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'artemis/static')
]
и я мой файл urls.py
urlpatterns = [
url(r'^admin/', admin.site.urls),
url('accounts/', include('allauth.urls')),
url('', views.Home.as_view(), name='home'),
] + static(settings.STATIC_URL)
При запуске сервера в консоли появляются следующие ошибки:
GET http://127.0.0.1:8000/static/ net::ERR_ABORTED
Uncaught ReferenceError: particlesJS is not defined
Структура проекта:
Я только начал изучать django, поэтому знаю, что это может показаться глупым вопросом, но есть идеи, что здесь может быть не так?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Django не может проанализировать остаток:
{% static style.css %} это должен быть {% static 'style.css' %} с кавычками
{% static particles.json %} должен быть {% static 'particles.json' %} с кавычками
Спасибо за предложение! Это действительно решило первую проблему, но я все еще получаю вторую ошибку: «ЧастицыJS не определены». Фон теперь красный, но частицы не появляются, так как он не видит js.
опубликуйте эту строку кода в комментарии, позвольте мне посмотреть, как вы это делаете
у вас есть этот particles.json в вашем статическом каталоге?
да, particles.json находится в моем статическом каталоге. Можно ли загрузить js-скрипт прямо из источника? (поскольку я загрузил particles.min.js) или это тоже должно быть в статической папке?
Я также добавил в свой статический каталог файл sizes.min.js, и теперь он отлично работает. Большое спасибо!
Я видел, что люди используют его внутри таких ресурсов, как assets/particles.json .. static - это корневой каталог на основе settings, вы можете установить любой путь, как только сделаете это с помощью / .. например, если у вас внутри static, каталог с именем css, а внутри у вас есть style.css, путь будет '/static/css/style.css' -> {% static 'css/style.css' %}
Рад помочь!
Я не знаю, почему вы не видите никакой ошибки, но почти уверен, что он не может найти частицы.json или ваши файлы styles.css, поскольку их не должно быть в папке ваших шаблонов. Это статические файлы, и вам нужно убедиться, что вы поместили их в каталог, который может быть найден вашим сервером для статических файлов. Посмотрите на как управлять статическими файлами.