为什么我的 Django 项目 JavaScript 文件无法加载，而 CSS 文件放在同一个静态文件夹中时却加载成功？
问题描述 投票：0回答：1
我在让我的项目加载 Js 文件和功能时遇到问题。我正在使用来自互联网的this模板。所有静态文件（图像、CSS 和 Js）都位于“static”文件夹内，但只有 Js 未加载。例如，swiper 和 data-aos 不起作用。
#基础模板
{% 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>
#静态文件夹树
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
#网络选项卡开发工具
我尝试将所有 J 放入一个新块中，但没有成功。
1个回答
0
投票
投票
就我而言，当我将 SSL 添加到服务器时，问题就解决了。 我使用了 Let's Encrypt 服务。
最新问题
- Podio .Net CreateItem 参考
- podio .net ID 为 XXXXXXX 的应用程序在 ID 为 XXXXXXX 的个人资料上没有正确的视图
- .NET 的 Podio API - 无法创建项目
- 如何接收非原始对象作为查询参数？
- 通过 .NET API 切换跑道中的隐藏字段
- 是否可以使用 .NET Podio API 以 Globiflow 的方式从 Podio 发送电子邮件？
- 我想在最后一次将长网址转换为短网址...如何做到这一点
- Postgres 在 BIGINT 列上使用索引吗？
- 使用 laravel splade 在刀片文件中显示顶点图时遇到问题
- QGIS - 表达式过滤器不起作用 - 特征数量永远不对
- DateUtil 中的 CompareIgnoreTime()
- 使用 Build Tools 2022 安装 MSTest 需要哪些工作负载？
- 如何在Python中抓取Instagram帐户信息
- Adobe AIR 可以利用的最大内存量是多少？
- Python 到 Redis 集群的连接超时
- Appsheet 使用机器人更新现有行列
- 元素的屏幕坐标，通过 Javascript
- 如何使用NestJS在Bull Board注册多个队列
- 如何防止在行提交时不断重新渲染 MUI `DataGrid`？
- 我无法连接到 Digital Ocean Managed (Postgres) 数据库
© www.soinside.com 2019 - 2024. All rights reserved.