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