个人中心
gpt4 book ai didi

html - Django - CSS 文件未正确链接到模板

转载 作者：太空宇宙 更新时间：2023-11-04 05:46:53 24 4
gpt4 key购买 nike

在我的元素中，我尝试将我的 html 模板链接到静态文件夹中的 CSS 文件。我已将 STATIC_ROOT、STATIC_URL 和 STATICFILES_DIRS 添加到我的 settings.py 中。

在我的 static 文件夹中，我有一个名为 styles 的文件夹，其中有一个名为 signup.css 的文件。我还运行了 python manage.py collectstatic。

在我的模板中，我尝试引用该 CSS 文件来更改我的 h1 的颜色，但是没有发生任何更改。

模板:

{% load static %}
    <head>
        <link rel="stylesheet" href="{% static 'styles/signup.css' %}">
    </head>
    <h1>YO</h1>
    <div id="signupformdiv">
        <form class="signupform" action="{% url 'signup' %}">

        </form>
    </div>

signup.css:

h1 {
    color: red;
}

我的 h1 的颜色仍然是黑色。有人知道这个问题吗？谢谢。

源代码:

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


<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>Instagram</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
  <link href="/static/custom.css" rel="stylesheet">
  <link rel="shortcut icon" type="image/png" href="/static/favicon.ico" />
</head>

<body>
  <div class="d-flex flex-column flex-md-row align-items-center p-3 px-md-4 bg-white border-bottom shadow-sm">
    <h5 class="my-0 mr-md-auto font-weight-normal"><a class="text-dark">Instagram</a></h5>
    <nav class="my-2 my-md-0 mr-md-3">
  </div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>



    <head>
        <link rel="stylesheet" href="/static/styles/signup.css">
    </head>
    <h1>YO</h1>
    <div id="signupformdiv">
        <form class="signupform" action="/users/signup/">

        </form>
    </div>


</body>

</html>

浏览器错误:加载资源失败:服务器响应状态为 404(未找到)

settings.py:

STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'instagram/static/')
]

STATIC_ROOT = os.path.join(BASE_DIR, 'static')
STATIC_URL = '/static/'

MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
MEDIA_URL = '/media/'

元素结构:instagram-project 是根，名为 instagram 的子文件夹，其中我有一个名为“static”的文件夹

在根目录中，我有一个静态文件夹，所有静态文件都发送到该文件夹​​。

在用户应用程序中，我有一个名为模板的文件夹，其中存储了我的模板。

** 基础.HTML **

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>Instagram</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">  <link rel="stylesheet" href="{% static 'styles/signup.css' %}">

  <link rel="shortcut icon" type="image/png" href="{% static 'favicon.ico' %}" />

</head>

最佳答案

问题是服务器找不到您的静态文件不是因为它们不存在，而是因为它们没有 urlpattern，more info 

# project urls.py
from django.conf import settings
from django.conf.urls.static import static

urlpatterns = []
if settings.DEBUG:
    urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)

这应该可以解决

关于html - Django - CSS 文件未正确链接到模板，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58635590/

24 4 0
文章推荐： python 3 : nested dictionary with multiple keys from csv
文章推荐： css - 从页面中心开始生长 "blast"光动画
文章推荐： python - gsutil ssl.SSLError : [Errno 185090050]
文章推荐： python - 如何检索用户在终端中输入的文本(但在用户按下回车键之前)
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com