求助：Django使用extends模板继承后CSS文件失效如何解决？

使用extends后，Django只会渲染子模板中**块（block）**内的内容，子模板里块外的代码（比如你的<!DOCTYPE html>、<head>、<body>标签，以及里面的CSS/JS引用）都会被忽略，所以这些样式文件根本没被加载到最终页面里。

1. 修改base.html，预留子模板扩展块 #

给base.html的<head>添加用于插入额外CSS/JS的块，同时把title改成可覆盖的块，再新增footer和底部脚本的块：

{% load static %}
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    {% block title %}yokoso, watashi wa soul soceity!{% endblock %}
    <link rel="stylesheet" type="text/css" href="{% static 'css/base.css' %}" />
    {% block head_extra %}{% endblock %}
</head>
<body>
    <!-- {% include 'navbar.html' %} -->
    {% block content %}{% endblock %}

    {% block footer %}
    {% endblock %}

    {% block scripts %}
    {% endblock %}
</body>
</html>

2. 重构home.html，将内容放入对应块中 #

删掉子模板里多余的<!DOCTYPE html>、<head>、<body>标签，把CSS/JS引用、title放到base.html预留的块中，footer和底部脚本也对应放入：

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

{% block title %}kannom biraki enihime aratame{% endblock %}

{% block head_extra %}
    <link rel="stylesheet" type="text/css" href="{% static 'css/home.css'%}">
    <link href="{% static 'fontawesomefree/css/solid.css' %}" rel="stylesheet" type="text/css">
    <script src="{% static 'fontawesomefree/js/all.min.js' %}"></script>
    <link type="text/css" rel="stylesheet" href="{% static 'css/swiper.min.css' %}">
    <script type="text/javascript" src="{% static 'js/swiper.min.js' %}"></script>
{% endblock %}

{% block content %}
    <div class="swiper mySwiper">
        <div class="category-header">
            <h1>bracelets</h1>
        </div>
        <div class="swiper-wrapper">
            {% for bracelet in bracelet_list %}
            <div class="swiper-slide">
                <div class="slider-box">
                    <p class="time">New</p>
                    <div class="slider-image-box">
                        <img src="{{bracelet.image}}" alt="{{bracelet.title}}">
                    </div>
                    <p class="slider-detail">{{bracelet.title}}</p>
                    <p class="slider-price">{{bracelet.price}}</p>
                    <div class="slider-cart">
                        <a data-product="{{bracelet.id}}" class="add-to-cart" data-action="add"> Add to Cart </a>
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>
    </div>
    <div class="category-header">
        <h1>all products</h1>
    </div>
    <div class="page-container">
        <div class="container">
            {% for product in product_list %}
            <div class="card">
                <div class="image">
                    <img src="{{ product.image }}" alt="{{product.title}}" width="90%">
                    <ul class="action">
                        <li>
                            <a class="add-to-cart" data-product="{{product.id}}" data-action="add">
                                <i class="fa-solid fa-cart-shopping"></i>
                                <span>Add to Cart</span></a>
                        </li>
                        <li>
                            <i class="fa-solid fa-heart"></i>
                            <span>Add to Wishlist</span>
                        </li>
                        <li>
                            <i class="fa-solid fa-circle-info"></i>
                            <span>Get Info</span>
                        </li>
                    </ul>
                </div>
                <div class="content">
                    <div class="product-name">
                        <h3>{{ product.title }}</h3>
                    </div>
                    <div class="product-price">
                        <h3>{{product.price}}$</h3>
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>
    </div>
{% endblock %}

{% block footer %}
    <footer>
        <div class="footer-content">
            <h3>lira kuyumculuk</h3>
            <p>Lira kuyumclugu tercih ettiginiz icin tesekkur ederiz! Daha fazla bilgi icin bizleri sosyal medya
                uzerinden takip edebilir, guncel bir sekilde yeni gelen urunlerimizi takip edebilirsiniz.</p>
            <ul class="footer-socials">
                <li><a href="#"><i class="fa-brands fa-instagram"></i></a></li>
                <li><a href="#"><i class="fa-brands fa-whatsapp"></i></a></li>
                <li><a href="#"><i class="fa-brands fa-facebook"></i></a></li>
            </ul>
        </div>
        <div class="footer-rights">
            <p>Tum haklar Lira Kuyumculuk A.S tarafindan saklanmistir</p>
        </div>
    </footer>
{% endblock %}

{% block scripts %}
    <script>
        var swiper = new Swiper(".mySwiper", {
            slidesPerView: 4,
            spaceBetween: 30,
            pagination: {
                el: ".swiper-pagination",
                clickable: true,
            },
        });
    </script>
    <script src="{% static 'js/cart.js'%}"></script>
    <script>
        var user = '{{request.user}}'
        console.log(user)

        function getCookie(name) {
            let cookieValue = null;
            if (document.cookie && document.cookie !== '') {
                const cookies = document.cookie.split(';');
                for (let i = 0; i < cookies.length; i++) {
                    const cookie = cookies[i].trim();
                    if (cookie.substring(0, name.length + 1) === (name + '=')) {
                        cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                        break;
                    }
                }
            }
            return cookieValue;
        }
        const csrftoken = getCookie('csrftoken');
    </script>
{% endblock %}

额外修正 #

顺便把原getCookie(user)函数的参数名改成了getCookie(name)，原函数逻辑是根据传入的cookie名称获取值，之前的参数名写错了，会导致CSRF token获取失败。

内容的提问来源于stack exchange，提问作者Prameus