Styles are not applied in Django. What's wrong?

I

Ivan Kambur2020-11-29 12:32:39

css

Ivan Kambur, 2020-11-29 12:32:39

I created a second application in Django, and in it I created an HTML document (news.html)

{% extends 'index/layout.html' %}

{% block title %}Новости{% endblock %}

{% block content %}
    <h1>Новости</h1>
    {% for el in news %}
        <div class="alert alert-warning">
            <h3>{{ el.title }}</h3>
            <p>{{ el.anons }}</p>
        </div>
    {% endfor %}
{% endblock %}

Main HTML Document(layout.html)

{% load static %}
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>{% block title %}{% endblock %}</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <link rel="stylesheet" href=" {% static 'index/css/layout.css' %} ">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
    <link rel="stylesheet" href="{% static 'news/css/news.css' %}">
</head>
<body>
    <aside class="back">
        <img src="{% static 'index/img/logo1.png' %}" alt="Логотип">
        <span class="logo">Django</span>
        <h3 class="navigation">Навигация</h3>
        <ul>
            <a href="{% url 'index' %}"><li><i class="fas fa-home"></i> Главная</li></a>
            <a href="{% url 'about' %}"><li><i class="fas fa-address-card"></i> Про нас</li></a>
            <a href="{% url 'contacts' %}"><li><i class="fas fa-address-book"></i> Контакты</li></a>
            <a href="{% url 'news' %}"><li><i class="fas fa-newspaper"></i> Новости</li></a>
        </ul>
    </aside>
    
    <main>
        {% block content %}
        {% endblock %}
    </main>
</body>
</html>

The main document is in the first appendix - "index" and news.html is in the appendix - "news".

In the first application, there are more documents in which the styles work.
But basically, you need to display the entry from the models.py folder, there are no problems with this, only the styles are not applied!

news/urls.py

from django.urls import path
from . import views

urlpatterns = [
    path('', views.news, name='news'),
]

news/views.py

from django.shortcuts import render
from .models import MyModel


def news(request):
    news = MyModel.objects.all()
    return render(request, 'news/news.html', {'news': news})

main urls.py

from django.contrib import admin
from django.urls import path, include
from django.conf import settings
from django.conf.urls.static import static


urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('index.urls')),
    path('news/', include('news.urls')),
] + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)

PS I don’t know if this is necessary, but I’ll write
down index/urls.py (the first application where the main HTML document and styles are located)

from django.urls import path
from . import views

urlpatterns = [
    path('', views.index, name='index'),
    path('about/', views.about, name='about'),
    path('contacts/', views.contacts, name='contacts')
]

index/views.py

from django.shortcuts import render
from django.http import HttpResponse


def index(request):
    return render(request, 'index/index.html')

def about(request):
    return render(request, 'index/about.html')

def contacts(request):
    return render(request, 'index/contacts.html')

PSS Styles tried to connect not only from the first application (index), but also from the second (news), where news.html is located

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

M

Maxim Dunayevsky, 2020-12-01
@vanya02900

1. Modify the base template by adding an empty block in the head after including all the CSS: 2. In the extension template, fill in this block:
{% block css %} {% endblock %}

{% block css %}
<link rel="stylesheet" href="{% static 'path/to/css.css' %}">
{% endblock %}