Блог

Главная - Вопросы по программированию - Наследование шаблонов Django работает неправильно

Наследование шаблонов Django работает неправильно

#html #django

Вопрос:

в принципе, у меня есть базовый Html-код, и я хочу расширить его, используя конкретные элементы каждой страницы, но он не помещает элементы в то место, в котором я хочу, чтобы они находились. Это базовый шаблон :

 <!doctype html>
<html lang="en">

<head>
    {% load static %}
    <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.2/styles/default.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
    <link rel="stylesheet" type="text/css" href="{% static 'style.css' %}">
    <mdaseta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
    <div class="flex">
        <div class=" fixed h-screen bg-yellow-400 " id="side_nav" style="width:25% !important">
            <a class="navbar-brand  max-h-20 text-white p-10" href="/">
                FUN CODING
            </a>
            <div class="flex  flex-col h-full ">
                <hr class="mx-3">
                </hr>
                {% if btn == "home"%}
                <button id="Home" class="transition duration-500 text-base font-medium p-3 bg-white text-black w-full side_btn">Home</button>
                {% else %}
                <button id="Home" class="transition duration-500 text-white text-base font-medium p-3 hover:bg-white hover:text-black bg-yellow-400 w-full side_btn">Home</button>
                {%endif%}
                {%if btn == "blog"%}
                <button id="Blog" class="transition duration-500 text-base font-medium p-3 bg-white text-black w-full side_btn">Explore Blog</button>
                {% else %}
                <button id="Blog" class="transition duration-500 text-white text-base font-medium p-3 hover:bg-white hover:text-black bg-yellow-400 w-full side_btn">Explore Blog</button>
                {%endif%}
                {% if btn == "store"%}
                <button id="Store" class="transition duration-500 text-base font-medium p-3 bg-white text-black  w-full side_btn">Store</button>
                {% else %}
                <button id="Store" class="transition duration-500 text-white text-base font-medium p-3 hover:bg-white hover:text-black bg-yellow-400 w-full side_btn">Store</button>
                {%endif%}
                <button id="Contact" class="transition duration-500 text-white text-base font-medium p-3 hover:bg-white hover:text-black bg-yellow-400 w-full side_btn">Contact me</button>
                <div class="flex flex-col-reverse " style="height: 60%;">
                    <div class="flex justify-around">
                        <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="white" class="bi bi-facebook transition duration-300" viewBox="0 0 16 16">
                            <path d="M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951z" />
                        </svg>
                        <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="white" class="bi bi-github transition duration-300" viewBox="0 0 16 16">
                            <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z" />
                        </svg>
                    </div>
                    <button class="side-btn transition duration-500 text-white text-base font-medium p-3 hover:bg-white hover:text-black bg-yellow-400 w-full side_btn mb-1">About Me</button>
                </div>
            </div>
        </div>
    </div>
    <div class=" bg-white " style="margin-left: 25% !important">
        {% block content %}{% endblock content%}
    </div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="{% static 'script.js'%}"></script>
</body>

</html>

поэтому вместо добавления кода под тегом div он добавляет его в последнюю строку после тега сценария

заранее спасибо

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

1. Как выглядит шаблон, который наследуется?

2. @WillemVanOnsem pastebin.com/RPbrqecU

3. вставить {% расширяется ‘base.html’ %} на другой странице для расширения base.html

4. большое спасибо , это было действительно глупо с моей стороны

Метки: