Django模板include内block显示异常：内容未在指定位置渲染

我来帮你分析下这个问题的根源，再给你几个可行的解决方案：

问题出在哪？ #

Django的模板block系统是基于模板继承（extends）的层级关系工作的，而{% include %}只是简单地把目标模板的内容插入到当前位置——被include的模板里的block并不会和父模板（这里的site_page.html）的block建立关联。你在site_page.html里定义的{% block extratabs %}，实际上属于site_page自己的content block的一部分，会在{% include 'sites/site_tabs.html' %}执行完成后才渲染，所以内容才会跑到tabs列表的外面。

解决方案1：用上下文变量传递额外标签（兼容所有Django版本） #

这种方法是把额外的标签内容作为变量传给被include的模板，在site_tabs.html里判断并渲染：

1. 修改site_page.html：
   在include时用{% with %}把额外标签内容传进去：

   {% extends 'home/sbadmin_base.html' %} 
   {% load extras %} 
   {% load static %} 
   
   {% block content %} 
       {% with extratabs_content= %}
           <li {{ active_sims|safe }}>
               <a href="{% url 'sites:site_overview' SiteID %}">Edit Site</a>
           </li>
       {% endwith %}
       {% include 'sites/site_tabs.html' with extratabs=extratabs_content %}
   {% endblock %}
   

2. 修改site_tabs.html：
   把原来的block替换成对变量的渲染：

   {% load extras %} 
   <!-- Nav tabs --> 
   <ul class="nav nav-tabs"> 
       <li {{ active_ip|safe }}><a href="{% url 'sites:site_overview' SiteID %}">Overview</a></li> 
       <li {{ active_files|safe }}><a href="{% url 'sites:site_detail_files' SiteID %}">Files and Photos</a></li> 
       {% if extratabs %}
           {{ extratabs|safe }}
       {% endif %}
   </ul> 
   <!-- Tab panes --> 
   <div class="tab-content"> 
       <div class="tab-pane fade in active" id="ip"> 
           <div class="row">
   

解决方案2：用Django 4.1+的Slot功能（更优雅） #

如果你的Django版本是4.1及以上，可以用官方新增的模板Slot功能，专门用来给include的模板传递片段内容：

1. 修改site_tabs.html：
   把原来的block改成slot：

   {% load extras %} 
   <!-- Nav tabs --> 
   <ul class="nav nav-tabs"> 
       <li {{ active_ip|safe }}><a href="{% url 'sites:site_overview' SiteID %}">Overview</a></li> 
       <li {{ active_files|safe }}><a href="{% url 'sites:site_detail_files' SiteID %}">Files and Photos</a></li> 
       {% slot "extratabs" %}{% endslot %}
   </ul> 
   <!-- Tab panes --> 
   <div class="tab-content"> 
       <div class="tab-pane fade in active" id="ip"> 
           <div class="row">
   

2. 修改site_page.html：
   在include时填充这个slot：

   {% extends 'home/sbadmin_base.html' %} 
   {% load extras %} 
   {% load static %} 
   
   {% block content %} 
       {% include 'sites/site_tabs.html' %}
           {% fill "extratabs" %}
               <li {{ active_sims|safe }}>
                   <a href="{% url 'sites:site_overview' SiteID %}">Edit Site</a>
               </li>
           {% endfill %}
       {% endinclude %}
   {% endblock %}
   

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