如何在Django中使用Jinja2实现指定HTML代码片段的复用

基础复用逻辑（兼容Jinja2/Django原生模板） #

模板复用的核心是把公共代码抽离为独立片段，在需要的位置直接引用即可，你提供的待复用代码可以直接单独存为模板文件goods_sale_cell.html，内容如下：

<td class ="sale">
         {% if good.image %}
        <img src="{{ MEDIA_URL }}{{ good.image_sale }}">
        {% endif %}
      {% for good in goods %}
        <h1 class="description">{{ good.description_text }}</h1>
      {% endfor %}
  <a class="buy" href="#openModal" >
    <span >Купить</span></a>
  {% for good in goods %}
        <h1 class="price" >{{ good.price_text }}</h1>
  {% endfor %}
  </td>

注：原代码中good.image的判断写在goods循环外，若出现变量未定义问题可调整判断逻辑到循环内部

实现方式1：直接include引用（最简方案） #

在任何需要插入这段代码的模板文件中，直接写入以下代码即可完成复用：

{% include 'goods_sale_cell.html' with goods=传入的商品变量 MEDIA_URL=媒体资源前缀 %}

• with后可传入该片段需要的所有变量，若当前模板上下文已经存在对应的变量可以省略with部分
• Jinja2和Django原生模板的include语法完全一致，无需额外调整

实现方式2：自定义模板标签（适合带业务逻辑的复用场景） #

如果该片段需要独立查询数据、不需要每次使用时手动传参，可以自定义模板标签：

1. 在你的Django应用目录下创建templatetags文件夹，新增两个文件：
   • __init__.py（空文件即可）
   • goods_tags.py，内容如下：

   from django import template
   from .models import Good # 替换为你自己的商品模型
   
   register = template.Library()
   
   @register.inclusion_tag('goods_sale_cell.html')
   def render_goods_sale_cell():
       # 这里可以写你自己的查询逻辑
       goods = Good.objects.filter(is_on_sale=True)
       return {"goods": goods, "MEDIA_URL": "/media/"} # 把片段需要的变量返回
   

2. 使用时先在模板头部加载标签：

   {% load goods_tags %}
   

3. 需要插入复用代码的位置直接写：

   {% render_goods_sale_cell %}
   

插入到Django Admin面板的方法 #

如果要把这段代码放到Django Admin的列表页/详情页，可以自定义ModelAdmin的展示字段：

from django.contrib import admin
from django.utils.safestring import mark_safe
from .models import Good

@admin.register(Good)
class GoodAdmin(admin.ModelAdmin):
    # 把自定义字段加到列表展示项
    list_display = ('id', 'sale_cell', 'name', 'price')
    
    def sale_cell(self, obj):
        # 直接渲染HTML片段，也可以调用刚才的模板标签渲染
        img_html = f'<img src="/media/{obj.image_sale}">' if obj.image else ''
        return mark_safe(f'''
        <td class ="sale">
            {img_html}
            <h1 class="description">{obj.description_text}</h1>
            <a class="buy" href="#openModal" ><span>Купить</span></a>
            <h1 class="price" >{obj.price_text}</h1>
        </td>
        ''')
    # 自定义字段的展示名称
    sale_cell.short_description = '商品销售栏'

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