Django base. html расширено до домашней страницы. html, stati c изображения появляются, но дома. css не работает - PullRequest
0 голосов
/ 22 февраля 2020

Проблема : Как видно из названия, я создаю django проект базы. html расширен до домашней страницы. html и работает нормально, изображения stati c появляются, но дома. css нигде не работает.

Обновление

  • Я включил базу. html
  • с этого <link rel="stylesheet" href="{% static 'css/home.css' %}">
  • к этому <link href="css/home.css" rel="stylesheet" />
  • , чем я также пытался это: <link rel="stylesheet" type="text/css" href="{% static 'css/home.css' %}" />
  • Удаляет форматирование на -s, которое было вызвано другим ранее использованным. css, который был удален с тех пор, но форматирование осталось прежним. Я назвал это css свойство thickkk{color: red;} во многих местах как в базе. html, так и в доме. 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, Bootstrap 4

settings.py

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

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

base. html

  • Я создал базу. html, которая содержит навигационную панель и нижний колонтитул.
  • Также имеется CSS, импортированный из состояния c css, а также из bootstrap
  • Находит файлы * stati c, поскольку импортирует изображения, которые появляются здесь и на домашней странице
<!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/popper.js@1.16.0/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>

home. 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 / sureapplication / 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

Я прочитал следующие статьи, но они не ответили на мой вопрос:

Ответы [ 2 ]

2 голосов
/ 24 февраля 2020

Если у вас есть STATICFILES_DIRS, удалите STATIC_ROOT, введите python manage.py collectstatic, затем да, затем снова запустите сервер.

1 голос
/ 25 февраля 2020

Сервер должен ответить с правильным MIME-типом для приложения JSONP / javascript, и ваш запрос должен сообщить jQuery, что вы загружаете JSONP dataType: 'jsonp'

Пожалуйста, смотрите этот ответ для получения дополнительной информации! Вы также можете посмотреть этот файл, так как он объясняет, почему загрузка файла. js с text / plain не будет работать. Отключить Chrome строгая проверка типа MIME

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...