Ad

Static Files On Password_reset_confirm In Django Project Page Do Not Load

- 1 answer

I am trying to load static files in a django project. I make a system of registration, login and password change. In the case when I go to the pages of my project, static files are loaded. However, if I reset my password and later go to the password change page (http://127.0.0.1:8000/password_reset_confirm/MQ-set-password/) django does not load static files.

I am using django 2.2.6, python 3.7.3.


Project structure

-project
 -core
   models.py
   forms.py
   views.py
   ...
 -settings
   settings.py
   urls.py
   ...
 -static
  ...
 -templates
  ...
 manage.py
 ...

urls.py

from django.contrib import admin
from django.urls import path, include
from django.contrib.auth.views import PasswordResetView, PasswordResetCompleteView, PasswordResetConfirmView
from django.conf.urls import url
from core import views

urlpatterns = [
    path('', views.home, name='home'),
    path('signup/', views.signup, name='signup'),
    path('login/', views.LoginView.as_view(), name="login"),
    path('password_change_form/', views.LoginView.as_view(), name='password_change_form'),
    path('password_change_confirm/', views.LoginView.as_view(), name='password_change_confirm'),
    path('password_reset/', PasswordResetView.as_view(), name='password_reset'),
    url(r'password_reset_confirm/(?P<uidb64>[0-9A-Za-z]+)-(?P<token>.+)/$', PasswordResetConfirmView.as_view(), name='password_reset_confirm'),
    path('password_reset_done/', PasswordResetCompleteView.as_view(), name='password_reset_done'),
    path('secret/', views.secret_page, name='secret'),
    path('admin/', admin.site.urls)
]

password_reset_confirm

{% extends 'base.html' %}

{% block content %}
    <h2>Set new password</h2>
    {% if validlink %}
    <form method="post">
        {% csrf_token %}
        {{ form.as_p }}
        <button type="submit">Save</button>
    </form>
    {% else %}
        <p style="color:red;">Invalid token.</p>
        <p>
            <a target="_blank" rel="nofollow noreferrer" href="{% url 'password_reset' %}">Request a new password reset token</a>
        </p>
    {% endif %}
{% endblock %}

base.html

<!DOCTYPE html>
<html lang="en">
{% load static %}

<head>
    <!-- Metas -->
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Django Fishing</title>
    <meta name="description" content="GRAPE – Multipurpose App Landing HTML Template is a modern, unique and clean design for your Business Purpose. Users will love Your site because it gives them a unique user experience.">

    <!-- External CSS -->
    <link rel="stylesheet" target="_blank" rel="nofollow noreferrer" href="../static/core/assets/css/bootstrap.min.css">
    <link rel="stylesheet" target="_blank" rel="nofollow noreferrer" href="../static/core/assets/css/font-awesome.min.css">
    <link rel="stylesheet" target="_blank" rel="nofollow noreferrer" href="../static/core/assets/css/et-line.css">
    <link rel="stylesheet" target="_blank" rel="nofollow noreferrer" href="../static/core/assets/css/magnific-popup.css">
    <link rel="stylesheet" target="_blank" rel="nofollow noreferrer" href="../static/core/assets/css/animate.css">
    <link rel="stylesheet" target="_blank" rel="nofollow noreferrer" href="../static/core/assets/css/owl.carousel.css">
    <link rel="stylesheet" target="_blank" rel="nofollow noreferrer" href="../static/core/assets/css/owl.transitions.css">
    <link rel="stylesheet" target="_blank" rel="nofollow noreferrer" href="../static/core/assets/css/plyr.css">

    <!-- Custom CSS -->
    <link rel="stylesheet" target="_blank" rel="nofollow noreferrer" href="../static/core/css/style.css">
    <link rel="stylesheet" target="_blank" rel="nofollow noreferrer" href="../static/core/css/responsive.css">

    <!-- Google font -->
    <link target="_blank" rel="nofollow noreferrer" href="https://fonts.googleapis.com/css?family=Poppins:300,400%7CUbuntu:400,700%7COpen+Sans" rel="stylesheet">

    <!-- Favicon -->
    <link rel="icon" target="_blank" rel="nofollow noreferrer" href="../static/core/images/favicon.png">
    <link rel="apple-touch-icon" target="_blank" rel="nofollow noreferrer" href="../static/core/images/apple-touch-icon.png">
    <link rel="apple-touch-icon" sizes="72x72" target="_blank" rel="nofollow noreferrer" href="../static/core/images/icon-72x72.png">
    <link rel="apple-touch-icon" sizes="114x114" target="_blank" rel="nofollow noreferrer" href="../static/core/images/icon-114x114.png">

    <!--[if lt IE 9]>
    <script src="../static/core/assets/js/html5shiv.min.js"></script>
    <script src="../static/core/assets/js/respond.min.js"></script>
    <![endif]-->
</head>

<body>
<div class="loader-wrap" id="loader-wrap">
    <div class="cssload-loader"></div>
</div>
<!-- Preloader End -->

<!-- Navigation -->
<nav class="navbar navbar-default" data-spy="affix" data-offset-top="60">
    <div class="container">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" target="_blank" rel="nofollow noreferrer" href="{% url 'home' %}">
                <img src="../static/core/images/50h/logo.png" alt="Site Logo">
            </a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="navbar-collapse">
            <ul class="nav navbar-nav navbar-right" id="one-page-nav">
                <li><a target="_blank" rel="nofollow noreferrer" href="{% url 'home' %}">Главная</a></li>
                <li><a target="_blank" rel="nofollow noreferrer" href="#feature">Возможности</a></li>
                <li><a target="_blank" rel="nofollow noreferrer" href="#description">Почему мы</a></li>
                <li><a target="_blank" rel="nofollow noreferrer" href="#screenshot">Форум</a></li>
                <li><a target="_blank" rel="nofollow noreferrer" href="#pricing">Цены</a></li>
                <li><a target="_blank" rel="nofollow noreferrer" href="#support">Поддержка</a></li>
                <li><a target="_blank" rel="nofollow noreferrer" href="#download">Скачать</a></li>
                <li><a target="_blank" rel="nofollow noreferrer" href="#contact">Контакты</a></li>
            </ul>
        </div>
        <!-- /.navbar-collapse -->
    </div>
    <!-- /.container-fluid -->
</nav>
<div id="banner" class="banner">
    <div class="banner-item banner-1 steller-parallax" data-stellar-background-ratio="0.5">

    </div>
</div>
{% block content %}{% endblock content %}

<footer>

    <!-- Footer Subscribe -->
    <div class="subscription-area section-padding theme-bg">
        <div class="container">
            <div class="row">
                <div class="col-md-6">
                    <h3 class="wow fadeInLeft" data-wow-duration="1.5s">Подпишитесь на нашу<br/>новостную ленту</h3>
                </div>
                <div class="col-md-6">
                    <form class="subscription wow fadeInRight" data-wow-duration="1.5s" action="#" method="post">
                        <input type="email" name="email" placeholder="Введите вашу почту здесь" required>
                        <button type="submit">Подтвердить</button>
                        <p class="newsletter-success"></p>
                        <p class="newsletter-error"></p>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <!-- Footer Subscribe -->

    <!-- Footer logo and social media button -->
    <div class="logo-social-area section-padding">
        <div class="container text-center">
            <a class="logo logo-footer wow fadeInDown" data-wow-duration="1.5s" target="_blank" rel="nofollow noreferrer" href="#">
                <img src="../static/core/images/50h/logo.png" alt="Site Logo">
            </a>
            <div class="socials wow fadeInUp" data-wow-duration="1.5s">
                <a target="_blank" rel="nofollow noreferrer" href="#"><i class="fa fa-facebook"></i></a>
                <a target="_blank" rel="nofollow noreferrer" href="#"><i class="fa fa-twitter"></i></a>
                <a target="_blank" rel="nofollow noreferrer" href="#"><i class="fa fa-google-plus"></i></a>
                <a target="_blank" rel="nofollow noreferrer" href="#"><i class="fa fa-youtube-play"></i></a>
                <a target="_blank" rel="nofollow noreferrer" href="#"><i class="fa fa-vimeo"></i></a>
            </div>
        </div>
    </div>
    <!-- Footer logo and social media button -->

    <!-- Footer copyrgiht and navigation -->
    <div class="copyright-footer">
        <div class="container">
            <div class="row">
                <div class="col-md-6 col-xs-12">
                    <p class="copyright">@ Copyright 2019, <a target="_blank" rel="nofollow noreferrer" href="#">django fishing</a>. All Right Reserved</p>
                </div>
                <div class="col-md-6 col-xs-12">
                    <ul class="footer-nav">
                        <li><a target="_blank" rel="nofollow noreferrer" href="#">Правовая информация</a></li>
                        <li><a target="_blank" rel="nofollow noreferrer" href="#">Наша команда</a></li>
                        <li><a target="_blank" rel="nofollow noreferrer" href="#">Блог</a></li>
                        <li><a target="_blank" rel="nofollow noreferrer" href="#">FAQ</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <!-- Footer copyrgiht and navigation -->
</footer>
<script src="../static/core/assets/js/jquery.min.js"></script>
<script src="../static/core/assets/js/bootstrap.min.js"></script>
<script src="../static/core/assets/js/jquery.nav.js"></script>
<script src="../static/core/assets/js/wow.min.js"></script>
<script src="../static/core/assets/js/jquery.localScroll.min.js"></script>
<script src="../static/core/assets/js/jquery.magnific-popup.min.js"></script>
<script src="../static/core/assets/js/owl.carousel.js"></script>
<script src="../static/core/assets/js/plyr.js"></script>
<script src="../static/core/assets/js/jquery.ajaxchimp.min.js"></script>
<script src="../static/core/assets/js/jquery.stellar.min.js"></script>
<script src="../static/core/js/map.js"></script>
<script src="../static/core/js/custom.js"></script>
</body>

</html>
Ad

Answer

Don't use explicit relative paths, use the {% static ...%} template tag. E.g. replace this:

<script src="../static/core/assets/js/jquery.min.js"></script>

with this:

<script src="{% static 'core/assets/js/jquery.min.js' %}"></script>
Ad
source: stackoverflow.com
Ad