如何更有效地编写此Django HTML模板？

我有一个Django应用，用户可以在其中创建列表并添加待办事项。我想添加一个新页面，其中将显示有到期日的待办事项。就像在页面中一样，将有一个名为“较早”的部分，该部分是具有截止日期的功能任务。其他部分是“今天”，“明天”和“以后”。现在让我展示我的视图类和HTML代码并解释我的问题。

基于类的视图来处理此页面：

class ToDoNextUpView(LoginRequiredMixin, ListView):
    model = ToDo
    template_name = "ToDo/next_up.html"
    ordering = ["-due_date"]
    context_object_name = "todos"

    def get_queryset(self):
        query_set = []
        for todo in ToDo.objects.filter(creator=self.request.user, is_checked=False):
            if todo.due_date is not None:
                query_set.append(todo)

        return query_set

    def get_context_data(self, **kwargs):
        context = super().get_context_data(**kwargs)
        today = datetime.datetime.now(datetime.timezone.utc)
        tomorrow = today + datetime.timedelta(days=1)

        todos_earlier = []
        todos_today = []
        todos_tomorrow = []
        todos_later = []

        for todo in ToDo.objects.filter(creator=self.request.user, is_checked=False):
            if todo.due_date is not None:
                if todo.due_date.day == today.day and todo.due_date.month == today.month and todo.due_date.year == today.year:
                    todos_today.append(todo)
                elif todo.due_date.day == tomorrow.day and todo.due_date.month == tomorrow.month and todo.due_date.year == tomorrow.year:
                    todos_tomorrow.append(todo)
                elif todo.due_date < today:
                    todos_earlier.append(todo)
                elif todo.due_date > tomorrow:
                    todos_later.append(todo)

        context["todos_earlier"] = todos_earlier
        context["todos_today"] = todos_today
        context["todos_tomorrow"] = todos_tomorrow
        context["todos_later"] = todos_later


        return context

这是 next_up.html

{% extends "ToDo/base.html" %}
{% block content %}
{% load crispy_forms_tags %}

{% if todos_earlier %}
    <center><h1 style="font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; font-size: 10ch; background-color: royalblue;">Earlier</h1></center>
    <br>
    {% for todo in todos_earlier %}
        <article class="content-section">
            <div class="media-body full-content">
                <h2>
                    <button onclick="location.href='{% url 'todo-check' todo.pk %}'" class="btn btn-outline-success">
                        <i class="fa fa-check"></i>
                    </button> 
                    <a style="overflow: hidden; text-overflow: ellipsis;" href="{% url 'todo-detailed' todo.title todo.pk %}" class="article-title">  {{ todo.title }}</a> 
                    <button data-toggle="modal" data-target="#exampleModalCenter{{ todo.pk }}" style="float: right;" class="btn btn-outline-danger">
                        <i class="fas fa-trash"></i>
                    </button>
                    {% if not todo.important %}
                        <button style="float: right; margin-right: 5px;" onclick="location.href='{% url 'todo-toggle-important' todo.pk %}'"
                            type="submit" class="btn btn-secondary">
                            <span aria-hidden="true"><i class="fas fa-star"></i></span>
                        </button>
                        {% else %}
                        <button style="float: right; margin-right: 5px;" onclick="location.href='{% url 'todo-toggle-important' todo.pk %}'"
                            type="submit" class="btn btn-warning">
                            <span aria-hidden="true"><i class="fas fa-star"></i></span>
                        </button>
                    {% endif %}
                </h2>
                <h3 style="color:red">
                    Was due on: {{ todo.due_date|date:"F d" }}
                </h3>
            </div>
        </article>
    {% endfor %}
{% endif %}

{% if todos_today %}
    <center><h1 style="font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; font-size: 10ch; background-color: royalblue;">For Today</h1></center>
    <br>
    {% for todo in todos_today %}
        <article class="content-section">
            <div class="media-body full-content">
                <h2>
                    <button onclick="location.href='{% url 'todo-check' todo.pk %}'" class="btn btn-outline-success">
                        <i class="fa fa-check"></i>
                    </button> 
                    <a style="overflow: hidden; text-overflow: ellipsis;" href="{% url 'todo-detailed' todo.title todo.pk %}" class="article-title">  {{ todo.title }}</a> 
                    <button data-toggle="modal" data-target="#exampleModalCenter{{ todo.pk }}" style="float: right;" class="btn btn-outline-danger">
                        <i class="fas fa-trash"></i>
                    </button>
                    {% if not todo.important %}
                        <button style="float: right; margin-right: 5px;" onclick="location.href='{% url 'todo-toggle-important' todo.pk %}'"
                            type="submit" class="btn btn-secondary">
                            <span aria-hidden="true"><i class="fas fa-star"></i></span>
                        </button>
                        {% else %}
                        <button style="float: right; margin-right: 5px;" onclick="location.href='{% url 'todo-toggle-important' todo.pk %}'"
                            type="submit" class="btn btn-warning">
                            <span aria-hidden="true"><i class="fas fa-star"></i></span>
                        </button>
                    {% endif %}
                </h2>
                <h3 style="color:blue">
                    Due today
                </h3>
            </div>
        </article>
    {% endfor %}
{% endif %}

{% if todos_tomorrow %}
    <center><h1 style="font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; font-size: 10ch; background-color: royalblue;">For Tomorrow</h1></center>
    <br>
    {% for todo in todos_tomorrow %}
        <article class="content-section">
            <div class="media-body full-content">
                <h2>
                    <button onclick="location.href='{% url 'todo-check' todo.pk %}'" class="btn btn-outline-success">
                        <i class="fa fa-check"></i>
                    </button> 
                    <a style="overflow: hidden; text-overflow: ellipsis;" href="{% url 'todo-detailed' todo.title todo.pk %}" class="article-title">  {{ todo.title }}</a> 
                    <button data-toggle="modal" data-target="#exampleModalCenter{{ todo.pk }}" style="float: right;" class="btn btn-outline-danger">
                        <i class="fas fa-trash"></i>
                    </button>
                    {% if not todo.important %}
                        <button style="float: right; margin-right: 5px;" onclick="location.href='{% url 'todo-toggle-important' todo.pk %}'"
                            type="submit" class="btn btn-secondary">
                            <span aria-hidden="true"><i class="fas fa-star"></i></span>
                        </button>
                        {% else %}
                        <button style="float: right; margin-right: 5px;" onclick="location.href='{% url 'todo-toggle-important' todo.pk %}'"
                            type="submit" class="btn btn-warning">
                            <span aria-hidden="true"><i class="fas fa-star"></i></span>
                        </button>
                    {% endif %}
                </h2>
                <h3 style="color:green">
                    Due tomorrow
                </h3>
            </div>
        </article>
    {% endfor %}
{% endif %}

{% if todos_later %}
    <br>
    <center><h1 style="font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; font-size: 10ch; background-color: royalblue;">Coming up later</h1></center>
    <br>
    {% for todo in todos_later %}
        <article class="content-section">
            <div class="media-body full-content">
                <h2>
                    <button onclick="location.href='{% url 'todo-check' todo.pk %}'" class="btn btn-outline-success">
                        <i class="fa fa-check"></i>
                    </button> 
                    <a style="overflow: hidden; text-overflow: ellipsis;" href="{% url 'todo-detailed' todo.title todo.pk %}" class="article-title">  {{ todo.title }}</a> 
                    <button data-toggle="modal" data-target="#exampleModalCenter{{ todo.pk }}" style="float: right;" class="btn btn-outline-danger">
                        <i class="fas fa-trash"></i>
                    </button>
                    {% if not todo.important %}
                        <button style="float: right; margin-right: 5px;" onclick="location.href='{% url 'todo-toggle-important' todo.pk %}'"
                            type="submit" class="btn btn-secondary">
                            <span aria-hidden="true"><i class="fas fa-star"></i></span>
                        </button>
                        {% else %}
                        <button style="float: right; margin-right: 5px;" onclick="location.href='{% url 'todo-toggle-important' todo.pk %}'"
                            type="submit" class="btn btn-warning">
                            <span aria-hidden="true"><i class="fas fa-star"></i></span>
                        </button>
                    {% endif %}
                </h2>
                <h3 style="color:seagreen">
                    Due on: {{ todo.due_date|date:"F d" }}
                </h3>
            </div>
        </article>
    {% endfor %}
{% endif %}

{% endblock content %}

如您所见，我为这些部分的每一部分编写了几乎完全相同的HTML代码。尽管从技术上讲这是可行的，但我永远无法独自生活。我必须写四遍那些复选按钮，四遍写星形按钮，其他四遍。不好

另外，在我的视图中，我做了一些草率的编码，检查了日期，月份和年份，这些似乎不太正确。但是我知道仅检查日期是不好的，因为同一天可能是不同的月份。需要明确的是，这些是DateTime对象，因此我不能等于它们，因为精确的秒数将不匹配。但是我想这还是可以的。我的主要问题是，我应该在HTML和Python代码中带来哪些变化，以便可以在单个for循环（或嵌套循环，但我不想四次重复四个相同的代码）中显示所有部分。

谢谢。