gpt4 book ai didi

javascript - 将 JS 库与 Django 一起使用

转载 作者:行者123 更新时间:2023-12-01 02:04:49 24 4
gpt4 key购买 nike

我在 django 中使用 js 库时遇到问题。我正在尝试使用 particle.js库为主页生成粒子背景,我尝试过以下 this tutorial

我在静态文件夹中创建了 article.jsonstyle.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>

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

项目结构:

enter image description here

我刚刚开始学习 django,所以我知道这可能听起来像一个愚蠢的问题,但知道这里可能出了什么问题吗?

最佳答案

Django 无法解析其余部分:

{% static style.css %} 这应该是 {% static 'style.css' %} 带引号

{% static keywords.json %} 应该是 {% static 'articles.json' %} 带引号

关于javascript - 将 JS 库与 Django 一起使用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50200273/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com