Django: Базовый шаблон не выводит содержимое {% block content%} на HTML-страницу

Я пытаюсь использовать шаблон, чтобы иметь возможность повторно использовать flexbox на нескольких страницах; вместо того, чтобы повторно использовать код на каждой странице. Однако вместо того, чтобы получить flexbox, я получаю:

enter image description here

Если я просто отображу html как страницу, чтобы убедиться, что flexbox работает, я получу ожидаемый результат:

enter image description here

Все мои html-шаблоны находятся в:

/Resilience_Radar/Resilience_Radar_App/templates/Resilience_Radar_App/

Я настроил файл layout.html так, чтобы он включал таблицу стилей, определяющую контейнер, и добавил теги шаблонов:

<!DOCTYPE html>
<html lang = "en">
<meta name="viewport" content="width=device-width, initial-scale=1">
<head>
  <link rel="stylesheet" href="styles.css">
  <title>Resilience</title>
</head>
<body>
<h1>Risk Resilience</h1>
{% block linesofoperation %}
{% endblock %}
</body>
</html>

Я создал файл linesofoperation.html, который содержал нужный код для использования в блоке:

{% extends "layout.html" %}

{% block linesofoperation %}

<div class="container" style="top: 10%;">
    
    <div class="item_LoO_Name">
      <div class="t1">LoO</div>
      <div class="t2">Implement, maintain and improve a
    business countinuity management system</div>
    </div>
    <div class="space"></div>
    <div class="item">Context of the Organization</div>
    <div class="space"></div>
    <div class="item" style = "background-color:gray">Leadership</div>
    <div class="space"></div>
    <div class="item" >Policy</div>
    <div class="space"></div>
    <div class="item">Planning</div>
    <div class="space"></div>
    <div class="item">Support</div>
    <div class="space"></div>
    <div class="item">Operation</div>
    <div class="space"></div>
    <div class="item">Management Review</div>
    <div class="space"></div>
    <div class="item">Improvement</div>
    <div class="space"></div>
    <div class="triangle-right"></div>
    <div class="spaceblank"></div>

    
    <div class="item_LoO_Name" style="background-color: white; color: black;">
      <div class="t1">Outcome</div>
      <div class="t2">Protect against, reduce the likelihood of the occurrence of, 
      prepare for, respond to and recover from disruptions when they arise</div>
    </div>
</div>

{% endblock linesofoperation %}

Вот мой views.py

def leadership(request):
    return render(request, "Resilience_Radar_App/leadership.html")

def linesofoperation(request):
    return render(request, "Resilience_Radar_App/linesofoperation.html")

def layout(request):
    return render(request, "Resilience_Radar_App/layout.html")

и мой urls.py в приложении

from django.urls import path

from . import views

urlpatterns = [
    path("", views.leadership, name="leadership"),
    path("", views.RadioButtonForm, name="RBF"),
    path("linesofoperation/", views.linesofoperation, name = "LoO")

и в основной папке: 

from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path("admin/", admin.site.urls),
    path("Resilience_Radar_App/", include("Resilience_Radar_App.urls"))

Я пытаюсь сделать layout.html шаблоном для нескольких страниц, которые будут включать графику flexbox с разным содержимым на каждой странице.

Один из найденных мною ответов дал ошибку следующего вида:

Наконец, я нашел ошибку:

Я ссылался в своем представлении на "родительский" файл (base.html), а не на "дочерний" (landingPage.html).

Но кода нет, поэтому я не уверен, в чем заключалась ошибка.

Я исправил ошибки :-

  • то, как вы расширяете макет html, все хорошо, но вы не загрузили статический, поэтому я включил это также в код ниже, просто просмотрите код.

layout.html

<!DOCTYPE html>
{% load static %}
<html lang = "en">
<meta name="viewport" content="width=device-width, initial-scale=1">
<head>
  <link rel="stylesheet" href="{% static 'styles.css' %}">
  <title>Resilience</title>
</head>
<body>
<h1>Risk Resilience</h1>
{% block linesofoperation %}
{% endblock %}
</body>
</html>

linesofoperation.html

{% extends "layout.html" %}
{% load static %}

{% block linesofoperation %}

<div class="container" style="top: 10%;">
    
    <div class="item_LoO_Name">
      <div class="t1">LoO</div>
      <div class="t2">Implement, maintain and improve a
    business countinuity management system</div>
    </div>
    <div class="space"></div>
    <div class="item">Context of the Organization</div>
    <div class="space"></div>
    <div class="item" style = "background-color:gray">Leadership</div>
    <div class="space"></div>
    <div class="item" >Policy</div>
    <div class="space"></div>
    <div class="item">Planning</div>
    <div class="space"></div>
    <div class="item">Support</div>
    <div class="space"></div>
    <div class="item">Operation</div>
    <div class="space"></div>
    <div class="item">Management Review</div>
    <div class="space"></div>
    <div class="item">Improvement</div>
    <div class="space"></div>
    <div class="triangle-right"></div>
    <div class="spaceblank"></div>

    
    <div class="item_LoO_Name" style="background-color: white; color: black;">
      <div class="t1">Outcome</div>
      <div class="t2">Protect against, reduce the likelihood of the occurrence of, 
      prepare for, respond to and recover from disruptions when they arise</div>
    </div>
</div>

{% endblock linesofoperation %}

Вы делаете обратное расширение. Вы хотите, чтобы код шаблона linesofoperation находился внутри layout.html, но вы включили layout.html в linesofoperation. Теперь, когда вы делаете это, происходит следующее: шаблон html linesofoperation может получить доступ к коду шаблона layout.html, но не наоборот.

Чтобы исправить это, используйте следующий код:

layout.html:

{% include "linesofoperation.html" %}
<!DOCTYPE html>
<html lang = "en">
<meta name="viewport" content="width=device-width, initial-scale=1">
<head>
  <link rel="stylesheet" href="styles.css">
  <title>Resilience</title>
</head>
<body>
<h1>Risk Resilience</h1>
{% block linesofoperation %}
{% endblock %}
</body>
</html>

linesofoperation.html

{% block linesofoperation %}

<div class="container" style="top: 10%;">
    
    <div class="item_LoO_Name">
      <div class="t1">LoO</div>
      <div class="t2">Implement, maintain and improve a
    business countinuity management system</div>
    </div>
    <div class="space"></div>
    <div class="item">Context of the Organization</div>
    <div class="space"></div>
    <div class="item" style = "background-color:gray">Leadership</div>
    <div class="space"></div>
    <div class="item" >Policy</div>
    <div class="space"></div>
    <div class="item">Planning</div>
    <div class="space"></div>
    <div class="item">Support</div>
    <div class="space"></div>
    <div class="item">Operation</div>
    <div class="space"></div>
    <div class="item">Management Review</div>
    <div class="space"></div>
    <div class="item">Improvement</div>
    <div class="space"></div>
    <div class="triangle-right"></div>
    <div class="spaceblank"></div>

    
    <div class="item_LoO_Name" style="background-color: white; color: black;">
      <div class="t1">Outcome</div>
      <div class="t2">Protect against, reduce the likelihood of the occurrence of, 
      prepare for, respond to and recover from disruptions when they arise</div>
    </div>
</div>

{% endblock linesofoperation %}

Вернуться на верх