Django模板中按分类优雅展示多项内容

from django.db import models

class gerechten_Categorie(models.Model):
    """
    定义菜品类别模型。
    """
    categorie = models.CharField(max_length=200)

    def __str__(self):
        return self.categorie

class gerecht_info(models.Model):
    """
    定义菜品信息模型，包含对类别的外键引用。
    """
    categorie = models.ForeignKey(gerechten_Categorie, on_delete=models.CASCADE)
    gerecht_name = models.CharField(max_length=200)
    gerecht_description = models.CharField(max_length=500, blank=True, null=True)
    gerecht_price = models.CharField(max_length=50)

    def __str__(self):
        return self.gerecht_name

from django.shortcuts import render
from django.template import loader
from django.http import HttpResponse
from .models import gerecht_info, gerechten_Categorie

def gerechten(request):
    """
    获取所有菜品及其类别信息。
    """
    template = loader.get_template('café/gerechten.html')
    mydata = gerecht_info.objects.all() # 获取所有菜品
    mydata2 = gerechten_Categorie.objects.all() # 获取所有类别 (此处mydata2在本场景中非必需)

    context = {
        'mygerecht': mydata,
        'mycategories': mydata2
    }   
    return HttpResponse(template.render(context, request))

{% if mygerecht %}
{% for cat in mygerecht %} {# 这里的cat实际上是gerecht_info对象 #}
<div class="flex">
    <div class="menu-head center">
        <h2>{{cat.categorie}}</h2> {# 每次迭代都会显示类别标题 #}
    </div>
    <div class="menu-item">
        <ul class="price">
            <li>{{cat.gerecht_name}}</li>
            <li>€{{cat.gerecht_price}}</li>
        </ul>
        {% if cat.gerecht_description %}
        <p>{{cat.gerecht_description}}</p>
        {% else %}
        <p></p>
        {% endif %}
    </div>
</div>
{% endfor %}
{% else %}
<div class="menu-head center">
<h2>no items avaible</h2>
</div>
{% endif %}

{% regroup list_to_group by attribute_to_group as new_grouped_list %}

{% comment %}
    在进行分组前，建议对mygerecht列表按类别进行排序，以确保regroup能正确地将所有相同类别的项目连续分组。
    例如：在views.py中 mydata = gerecht_info.objects.all().order_by('categorie__categorie')
{% endcomment %}

{% if mygerecht %}
    {# 使用regroup标签按'categorie'属性对'mygerecht'列表进行分组 #}
    {% regroup mygerecht by categorie as grouped_categories %}

    {% for category_group in grouped_categories %}
    <div class="flex">
        <div class="menu-head center">
            {# 显示当前分组的类别名称 #}
            <h2>{{ category_group.grouper }}</h2> 
        </div>
        {# 遍历当前类别下的所有菜品 #}
        {% for item in category_group.list %}
        <div class="menu-item">
            <ul class="price">
                <li>{{ item.gerecht_name }}</li>
                <li>€{{ item.gerecht_price }}</li>
            </ul>
            {# 显示菜品描述，如果存在 #}
            <p>{% if item.gerecht_description %}{{ item.gerecht_description }}{% endif %}</p>
        </div>
        {% endfor %}
    </div>
    {% endfor %}
{% else %}
<div class="menu-head center">
    <h2>暂无可用菜品</h2>
</div>
{% endif %}