I am trying to build a forum with Django. I want to use an animated background with particles.js. When I write this code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Particles login</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="particles-js">
</div>
<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
<script>
particlesJS.load('particles-js', 'particles.json', function(){
console.log('particles.json loaded...');
});
</script>
</body>
</html>
and run it on live server I get what I want. However, I tweaked the code for Django:
<!DOCTYPE html>
<html lang=en>
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
</head>
<body>
{% include 'snippets/base_css.html' %}
{% include 'snippets/header.html' %}
<!-- Body -->
<style type="text/css">
.main{
min-height: 100vh;
height: 100%;
}
#particles-js{
height: 100%;
color:turquoise;
}
</style>
<div class="main">
<div id="particles-js">
</div>
<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
<script>
particlesJS.load('particles-js', 'particles.json', function(){
console.log('particles.json loaded...');
});
</script>
{% block content %}
{% endblock content %}
</div>
</div>
<!-- End Body -->
{% include 'snippets/footer.html' %}
</body>
</html>
When I run this with Django. I get the following error even though the locations of those files are exactly the same:
Not Found: /style.css
[28/May/2021 00:21:59] "GET /style.css HTTP/1.1" 404 2263
Not Found: /particles.json
[28/May/2021 00:21:59] "GET /particles.json HTTP/1.1" 404 2278
Can someone please enlighten me about this issue? Should I add something to static files in settings.py?
First of all, in settings.py , add this:
STATICFILES_DIRS = [
"<PATH_TO_YOUR_STATIC_DIR>"
]
Then at the beginning of your HTML file, write {% load static %}
After that, wherever you want to reference a static file, do so by making use of the following syntax: {% static 'PATH_TO_STATIC_FILE' %}
For example, <link rel="stylesheet" href="{% static 'css/style.css' %}" />
Do this if you're keeping your style.css file in "css" directory. If not, then directly write {% static 'style.css' %}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.