Javascript 将JS库与Django一起使用_Javascript_Django

Javascript 将JS库与Django一起使用

javascript django

Javascript 将JS库与Django一起使用,javascript,django,Javascript,Django,我在django中使用js库时遇到问题。我正在尝试使用该库为主页生成粒子背景，并尝试了以下操作我在静态文件夹中创建了particle.json和style.css 更新版本（带有静态文件） home.html  {% load socialaccount %} {% load account %} {% load static %} <head> <link rel="stylesheet" h

我在django中使用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.log('particles.json loaded...');
        });
    </script> </body>

和im我的

url.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，所以我知道这听起来可能是个愚蠢的问题，但你知道这里会出什么问题吗

Django无法解析其余部分：

{%static style.css%}

这应该是带有引号的

{%static'style.css%}

{%static particles.json%}

应该是

{%static'particles.json%}

加引号

Django无法解析剩余部分：

{%static style.css%}

这应该是带有引号的

{%static'style.css%}

{%static particles.json%}

应该是带引号的

{%static'particles.json%}

，我不知道为什么您没有看到任何错误，但它肯定找不到particles.json或您的style.css文件，因为它们不应该在您的templates文件夹中。这些是静态文件，您需要确保将它们放置在服务器可以找到的静态文件目录中。看看。我不知道为什么你没有看到任何错误，但很确定它找不到particles.json或styles.css文件，因为它们不应该在你的templates文件夹中。这些是静态文件，您需要确保将它们放置在服务器可以找到的静态文件目录中。看，谢谢你的建议！这确实解决了第一个问题，但我仍然得到第二个错误“particlesJS未定义”。背景现在是红色的，但粒子没有出现，因为它看不到注释中的jspost这行代码，让我看看你是怎么做的。你的静态目录中有这个

particles.json

吗？我看到人们习惯将它放在

assets/particles.json

之类的资产中。。static是基于

设置的根目录

，您可以使用

设置任何路径。。例如，如果您在

static

中有一个名为

css

的目录，并且在它里面有

style.css

，那么路径将是

'/static/css/style.css'

-->

{%static'css/style.css%}

很高兴能为您提供帮助！谢谢你的建议！这确实解决了第一个问题，但我仍然得到第二个错误“particlesJS未定义”。背景现在是红色的，但粒子没有出现，因为它看不到注释中的jspost这行代码，让我看看你是怎么做的。你的静态目录中有这个

particles.json