I am having issues to make my project load the Js files and functionalities. I am using this template from the internet. All of the static files (images, CSS and Js) are located inside the "static" folder but only Js is not loading. For example, the swiper and the data-aos are not working.
#Base template
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
{% load static %}
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>Pezorium</title>
<meta content="" name="description">
<meta content="" name="keywords">
<!-- Favicons -->
<link href="{% static 'img/favicon_fish_white.png' %}" rel="shortcut icon" type="image/png">
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=EB+Garamond:wght@400;500&family=Inter:wght@400;500&family=Playfair+Display:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
<!-- Vendor CSS Files -->
<link href="{% static 'vendor/bootstrap/css/bootstrap.min.css' %}" rel="stylesheet">
<link href="{% static 'vendor/bootstrap-icons/bootstrap-icons.css' %}" rel="stylesheet">
<link href="{% static 'vendor/swiper/swiper-bundle.min.css' %}" rel="stylesheet">
<link href="{% static 'vendor/glightbox/css/glightbox.min.css' %}" rel="stylesheet">
<link href="{% static 'vendor/aos/aos.css' %}" rel="stylesheet">
<!-- Template Main CSS Files -->
<link href="{% static 'css/variables.css' %}" rel="stylesheet">
<link href="{% static 'css/main.css' %}" rel="stylesheet">
<!-- =======================================================
* Template Name: ZenBlog
* Updated: Jan 29 2024 with Bootstrap v5.3.2
* Template URL: https://bootstrapmade.com/zenblog-bootstrap-blog-template/
* Author: BootstrapMade.com
* License: https:///bootstrapmade.com/license/
======================================================== -->
</head>
<body>
<header id="header" class="header d-flex align-items-center fixed-top">
<div class="container-fluid container-xl d-flex align-items-center justify-content-between">
<a href="{% url 'index' %}" class="logo d-flex align-items-center">
<img src="{% static 'img/icon_fish.png' %}" alt="logo image">
<h1>Pezorium</h1>
</a>
<nav id="navbar" class="navbar">
<ul>
<li class="dropdown"><a href="{% url 'index' %}"><span>Blog</span><i class="bi bi-chevron-down dropdown-indicator"></i></a>
<ul>
<li><a href="{% url 'new_post' %}">Agregar post</a></li>
</ul>
</li>
<li><a href="{% url 'about' %}">Nosotros</a></li>
<li><a href="{% url 'contact' %}">Contacto</a></li>
<li class="dropdown">
<a href="#">
{% if user.is_authenticated %}
{% if user.avatar_set.exists %}
<img src="{{ user.avatar_set.last.image.url }}" alt="avatar" class="avatar avatar-sm rounded-circle" style="width: 33px; height: 33px;">
{% else %}
<img src="{% static 'img/generic_avatar.avif' %}" alt="Avatar genérico" class="avatar avatar-sm rounded-circle" style="width: 33px; height: 33px;">
{% endif %}
<span>{{ user.username }}</span>
{% else %}
<span>Usuario</span>
{% endif %}
<i class="bi bi-chevron-down dropdown-indicator"></i>
</a>
<ul>
{% if user.is_authenticated %}
<li><a href="{% url 'user_profile' user.username %}" class="btn">Ver perfil</a></li>
<li><a href="{% url 'logout' %}" class="btn">Cerrar sesión</a></li>
{% else %}
<li><a href="{% url 'login' %}" class="btn">Iniciar sesión</a></li>
<li><a href="{% url 'signup' %}" class="btn">Registrarse</a></li>
{% endif %}
</ul>
</li>
</ul>
</nav>
<form class="form-inline my-2 my-leg-0 d-flex">
<input class="form-control mr-sm-2" type="search" placeholder="Buscar en el blog" name="search">
<button class="btn btn-primary" type="submit">Buscar</button>
</form>
</header>
<main id="main">
{% block page_content %}
{% block page_title %}
{% endblock page_title %}
{% endblock page_content %}
</main>
<footer class="footer d-flex justify-content-center align-items-center bg-black">
<div class="footer-legal d-flex align-items-center">
<div class="container d-flex align-items-center">
<div class="flex-column" class="justify-content-center">
<div class="d-flex flex-column justify-content-center align-items-center">
<div class="copyright" style="font-size: 14px;">
<p><strong>© Copyright Pezorium 2024.</strong> Todos los derechos reservados</p>
</div>
<div class="credits" style="font-size: 13px;">
Diseñado por Julián Molinelli
</div>
</div>
</div>
</div>
</div>
</footer>
<!-- Vendor JS Files -->
<script src="{% static 'vendor/bootstrap/js/bootstrap.bundle.min.js' %}"></script>
<script src="{% static 'vendor/swiper/swiper-bundle.min.js' %}"></script>
<script src="{% static 'vendor/glightbox/js/glightbox.min.js' %}"></script>
<script src="{% static 'vendor/aos/aos.js' %}"></script>
<script src="{% static 'vendor/php-email-form/validate.js' %}"></script>
<!-- Template Main JS File -->
<script src="{% static 'js/main.js' %}"></script>
</body>
</html>
#Static folder tree
C:.
├───css
│ main.css
│ variables.css
│
├───img
│ about_1.jpg
│ about_2.webp
│ about_3.avif
│ apple-touch-icon.png
│ confused-fish.gif
│ favicon_fish_white.png
│ Foto_CV_2024 (1).jpg
│ generic_avatar.avif
│ icon_fish.png
│ logo.png
│ person-1.jpg
│ person-2.jpg
│ person-3.jpg
│ person-4.jpg
│ person-5.jpg
│ person-6.jpg
│ person-7.jpg
│ post-landscape-1.jpg
│ post-landscape-2.jpg
│ post-landscape-3.jpg
│ post-landscape-4.jpg
│ post-landscape-5.jpg
│ post-landscape-6.jpg
│ post-landscape-7.jpg
│ post-landscape-8.jpg
│ post-portrait-1.jpg
│ post-portrait-2.jpg
│ post-portrait-3.jpg
│ post-portrait-4.jpg
│ post-portrait-5.jpg
│ post-portrait-6.jpg
│ post-portrait-7.jpg
│ post-portrait-8.jpg
│ post-slide-1.jpg
│ post-slide-2.jpg
│ post-slide-3.jpg
│ post-slide-4.jpg
│ post-slide-5.jpg
│ post-slide-6.jpg
│ post-sq-1.jpg
│ post-sq-2.jpg
│ post-sq-3.jpg
│ post-sq-4.jpg
│ post-sq-5.jpg
│ post-sq-6.jpg
│ post-sq-7.jpg
│ post-sq-8.jpg
│
├───js
│ main.js
│
└───vendor
├───aos
│ aos.cjs.js
│ aos.css
│ aos.esm.js
│ aos.js
│ aos.js.map
│
├───bootstrap
│ ├───css
│ │ bootstrap-grid.css
│ │ bootstrap-grid.css.map
│ │ bootstrap-grid.min.css
│ │ bootstrap-grid.min.css.map
│ │ bootstrap-grid.rtl.css
│ │ bootstrap-grid.rtl.css.map
│ │ bootstrap-grid.rtl.min.css
│ │ bootstrap-grid.rtl.min.css.map
│ │ bootstrap-reboot.css
│ │ bootstrap-reboot.css.map
│ │ bootstrap-reboot.min.css
│ │ bootstrap-reboot.min.css.map
│ │ bootstrap-reboot.rtl.css
│ │ bootstrap-reboot.rtl.css.map
│ │ bootstrap-reboot.rtl.min.css
│ │ bootstrap-reboot.rtl.min.css.map
│ │ bootstrap-utilities.css
│ │ bootstrap-utilities.css.map
│ │ bootstrap-utilities.min.css
│ │ bootstrap-utilities.min.css.map
│ │ bootstrap-utilities.rtl.css
│ │ bootstrap-utilities.rtl.css.map
│ │ bootstrap-utilities.rtl.min.css
│ │ bootstrap-utilities.rtl.min.css.map
│ │ bootstrap.css
│ │ bootstrap.css.map
│ │ bootstrap.min.css
│ │ bootstrap.min.css.map
│ │ bootstrap.rtl.css
│ │ bootstrap.rtl.css.map
│ │ bootstrap.rtl.min.css
│ │ bootstrap.rtl.min.css.map
│ │
│ └───js
│ bootstrap.bundle.js
│ bootstrap.bundle.js.map
│ bootstrap.bundle.min.js
│ bootstrap.bundle.min.js.map
│ bootstrap.esm.js
│ bootstrap.esm.js.map
│ bootstrap.esm.min.js
│ bootstrap.esm.min.js.map
│ bootstrap.js
│ bootstrap.js.map
│ bootstrap.min.js
│ bootstrap.min.js.map
│
├───bootstrap-icons
│ │ bootstrap-icons.css
│ │ bootstrap-icons.json
│ │ bootstrap-icons.min.css
│ │ bootstrap-icons.scss
│ │
│ └───fonts
│ bootstrap-icons.woff
│ bootstrap-icons.woff2
│
├───glightbox
│ ├───css
│ │ glightbox.css
│ │ glightbox.min.css
│ │ plyr.css
│ │ plyr.min.css
│ │
│ └───js
│ glightbox.js
│ glightbox.min.js
│
├───php-email-form
│ validate.js
│
└───swiper
swiper-bundle.min.css
swiper-bundle.min.js
swiper-bundle.min.js.map
#Network tab DevTools
I tried putting all the Js inside a new block but it didn't work.
In my case that problem was solved when I add SSL to sever. I used Let's Encrypt service.