Мой CSS не отображается, когда я использую «extend» и «block» в Django

#html #css #django #django-templates

#HTML #css #django #django-шаблоны

Вопрос:

Я потратил полдня, пытаясь разобраться в этом. В итоге я передал CSS через атрибут стиля HTML. Что я сделал и попробовал:

  1. В settings.py Я включил:
    django.contrib.staticfiles
   STATIC_URL = '/static/' 
  
  1. В layout.html:
    {% load static %}
   <link href="{% static 'auctions/styles.css' %}" rel="stylesheet">
  
  1. Папки со статическими файлами организованы следующим образом:

app_name/static/auctions/styles.css 4. И расширение макета и заполнение основного блока

  • Я попытался добавить {% load static %} сверху;
  • <link href="{% static 'auctions/styles.css' %}" rel="stylesheet"> Впоследствии я поставил и перезапустил сервер, но все это безрезультатно; Шаблон:
 {% extends "auctions/layout.html" %} 
{% load humanize %}
{% load crispy_forms_tags %}

{% block body %}

    {% if listing.closed == True %}
        <div style="background-color: whitesmoke; height: 110%; width: 100%; position: absolute; opacity: 0.6; z-index: 2;">
            <div style="margin-top: 30%; font-size: xxx-large;">
                <center>
                    <strong>
                        This listing is closed. <br>
                        <p style="color: green;">{% if request.user == winner.user %} You ({{ winner.user }}) have Won the auction! Congrats! {% endif %}</p>
                    </strong>
                </center>
            </div>
        </div>
    {% endif %}
    {% if error_check == True %}
        <div class="alert alert-warning" role="alert">
            <center>
                Your bid is lower than the current bid! Try with a higher one.
            </center>
        </div>
    {% elif error_check == False %}
        <div class="alert alert-success" role="alert">
            <center>
                Your bid was successfully placed!
            </center>
        </div>
    {% endif %}
    <div>
        <div>
            {% if button %}
                <form method="POST" action="{% url 'view_list' listing.id %}">
                    {% csrf_token %}
                    <input type="hidden" name="close_list" value="True">
                    <input type="submit" class="btn btn-success" value="Close the Auction">
                </form>
            {% endif %}
        </div>
        <div>
            {% if not watchlisted or watchlisted.watchlist == False %}
                <form method="POST" action="{% url 'view_list' listing.id %}">
                    {% csrf_token %}
                    <input type="hidden" name="watchlist_add" value="True">
                    <input type="submit" class="btn btn-primary" value="Add to Watchlist">
                </form>
            {% else %}
                <form method="POST" action="{% url 'view_list' listing.id %}">
                    {% csrf_token %}
                    <input type="hidden" name="watchlist_add" value="False">
                    <input type="submit" class="btn btn-primary" value="Remove from Watchlist">
                </form>
            {% endif %}
        </div>
        <h3>Listing: {{ listing.title }}</h3>
        <img src="{{ listing.image }}" alt="Listings' Images">
        <p>{{ listing.description }}</p>
        {% if not bid %}
            <strong>${{ listing.price|stringformat:"1.2f" }}</strong>
        {% else %}
            <strong>${{ bid|stringformat:"1.2f" }}</strong>
        {% endif %}
        
        <p> {{ total_bids }} bid(s) so far. {% if bid_user %} {{ bid_user }} {% endif %}</p>
        <form method="POST" name="bidding" action="{% url 'view_list' listing.id %}">
            {% csrf_token %}
            <div class="input-group mb-3">
                <div class="input-group-prepend">
                    <span class="input-group-text">$</span>
                </div>   
                <div style="margin: 0; padding: 0 2px; height: 6px; z-index: 1;">
                    {% crispy form %}
                </div>   
                <div class="input-group-append" >
                    <span class="input-group-text">.00</span>
                </div>
                <input type="submit" class="btn btn-primary" value="Place Bid">
            </div>
        </form>
        <div style="width: 222;">
            <form action="{% url 'view_list' listing.id %}" name="comment" method="POST">
                <input type="submit" class="btn btn-secondary btn-sm" value="Comment">
                {% crispy comment %}
                
            </form>
            <div>
                {% for c in comments %}
                    <ul>{{ c.user }}: {{ c.comment }} {{c.created_at}}</ul> 
                {% empty %}
                    No comments yet.
                {% endfor %}
            </div>
        </div>

        <h4>Details</h4>
            <li>Listed by: {{ listing.user }} </li>
            <li>Category: {{ listing.category }} </li>
            <li>Listing created at: {{ listing.created_at }} </li>
    </div>

{% endblock %}
  

Комментарии:

1. вы, вероятно, переопределяете головной блок layout.html который содержит ваше объявление css

2. Если вы работаете с DEBUG = False then collectstatic , его необходимо запустить. Вероятно, это не ваша проблема, но стоит упомянуть на всякий случай 🙂

3. Я не установил STATIC_ROOT и не запустил collectstatic , и все же я не понимаю, почему я должен, поскольку это рекомендуется для среды разработки ..?

4. Если вы работаете в dev с DEBUG=True then collectstatic , это не нужно, нет. Просто хотел проверить, что это не проблема 🙂

5. Кстати, ваша структура папок слегка сбивает с толку — MY_APP ссылается ли она на корневую папку проекта django или текущее приложение? В приложениях вы должны структурировать as app_name/static/app_name/<files> , а затем получить доступ as {% static 'app_name/<file>' %}

Ответ №1:

в вашем main_urls убедитесь, что вы включили следующее

 from django.contrib.staticfiles.urls import static,staticfiles_urlpatterns
urlpatterns  = staticfiles_urlpatterns()
urlpatterns  = static(settings.MEDIA_URL,document_root=settings.MEDIA_ROOT)
urlpatterns  = static(settings.STATIC_URL,document_root=settings.STATICFILES_DIRS)
  

это указывает django на поиск статического файла в заданном URL для статического

Ответ №2:

Проблема была с браузером и, в частности, с кэшем