Django base.html扩展为homepage.html,出现静态图像,但home.css不起作用

2024-05-27

Problem:正如标题所示,我正在构建一个 django 项目,base.html 扩展为 homepage.html 并且工作正常,出现静态图像,但 home.css 在任何地方都不起作用。

Update

  • 我已经切换了base.html
  • 由此<link rel="stylesheet" href="{% static 'css/home.css' %}">
  • to this <link href="css/home.css" rel="stylesheet" />
  • 比我也尝试过这个:<link rel="stylesheet" type="text/css" href="{% static 'css/home.css' %}" />
  • 它删除了 -s 上的格式,该格式是由另一个先前使用的 .css 引起的,此后该文件已被删除,但格式仍然保留。 我已经调用这个CSS属性thickkk{color: red;}base.html 和 home.html 中的很多地方仍然无法正常工作。
  • 如果我使用 /F12/consol/ 检查站点,我还会收到以下错误消息127.0.0.1/:1 Refused to apply style from 'http://127.0.0.1:8000/css/home.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

更新错误消息

Refused to apply style from 'http://127.0.0.1:8000/stacic/css/home.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

特性:Python 3.7、引导程序 4

设置.py

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

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

基本.html

  • 我创建了一个包含导航栏和页脚的 base.html。
  • 这也有从静态 css 和 bootstrap 导入的 CSS
  • 它找到静态文件,因为它导入了此处和主页中出现的图像
<!doctype html>
<html lang="en">
{% load static %}

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="xz">
  <meta name="author" content="xz">
  <link rel="shortcut icon" type="image/png" href="{% static 'favicon.ico' %}"/>
  <link rel="icon" href="/docs/4.0/assets/img/favicons/favicon.ico">
  <title>Click Helps - BE PART OF THE NEW CREATION</title>
  <link rel="canonical" href="https://getbootstrap.com/docs/4.3/examples/carousel/">

  <!-- Bootstrap core CSS -->
  <link href="/docs/4.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
  <link rel="stylesheet" href="{% static 'css/home.css' %}">


</head>

....

<!-- Bootstrap core JavaScript ================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="/docs/4.3/assets/js/vendor/jquery-slim.min.js"><\/script>')</script>
<script src="/docs/4.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-xrRywqdh3PHs8keKZN+8zzc5TX0GRTLCcmivcbNJWm2rs5C8PRhcEn3czEjhAO9o" crossorigin="anonymous"></script>
<!-- I have placed in the followring 3 line from bootstrap to make JS work -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected] /cdn-cgi/l/email-protection/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>

首页.html

  • 我已经用过center我创建的 CSS 属性
{% extends 'applicaonfolderofmine/templates/base.html' %}
{% load static %}

{% block content %}
<main>
<body>
  <div class="container">
    <h1 id="about" class="center" >About</h1>
...

home.css

  • 它可以在“django-project/certainapplication/static/css/home.css”中找到
.center {
  margin: auto;
  width: 60%;
  padding: 10px;
}

终端中的错误消息

Not Found: /docs/4.3/dist/css/bootstrap.min.css
[22/Feb/2020 15:55:26] "GET /docs/4.3/dist/css/bootstrap.min.css HTTP/1.1" 404 2494
Not Found: /docs/4.3/dist/js/bootstrap.bundle.min.js
[22/Feb/2020 16:24:29] "GET /docs/4.3/dist/js/bootstrap.bundle.min.js HTTP/1.1" 404 2509
Not Found: /docs/4.3/dist/js/bootstrap.bundle.min.js
[22/Feb/2020 16:24:29] "GET /docs/4.3/dist/js/bootstrap.bundle.min.js HTTP/1.1" 404 2509

我已阅读以下文章,但它们没有回答我的问题:

  • Django 中基本模板的 css https://stackoverflow.com/questions/32653881/css-for-base-template-in-django
  • 在所有扩展 css 文件之后添加 css 文件 https://stackoverflow.com/questions/27752533/adding-css-file-after-all-extensions-css-files
  • Django 用户配置文件扩展 https://stackoverflow.com/questions/9368769/django-userprofile-extension
  • CSS 的背景在 Base.html 中不起作用 https://stackoverflow.com/questions/59187032/background-from-css-not-working-in-base-html
  • Django mptt,扩展“base.html” https://stackoverflow.com/questions/12769145/django-mptt-extends-base-html
  • Django 中的 { % extends Parent _ template|default:"base.html" % } vs {% extends "base.html" %} ? https://stackoverflow.com/questions/53774300/extends-parent-templatedefaultbase-html-vs-extends-base-html
  • Django 模板扩展和 CSS https://stackoverflow.com/questions/8343176/django-templates-extending-and-css
  • Django 的扩展是如何工作的? https://stackoverflow.com/questions/32513828/how-does-djangos-extends-work/32513994#32513994

正如你所拥有的STATICFILES_DIRS remove STATIC_ROOT然后输入python manage.py collectstatic,然后是,然后再次运行您的服务器。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Django base.html扩展为homepage.html,出现静态图像,但home.css不起作用 的相关文章

  • 从 Flask 访问 Heroku 变量

    我已经使用以下命令在 Heroku 配置中设置了数据库变量 heroku config add server xxx xxx xxx xxx heroku config add user userName heroku config add
  • 如何让 Django 和 ReactJS 协同工作?

    New to Django and even newer to ReactJS I have been looking into AngularJS and ReactJS but decided on ReactJS It seemed
  • Bootstrap按钮加载+Ajax

    我正在使用 Twitter Bootstrap 的按钮加载状态 http twitter github com bootstrap javascript html buttons http twitter github com bootst
  • Flask如何获取请求的HTTP_ORIGIN

    我想用我自己设置的 Access Control Allow Origin 标头做出响应 而弄清楚请求中的 HTTP ORIGIN 参数在哪里似乎很混乱 我在用着烧瓶 0 10 1 以及HTTP ORIGIN似乎是这个的特点之一object
  • Jquery 数据表列总和

    我只是参考一下这个链接 https datatables net examples advanced init footer callback html了解如何获取 jquery 数据表中的列总计 但我已经完成了一半的项目 我在html页面
  • 在Python中获取文件描述符的位置

    比如说 我有一个原始数字文件描述符 我需要根据它获取文件中的当前位置 import os psutil some code that works with file lp lib open path to file p psutil Pro
  • IO 密集型任务中的 Python 多线程

    建议仅在 IO 密集型任务中使用 Python 多线程 因为 Python 有一个全局解释器锁 GIL 只允许一个线程持有 Python 解释器的控制权 然而 多线程对于 IO 密集型操作有意义吗 https stackoverflow c
  • 使用 CSS 使一行 div 高度相同

    我有一排必须具有相同高度的 div 但我无法提前知道该高度可能是多少 内容来自外部源 我最初尝试将 div 放置在封闭的 div 中并将它们向左浮动 然后我将它们的高度设置为 100 但这没有明显的效果 通过将封闭 div 的高度设置为固定
  • 在f字符串中转义字符[重复]

    这个问题在这里已经有答案了 我遇到了以下问题f string gt gt gt a hello how to print hello gt gt gt f a a gt gt gt f a File
  • 在 HTML5 画布中,如何用我选择的背景遮盖图像?

    我试图用画布来实现这一点 globalCompositeOperation 但没有运气 所以我在这里问 这里有类似的问题 但我没有在其中找到我的案例 我的画布区域中有图层 从下到上的绘制顺序 画布底座填充纯白色 fff 用fillRect
  • 刷新页面时保存用户的选择

    我目前有一个页面显示不同团队的数据 我有一些数据 用户可以单击使其处于 打开 或 关闭 状态 并为每个数据显示不同的图标 它基本上就像一个清单 只是没有物理复选框 我想记住哪些 复选框 已被选中 即使在用户刷新页面或关闭浏览器并稍后返回之后
  • 图像背景不透明度不影响边框

    如何设置背景不透明度而不影响边框线不透明度 我找到的解决方案没有帮助 div class selected img src assets img image product 1 thumbnail jpg alt product 1 thu
  • 如何在 Python 中追加到 JSON 文件?

    我有一个 JSON 文件 其中包含 67790 1 kwh 319 4 现在我创建一个字典a dict我需要将其附加到 JSON 文件中 我尝试了这段代码 with open DATA FILENAME a as f json obj js
  • Nginx 与 Daphne 给出 502 Bad Gateway

    由于 Django Channels 和 uwsgi 出现问题 我决定用 daphne 替换 uwsgi 关注后this http masnun rocks 2016 11 02 deploying django channels usin
  • Conda SafetyError:文件大小不正确

    使用创建 Conda 环境时conda create n env name python 3 6 我收到以下警告 Preparing transaction done Verifying transaction SafetyError Th
  • 使用 Python 绘制 2D 核密度估计

    I would like to plot a 2D kernel density estimation I find the seaborn package very useful here However after searching
  • 使用css bootstrap时如何仅向一列添加右边框?

    我正在尝试使用CSS引导框架 http getbootstrap com css tables在我的项目中 我正在使用带有以下类的表table table bordered table striped 我想删除除第一列之外的所有列的边框 这
  • 在 Qt 中自动调整标签文本大小 - 奇怪的行为

    在 Qt 中 我有一个复合小部件 它由排列在 QBoxLayouts 内的多个 QLabels 组成 当小部件调整大小时 我希望标签文本缩放以填充标签区域 并且我已经在 resizeEvent 中实现了文本大小的调整 这可行 但似乎发生了某
  • 从列表指向字典变量

    假设你有一个清单 a 3 4 1 我想用这些信息来指向字典 b 3 4 1 现在 我需要的是一个常规 看到该值后 在 b 的位置内读写一个值 我不喜欢复制变量 我想直接改变变量b的内容 假设b是一个嵌套字典 你可以这样做 reduce di
  • Statsmodels.formula.api OLS不显示截距的统计值

    我正在运行以下源代码 import statsmodels formula api as sm Add one column of ones for the intercept term X np append arr np ones 50

随机推荐