Django的html在for遍历后显示“一、二、三...”和“1,2,3...”分级标题

例如当天的html为：

{% load static %}
{% csrf_token %}
<!DOCTYPE html>
<html>
<head>
    <title>生活规划师</title>
    <link rel="stylesheet" href="{% static 'css/LifePlanningGuide.css' %}">
    <script src="{% static 'js/LifePlanningGuide.js' %}"></script>
</head>
<body>
    <h1>生活规划师</h1>
    <button id="create-theme-button">新建主题</button>
        
    {% for theme in themes %}
        <div class="theme-container">
          <h2 class="theme-title">{{ theme.name }}</h2>
          <button id="create-task-button-{{ theme.id }}" class="create-task-button" data-theme-id="{{ theme.id }}">新建任务</button>
    
          {% for task in tasks %}
              {% if task.theme.id == theme.id %}
                  <div class="task-container">
                      <p class="task-description">{{ task.description }}</p>
                      <div class="task-buttons">
                          <button class="top-task-button" data-task-id="{{ task.id }}">置顶</button>
                          <button class="move-up-task-button" data-task-id="{{ task.id }}">上移</button>
                          <button class="move-down-task-button" data-task-id="{{ task.id }}">下移</button>
                          <button class="delete-task-button" data-task-id="{{ task.id }}">删除</button>
                      </div>
                  </div>
              {% endif %}
          {% endfor %}
        </div>
    {% endfor %}
</body>
</html>

在这里插入图片描述
我们希望在每个分级标题前面显示标题号，怎么实现呢？

首先看看我的view.py里面的视图函数：

def index(request):
    themes = Theme.objects.filter(user=request.user, is_deleted=False)
    tasks = Task.objects.filter(theme__user=request.user, theme__is_deleted=False).order_by('-is_top', 'created_at')
    return render(request, 'LifePlanningGuide.html', {'themes': themes, 'tasks': tasks})

鉴于现有视图函数，我们需要稍微调整之前提出的方案，以便在模板中实现每个主题的中文数字编号和每个任务的阿拉伯数字编号。由于是分开传递themes和tasks，而非作为主题属性的任务列表，我们可以在模板中使用一些小技巧来实现需求。

首先，定义一个简单的数字到中文的转换函数可能不太适用于当前的情况，因为Django的模板不支持在模板中直接执行Python代码。但是，我们可以通过自定义模板过滤器来实现。

步骤 1: 创建一个自定义模板过滤器

在Django应用目录中创建一个templatetags目录。
在templatetags目录中，创建一个__init__.py文件和一个custom_filters.py（或其他你喜欢的名字）文件。
在custom_filters.py中，定义一个转换数字到中文的过滤器和一个转换数字到阿拉伯数字的过滤器（虽然后者在Django模板中通过forloop.counter已有内置支持，这里仅为演示自定义过滤器的创建）。

from django import template

register = template.Library()

@register.filter(name='num_to_chinese')
def num_to_chinese(value):
    chinese_nums = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九', '十']
    if value < 11:
        return chinese_nums[value]
    elif value < 20:
        return '十' + chinese_nums[value - 10]
    else:
        return chinese_nums[value // 10] + '十' + (chinese_nums[value % 10] if value % 10 != 0 else '')

步骤 2: 在视图中按主题分组任务

调整视图，以在每个主题下分组任务，这样可以在模板中更容易地管理。

from django.shortcuts import render
from .models import Theme, Task

def index(request):
    themes = Theme.objects.filter(user=request.user, is_deleted=False)
    tasks = Task.objects.filter(theme__user=request.user, theme__is_deleted=False).order_by('-is_top', 'created_at')
    tasks_grouped_by_theme = {
        theme.id: list(Task.objects.filter(theme=theme, theme__is_deleted=False).order_by('-is_top', 'created_at'))
        for theme in themes
    }
    return render(request, 'LifePlanningGuide.html', {'themes': themes, 'tasks_grouped_by_theme': tasks_grouped_by_theme, 'tasks': tasks})

步骤 3: 在HTML模板使用自定义过滤器和调整数据展示

首先，确保在模板顶部加载自定义的模板标签：

{% load static %}
{% csrf_token %}
{% load custom_filters %}

然后，根据主题和任务展示的需求调整HTML模板：

{% load static %}
{% csrf_token %}
{% load custom_filters %}

<!DOCTYPE html>
<html>
<head>
    <title>生活规划师</title>
    <link rel="stylesheet" href="{% static 'css/LifePlanningGuide.css' %}">
    <script src="{% static 'js/LifePlanningGuide.js' %}"></script>
</head>
<body>
    <h1>生活规划师</h1>
    <button id="create-theme-button">新建主题</button>
        
    {% for theme in themes %}
        <div class="theme-container">
          <h2 class="theme-title">{{ forloop.counter|num_to_chinese }}、{{ theme.name }}</h2>
          <button id="create-task-button-{{ theme.id }}" class="create-task-button" data-theme-id="{{ theme.id }}">新建任务</button>
    
          {% for task in tasks %}
              {% if task.theme.id == theme.id %}
                  <div class="task-container">
                      <p class="task-description">{{ forloop.counter }}. {{ task.description }}</p>
                      <div class="task-buttons">
                          <button class="top-task-button" data-task-id="{{ task.id }}">置顶</button>
                          <button class="move-up-task-button" data-task-id="{{ task.id }}">上移</button>
                          <button class="move-down-task-button" data-task-id="{{ task.id }}">下移</button>
                          <button class="delete-task-button" data-task-id="{{ task.id }}">删除</button>
                      </div>
                  </div>
              {% endif %}
          {% endfor %}
        </div>
    {% endfor %}
</body>
</html>