CSS-файл не связан с проектом в Django - PullRequest
0 голосов
/ 27 марта 2019

Я хочу связать css файл с моим проектом django. Я пробовал различные методы, но это не отражает каких-либо изменений в HTML-странице. Я новичок в этом, любая помощь будет оценена.

Это мой HTML-код:

{% extends 'base.html' %}
{% load static %}

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


{% block content %}


<form class="form-signin">
<div class="text-center mb-4">


    {% csrf_token %}
    <ul>{{shipper_data_object.first_name}}</ul>
    <ul>{{shipper_data_object.last_name}}</ul>



<div class="checkbox mb-3">
    <label>
        <input type="checkbox" value="remember-me"> Remember me
    </label>
</div>

<button class="btn btn-lg btn-primary btn-block" 
type="submit">Sign in</button>
{% endblock %}


<p class="mt-5 mb-3 text-muted text-center">© 2017-2019</p>
</div>
</form>

Это мои views.py:

def shipper_login(request):
shipper_data_object = shipper_form(request.POST)
if request.method == "POST" and shipper_data_object.is_valid():

    shipper_data_object.shipper_ID = shipper_data_object.cleaned_data['shipper_ID']
    shipper_data_object.last_name = shipper_data_object.cleaned_data['last_name']
    shipper_data_object.first_name = shipper_data_object.cleaned_data['first_name']
    shipper_data_object.contact = shipper_data_object.cleaned_data['contact']
    shipper_data_object.comapany_name = shipper_data_object.cleaned_data['comapany_name']
    shipper_data_object.gst_pin_or_pan = shipper_data_object.cleaned_data['gst_pin_or_pan']
    shipper_data_object.origin = shipper_data_object.cleaned_data['origin']
    shipper_data_object.destinations = shipper_data_object.cleaned_data['destinations']

    shipper_data_object.save()
shipper_data_object = shipper_form()
# supplier_data_object = auction.suppliers.views.suppliers_form

# if supplier_data_object.operational_cities == shipper_data_object.origin or supplier_data_object.operatioal_cities == shipper_data_object.destinations:
#     return HttpResponse("found match!!")
# else:
#     return HttpResponse("match not found!!")

return render(request, 'shipper_details.html', {'shipper_data_object': shipper_data_object})

Это мой base.html:

{% load static %}
<link rel="stylesheet" href="{% static 'css/custom.css'%}" 
type="text/css">
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" 

<meta charset="UTF-8">
<title>Title</title>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data- 
toggle="collapse" data-target="#navbarNavDropdown"
            aria-controls="navbarNavDropdown" aria- 
expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavDropdown">
        <ul class="navbar-nav">
            <li class="nav-item active">
                <a class="nav-link" href="#">Home <span class="sr- 
only">(current)</span></a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Features</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Pricing</a>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" 
id="navbarDropdownMenuLink" role="button"
                   data-toggle="dropdown" aria-haspopup="true" 
aria-expanded="false">
                    Dropdown link
                </a>
                <div class="dropdown-menu" aria- 
labelledby="navbarDropdownMenuLink">
                    <a class="dropdown-item" href="#">Action</a>
                    <a class="dropdown-item" href="#">Another 
action</a>
                    <a class="dropdown-item" href="#">Something 
else here</a>
                </div>
            </li>
        </ul>
    </div>
</nav>

</head>


<body>
{% block content %}
{% endblock %}
</body>

В этом коде я сохранил свой файл custom.css в каталоге auction / auction / static / css / custom.css

.

Вот мой файл settings.py:

STATIC_URL = '/static/'

STATIC_DIRS = 'static'

PROJECT_DIR = os.path.dirname(os.path.abspath(__file__))
STATIC_ROOT = os.path.join(PROJECT_DIR, 'static')

добавление: я могу перейти к custom.css через элемент проверки chrome, и он показывает, что изменения есть, но изменения по-прежнему не отражаются при добавлении в них каких-либо CSS. введите описание изображения здесь

Ответы [ 4 ]

1 голос
/ 27 марта 2019

попробуйте

в settings.py

PROJECT_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
STATIC_URL = '/static/'
STATIC_ROOT = PROJECT_DIR + '/static/'

в основном urls.py

if settings.DEBUG:
    urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)

для более подробной информации см. это

0 голосов
/ 27 марта 2019

Попробуйте это в файле settings.py:

STATIC_URL = '/static/'
PROJECT_DIR = os.path.dirname(os.path.abspath(__file__))

STATICFILES_DIRS = [
os.path.join(PROJECT_DIR, "static"),
]

STATIC_ROOT = STATICFILES_DIRS 

В вашем основном urls.py:

if settings.DEBUG:
    urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)

Затем запустите python manage.py collectstatic

И обязательно добавьте файл css и js в ваш base.html.

0 голосов
/ 27 марта 2019

как сказал c.grey в своем ответе, вы должны добавить STATIC_URL AND STATIC_ROOT к вашему settings.py файлу.

Но какВаш статический URL - /static/ с косой чертой в начале.Вам также может понадобиться изменить строку в своем HTML

С: <link rel="stylesheet" href="{% static 'css/custom.css'%}"

Кому: <link rel="stylesheet" href="/{% static 'css/custom.css'%}"

, добавив перед ней косую черту.

Кроме того, убедитесь, что файл CSS включен только в base.html, а не в base.html и yourfile.html

0 голосов
/ 27 марта 2019

Попробуйте запустить python manage.py collectstatic

Django может просматривать ваши развернутые статические файлы.

https://docs.djangoproject.com/en/2.1/howto/static-files/#deployment

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