Мой css страницы обновления не загружается правильно, но другие страницы работают очень хорошо

Когда я пытаюсь отобразить шаблон, передавая аргумент с первичным ключом или ID CSS не загружается, как ожидалось, но когда я пытаюсь отобразить его просто с запросом без передачи id arg он загружается отлично.

viewsy.py

def update_lead(request,pk):
    leads = Lead.objects.get(id = pk)
    followup = Followup.objects.all
    agent = Agent.objects.all
    source = Source.objects.all
    print(f"the leads are {leads}")
    context = {"lead":leads,"followup":followup,"agent":agent,"source":source}
    
    return render(request,"home/update_lead.html",context)

Вот как это выглядит на фронтенде, когда я пытаюсь передать id с моим представлением, он не загружает css, который ожидается enter image description here

он показывает ошибку enter image description here

но если просто убрать использование pk, то css будет загружаться

и это должно выглядеть как enter image description here

вот код моих шаблонов

{% extends 'base.html' %}

{% block body %}
<div class="container">
  <h2>Create Lead</h2>
  <form action="creat_handle_lead" method="POST">
    {% csrf_token %}
    <div class="form-row">
      <div class="form-group col-md-6">
        <label for="inputEmail4">Name</label>
        <input type="text" class="form-control" id="inputEmail4" required name="name" value="{{lead.name}}">
      </div>
      <div class="form-group col-md-6">
        <label for="inputPassword4">Subject</label>
        <input type="text" class="form-control" id="inputPassword4" name="subject" required value="{{lead.subject}}">
      </div>
    </div>
    <div class="form-row">
      <div class="form-group col-md-6">
        <label for="inputAddress">Email</label>
        <input type="email" class="form-control" id="inputAddress" name="email" placeholder="abc@email.com" value="{{lead.email}}">
      </div>
      <div class="form-group col-md-6">
        <label for="inputAddress2">Contact Number</label>
        <input type="number" class="form-control" id="inputAddress2" name="number"value = "{{lead.number}}" placeholder="99XX80XXXX">
      </div>
    </div>
    
    
    <div class="form-row">
      
      <div class="form-group col-md-4">
        <label for="inputState">Source</label>
        <select id="inputState" class="form-control" name="source">
          {% for x in source %}
          <option value="{{x.name}}">{{x.name}}</option>
          <!-- <option selected></option> -->
          {% endfor %}
          
        </select>
      </div>
      <div class="form-group col-md-4">
        <label for="inputState">Assign To</label>
        <select id="inputState" class="form-control" name="assign">
          {% for x in agent %}
          <option value="{{x.name}}">{{x.name}}</option>
          <!-- <option selected></option> -->
          {% endfor %}
        </select>
      </div>
    </div>
    <div class="form-group">
      <label for="exampleFormControlTextarea1">Initial Followup</label>
      <textarea class="form-control" id="exampleFormControlTextarea1" rows="3" name="followup"></textarea>
    </div>
    <button type="submit" class="btn btn-primary">Update Lead </button>
  </form>
</div>

{% endblock body %}

Вот мой файл base.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="../static/elegant/vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
    <link href="../static/elegant/css/custom.css" rel="stylesheet" type="text/css">
    <link
        href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i"
        rel="stylesheet">

    <!-- Custom styles for this template-->
    <link href="../static/elegant/css/sb-admin-2.min.css" rel="stylesheet">
    <title>{% block title %}   {% endblock title %}</title>
    {% block exhead %}

    {% endblock exhead %}
</head>
<body>
    
    
    {% block body %}
    

    {% endblock body %}


        <!-- Bootstrap core JavaScript-->
        <script src="../static/elegant/vendor/jquery/jquery.min.js"></script>
        <script src="../static/elegant/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
    
        <!-- Core plugin JavaScript-->
        <script src="../static/elegant/vendor/jquery-easing/jquery.easing.min.js"></script>
    
        <!-- Custom scripts for all pages-->
        <script src="../static/elegant/js/sb-admin-2.min.js"></script>
    
        <!-- Page level plugins -->
        <script src="../static/elegant/vendor/chart.js/Chart.min.js"></script>
    
        <!-- Page level custom scripts -->
        <script src="../static/elegant/js/demo/chart-area-demo.js"></script>
        <script src="../static/elegant/js/demo/chart-pie-demo.js"></script>
</body>
</html>

Вы загружаете статические файлы с:

<script src="../static/elegant/vendor/jquery/jquery.min.js"></script>

Если URL выглядит как leads/52, то он загрузится с leads/static/elegant/vendor/jquery/jquery.min.js, что не является тем, что мы ищем. Это происходит из-за того, что .. перемещает на один уровень вверх, поэтому если мы работаем с foo/bar/, то, начав с .., получим foo/static/elegant/…. Но если путь будет foo/bar/qux, то, таким образом, он будет стремиться загрузить данные с foo/bar/static/elegant/… в качестве пути.

Вы можете работать с абсолютным путем, и таким образом реализовать это как:

<script src=/static/elegant/vendor/jquery/jquery.min.js"></script>

или даже лучше, используйте тег шаблона {% static … %} [Django-doc]:

<script src={% static 'elegant/vendor/jquery/jquery.min.js' %}"></script>

Затем он дополнит параметр значением настройки STATIC_URL [Django-doc], что облегчает последующее изменение статического URL.

Вам необходимо обновить все элементы с префиксом ../static/.

Вернуться на верх