Как я могу получить css для правильного рендеринга в django?

Question

Итак, я новичок ie, и у меня возникают проблемы с отображением моего css в Django. Я пытаюсь создать красное уведомление, как в Facebook, для моих непрочитанных сообщений. Но мой css не рендеринг. Что я здесь не так делаю? Вот мой код

settings.py / Static_Dir

STATIC_URL = '/static/'
STATICFILES_DIRS = [
"/DatingAppCustom/dating_app/static",
]

уведомление. css

.btn {
width:100px;
position:relative;
line-height:50px;
}

.notification {
    position:absolute;
    right:-7px;
    top:-7px;
    background-color:red;
    line-height:20px;
    width:20px;
    height:20px;
    border-radius:10px;
}

base.html / раздел уведомлений

<link href="{% static 'notification.css' %}">
            <button class="btn">message counter
                <div class="notification">{% unread_messages request.user %}</div>
            </button>

ПРАВКА, добавление пути к каталогу

.
├── 11_env
│   ├── bin
│   │   ├── __pycache__
│   │   ├── activate
│   │   ├── activate.csh
│   │   ├── activate.fish
│   │   ├── django-admin
│   │   ├── django-admin.py
│   │   ├── easy_install
│   │   ├── easy_install-3.7
│   │   ├── pip
│   │   ├── pip3
│   │   ├── pip3.7
│   │   ├── python -> python3
│   │   ├── python3 -> /Library/Frameworks/Python.framework/Versions/3.7/bin/python3
│   │   └── sqlformat
│   ├── include
│   ├── lib
│   │   └── python3.7
│   └── pyvenv.cfg
├── dating_app
│   ├── __init__.py
│   ├── __pycache__
│   │   ├── __init__.cpython-37.pyc
│   │   ├── admin.cpython-37.pyc
│   │   ├── forms.cpython-37.pyc
│   │   ├── models.cpython-37.pyc
│   │   ├── tests.cpython-37.pyc
│   │   ├── urls.cpython-37.pyc
│   │   └── views.cpython-37.pyc
│   ├── admin.py
│   ├── apps.py
│   ├── chat.html
│   ├── forms.py
│   ├── media
│   │   └── profile_photo
│   ├── migrations
│   │   ├── 0001_initial.py
│   │   ├── 0002_auto_20200410_2231.py
│   │   ├── 0003_auto_20200411_2011.py
│   │   ├── 0004_auto_20200413_1930.py
│   │   ├── 0005_auto_20200413_1946.py
│   │   ├── 0006_auto_20200413_2222.py
│   │   ├── 0007_auto_20200422_1947.py
│   │   ├── 0008_auto_20200425_0039.py
│   │   ├── 0009_auto_20200426_1957.py
│   │   ├── 0010_auto_20200426_2005.py
│   │   ├── 0011_auto_20200426_2005.py
│   │   ├── 0012_auto_20200426_2007.py
│   │   ├── 0013_auto_20200427_1846.py
│   │   ├── 0014_auto_20200503_1947.py
│   │   ├── 0015_auto_20200503_2011.py
│   │   ├── __init__.py
│   │   └── __pycache__
│   ├── models.py
│   ├── static
│   │   └── notification.css
│   ├── tag.py
│   ├── templates
│   │   └── dating_app
│   ├── templatetags
│   │   ├── __init__.py
│   │   ├── __pycache__
│   │   └── unread_messages_counter.py
│   ├── tests.py
│   ├── urls.py
│   └── views.py
├── dating_project
│   ├── __init__.py
│   ├── __pycache__
│   │   ├── __init__.cpython-37.pyc
│   │   ├── settings.cpython-37.pyc
│   │   ├── urls.cpython-37.pyc
│   │   └── wsgi.cpython-37.pyc
│   ├── asgi.py
│   ├── settings.py
│   ├── urls.py
│   └── wsgi.py
├── db.sqlite3
└── manage.py

Answer 1

Возможно, вам нужно добавить rel="stylesheet" в тег ссылки. Например:

<link href="{% static 'notification.css' %}" rel="stylesheet" type="text/css">

Также убедитесь, что файл css находится в root папки /DatingAppCustom/dating_app/static.

Answer 2

так что это то, что в конечном итоге работает на меня.

Сначала я переместил ссылку в область заголовка base.html / header

<link rel="stylesheet"  href="{% static  'css/notification.css' %}" type="text/css" class = "notification"/>

Затем я включил все внутри гиперссылки, как это было, и включил ссылку на мой почтовый ящик

base.html / message_notifier

                    <li>
                        <a ref = 'stylesheet'   href="{% url 'dating_app:conversations' user.id %}" type="text/css"     class="notification"> 
                            <span>Inbox</span>
                            <span class="badge">{% unread_messages request.user %}</span>
                        </a>
                    </li>

Answer 3

Поскольку все возможные решения в комментариях не сработали, вы можете попробовать это как свою последнюю попытку.

Добавить

{% load staticfiles %}

, чтобы сначала загрузить статические файлы, а затем вы можете использовать тег stati c. В основном это используется для Django <2.0, хотя </p>

Answer 4

имя переменной для stati c должно быть STATICFILES_DIR, а не STATICFILES_DIRS. Я надеюсь, что эта маленькая опечатка решит вашу проблему!