【问题标题】:Why isn't my CSS, Javascipt, and bootstrap not showing up in my django site?为什么我的 django 站点中没有显示我的 CSS、Javascript 和引导程序?
【发布时间】:2021-12-26 09:33:39
【问题描述】:

我正在使用 Djanog 初学者书籍,它告诉我只需复制和粘贴,但是当我这样做时,它不起作用。功能正常(登录、注销等)只是这本书显示了网站正在更新并且看起来比我的要好。

这是我的 base.html 文件:

<html lang="en">
<head>


<meta charset="utf-8">
<meta name="viewport" content="width=device-width,
initial-scale=1, shrink-to-fit=no">

<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81i
uXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<title>{% block title %}Newspaper App{% endblock title %}</title>
</head>
<body>
<nav class="navbar navbar-expand-md navbar-dark bg-dark mb-4">
<a class="navbar-brand" href="{% url 'home' %}">Newspaper</a>
<button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarCollapse" aria-controls="navbarCollapse"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
{% if user.is_authenticated %}
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link dropdown-toggle" href="#" id="userMenu"
data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">
{{ user.username }}
</a>
<div class="dropdown-menu dropdown-menu-right"
aria-labelledby="userMenu">
<a class="dropdown-item"
href="{% url 'password_change'%}">Change password</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="{% url 'logout' %}">
Log Out</a>
</div>

</li>
</ul>
{% else %}
<form class="form-inline ml-auto">
<a href="{% url 'login' %}" class="btn btn-outline-secondary">
Log In</a>
<a href="{% url 'signup' %}" class="btn btn-primary ml-2">
Sign up</a>
</form>
{% endif %}
</div>
</nav>
<div class="container">
{% block content %}
{% endblock content %}
</div>


<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4\
YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/popper.min.js"
integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAKl8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>

其他 HTML 文件:

Signup.html:

{% extends 'base.html' %}

{% block title %}Sign Up{% endblock title %}

{% block content %}
<h2>Sign Up</h2>
<form method="post">
    {% csrf_token %}
    {{ form.as_p }}
    <button type="submit">Sign Up</button>
</form>
{% endblock content %}

home.html:

{% extends 'base.html' %}

{% block title %}Home{% endblock title %}

{% block content %}
{% if user.is_authenticated %}
Wassup {{ user.username }}!
<p><a href="{% url 'logout' %}">Log Out</a></p>
{% else %}
<p>You Are Not Logged In MAN</p>
<a href="{% url 'login' %}">Log In</a> |
<a href="{% url 'signup' %}">Sign Up</a>
{% endif %}
{% endblock content %}

login.html:

{% extends 'base.html' %}

{% block title %}Log In{% endblock title %}

{% block content %}
<h2>Log In</h2>
<form method="post">
    {% csrf_token %}
    {{ form.as_p }}
    <button type="submit">Log In</button>
</form>
{% endblock content %}

注意:login.html 位于另一个名为“registration”的目录中,该目录位于我的模板目录中。

这本书甚至没有告诉我下载 Bootstrap(即使我是初学者,我也觉得我应该下载 Bootstrap 才能使用它)。如果有人知道问题是什么,请帮忙。

【问题讨论】:

  • 不,不需要下载引导程序,您可以通过 CDN 使用它。哪个文件看起来不好 base.html 或其他文件?您的引导 CDN 存在问题,您的 CDN 中有一个 \(反斜杠)删除它可以工作
  • 我不是 100% 知道哪个文件有问题,尽管我很确定它是 base.html 文件,因为我没有更改任何其他内容(关于引导程序的主题)。你能指出我的代码中的“\”在哪里吗?我好像没找到。
  • &lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/\ bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81i\ uXoPkFOJwJ8ERdknLPMO"&gt;这个有问题,这个是正确的&lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/ bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81i uXoPkFOJwJ8ERdknLPMO"&gt;用这个替换CDN
  • 如果你扩展你的 base.html 比你必须使用 django teamplate {% block body %} 参考这个文档以获得更多信息。 docs.djangoproject.com/en/3.2/ref/templates/language/#templates
  • 就像我说的那样,我只是复制并粘贴了代码,所以我不确定是否有任何问题。如果扩展我的 base.html 文件意味着另一个 HTML 文件具有标签 {% extends 'base.html' %},那么我应该将 {% block body %} 放在我的 base.html 文件的顶部?

标签: python css django


【解决方案1】:

实际上问题在于完整性属性,它包含错误的 SRI 哈希,因此无法从资源服务器加载,只需复制给定代码并尝试它是否正常工作

<!DOCTYPE html>
<html lang="en">

<head>


    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,
initial-scale=1, shrink-to-fit=no">

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
        integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <title>{% block title %}Newspaper App{% endblock title %}</title>
</head>

<body>
    <nav class="navbar navbar-expand-md navbar-dark bg-dark mb-4">
        <a class="navbar-brand" href="{% url 'home' %}">Newspaper</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse"
            aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarCollapse">
            {% if user.is_authenticated %}
            <ul class="navbar-nav ml-auto">
                <li class="nav-item">
                    <a class="nav-link dropdown-toggle" href="#" id="userMenu" data-toggle="dropdown"
                        aria-haspopup="true" aria-expanded="false">
                        {{ user.username }}
                    </a>
                    <div class="dropdown-menu dropdown-menu-right" aria-labelledby="userMenu">
                        <a class="dropdown-item" href="{% url 'password_change'%}">Change password</a>
                        <div class="dropdown-divider"></div>
                        <a class="dropdown-item" href="{% url 'logout' %}">
                            Log Out</a>
                    </div>

                </li>
            </ul>
            {% else %}
            <form class="form-inline ml-auto">
                <a href="{% url 'login' %}" class="btn btn-outline-secondary">
                    Log In</a>
                <a href="{% url 'signup' %}" class="btn btn-primary ml-2">
                    Sign up</a>
            </form>
            {% endif %}
        </div>
    </nav>
    <div class="container">
        {% block content %}
        {% endblock content %}
    </div>


    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
        integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
        crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
        integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
        crossorigin="anonymous"></script>
</body>

</html>

如果你卡在任何地方,你可以关注 bootstrap 官方doc.

【讨论】:

  • 谢谢你成功了!仅供参考:我正在使用 Django 初学者书籍。
猜你喜欢
  • 2021-09-10
  • 1970-01-01
  • 2018-07-07
  • 2020-07-26
  • 2011-05-24
  • 1970-01-01
  • 2019-06-11
  • 1970-01-01
  • 2019-08-01
相关资源
最近更新 更多