我的 css 更新页面未正确加载，但其他页面运行良好

Question

当我尝试使用主键渲染模板传递参数或 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

显示错误

但如果我们只是删除 pk 的使用，那么 css 将会加载

它应该看起来像

这是我的模板代码

{% 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>

Answer 1

您正在加载 static 文件：

<script <s>src="../static/elegant/vendor/jquery/jquery.min.js"</s>></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 <b>src=/static/elegant/vendor/jquery/jquery.min.js"</b>></script>

甚至更好，使用 {% static … %} [Django-doc] 模板标签：

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

然后它会在参数前添加 STATIC_URL setting [Django-doc] 的值，这使得以后更改静态 URL.

变得容易

您需要更新带有 ../static/ 前缀的所有项目。

我的 css 更新页面未正确加载，但其他页面运行良好

my css of update page not loading correctly but other page are working very fine

css

django

django-templates

django-forms

django-views