includeタグを正しく使用するにはどうすればよいですか？

Question

なぜこのエラーが発生するのかわかりません "29行目に無効なブロックタグがあります： 'includes'、予想される 'endblock'。このタグの登録または読み込みを忘れましたか？ 29行目は{％include％}タグをINDEX.HTMLファイルに置いた行です。以下の両方のhtmlファイルは同じディレクトリにあります。

index.htmlファイル

{% extends './base.html' %} 
{% load staticfiles %} 

{% block head_js %} 
{% endblock %} 

{% block content %} 
<!-- Page Content --> 
<div> 
     <!-- Header/Home --> 
     <header class="w3-container w3-padding-32 w3-center w3-black" id="home"> 
     <h1 class="w3-jumbo"><span class="w3-hide-small">Cricket Scorer</span></h1> 
     <p>A Simple Cricket Scoring Web App</p> 
     </header> 

     <!-- Selection Menu --> 
     <div class="w3-content w3-justify w3-text-grey w3-padding-64"> 
       <!--button type="button" class="btn btn-default btn-lg btn-block" data-toggle="modal" data-target="#match-details" onclick="alert('here');">Start Scoring</button><br--> 
       <button type="button" class="btn btn-default btn-lg btn-block" data-toggle="modal" data-target="#select-home-team">Start Scoring</button><br> 
       <button type="button" class="btn btn-default btn-lg btn-block">Players</button><br> 
       <button type="button" class="btn btn-default btn-lg btn-block">Teams</button> 
     </div> 
</div> 

{% includes "start_scoring_modal.html" %} 
{% endblock %} 

START_SCORING_MODAL.HTML

{% extends './index.html' %} 
{% load staticfiles %} 


<!-- Modal Boxes --> 
<div class="modal fade" id="select-home-team" role="dialog"> 
     <div class="modal-dialog modal-bg"> 
       <div class="modal-content"> 
... 
... 
... 
... 

========================= =============================== エラー上記の文法の誤った使用は、 "インクルード"の代わりに "インクルード"を使用することでした。今私は新しいエラーが発生しました。 index.htmlはTemplateDoesNotExistエラーを出し、1行目の "{％extends" ./base.html "％}"にフラグを立てます。

ただし、「インクルード」の行を削除しても正常に動作します。混乱している！！

{% extends "./base.html" %} 
{% load staticfiles %} 

{% comment %} http://www.webhook.com/docs/template-inheritance-blocks/ {% endcomment %} 

{% block head_js %} 
{% endblock %} 

{% block content %} 
<!-- Page Content --> 
<div> 
     <!-- Header/Home --> 
     <header class="w3-container w3-padding-32 w3-center w3-black" id="home"> 
     <h1 class="w3-jumbo"><span class="w3-hide-small">Cricket Scorer</span></h1> 
     <p>A Simple Cricket Scoring Web App</p> 
     </header> 

     <!-- Selection Menu --> 
     <div class="w3-content w3-justify w3-text-grey w3-padding-64"> 
       <!--button type="button" class="btn btn-default btn-lg btn-block" data-toggle="modal" data-target="#match-details" onclick="alert('here');">Start Scoring</button><br--> 
       <button type="button" class="btn btn-default btn-lg btn-block" data-toggle="modal" data-target="#select-home-team">Start Scoring</button><br> 
       <button type="button" class="btn btn-default btn-lg btn-block">Players</button><br> 
       <button type="button" class="btn btn-default btn-lg btn-block">Teams</button> 
     </div> 
</div> 

     {% include "./start_scoring_modal.html" %} 
{% endblock %} 

Answer 1

あなたstart_scoring_modal.htmlファイルに{% extends './index.html' %}を望んでいません。

追加コードをstart_scoring_modal.htmlにインポートするだけで、index.htmlを拡張する必要はありません。