Блог

Главная - Вопросы по программированию - Не отображается моя панель навигации {% extends’base.html ‘%}, когда я использую django {% содержимое блока%}

Не отображается моя панель навигации {% extends’base.html ‘%}, когда я использую django {% содержимое блока%}

#python #html #css #django

#python #HTML #css #django

Вопрос:

Когда я использую {% extends’base.html ‘%} моя панель навигации отображается корректно, но когда я использую {% содержимое блока %}

Привет, мир

{% содержимое конечного блока%} моя панель навигации исчезает, и я вижу только текст «Привет, мир». Я действительно не знаю, что попробовать, это казалось простым, но, видимо, это не так, пока вы на самом деле не узнаете.

 {% extends "base.html" %}

{% block content %}<h1>Hello World</h1>{% endblock content %}

Мой ‘base.html ‘ файл

 {% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
{% block head %}
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="{% static "css/style.css" %}">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
    <meta charset="UTF-8">
    <title>my title goes here</title>
{% endblock %}
</head>
<body>
{% block content %}
    <div class="container-fluid">
        <div class="row">
            <div class="col">
                <nav class="navbar custom-navbar">
                    <h1>World Truthers</h1>

                    <div class="col navbar-buttons">
                        <button class="btn custom-button"><p><b>Contact</b></p></button>
                        <button class="btn custom-button"><p><b>About</b></p></button>
                        <button class="btn custom-button"><p><b>Returns</b></p></button>
                        <button class="btn custom-button"><p><b>Payment</b></p></button>
                        <button class="btn custom-button"><p><b>Delivery</b></p></button>
                        <button class="btn custom-button"><p><b>Store</b></p></button>
                    </div>
                </nav>
            </div>
        </div>
    </div>
{% endblock %}
</body>

Ответ №1:

Измените свой base.html к приведенному ниже. Происходит то, что вы перезаписываете свой блок содержимого тем, что есть в вашем шаблоне («Hello world»). Если вы хотите придерживаться этого в своем дочернем шаблоне, поставьте {{block.super}} после {% block content %} , но «правильным» способом было бы изменить ваш base.html с приведенным ниже.

 {% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
{% block head %}
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="{% static "css/style.css" %}">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
    <meta charset="UTF-8">
    <title>my title goes here</title>
{% endblock %}
</head>
<body>
    <div class="container-fluid">
        <div class="row">
            <div class="col">
                <nav class="navbar custom-navbar">
                    <h1>World Truthers</h1>

                    <div class="col navbar-buttons">
                        <button class="btn custom-button"><p><b>Contact</b></p></button>
                        <button class="btn custom-button"><p><b>About</b></p></button>
                        <button class="btn custom-button"><p><b>Returns</b></p></button>
                        <button class="btn custom-button"><p><b>Payment</b></p></button>
                        <button class="btn custom-button"><p><b>Delivery</b></p></button>
                        <button class="btn custom-button"><p><b>Store</b></p></button>
                    </div>
                </nav>
            </div>
        </div>
    </div>
    {% block content %}
    {% endblock %}
</body>