在 Jinja 模板中渲染线程评论树

render threaded comment tree in Jinja template

我正在尝试在我的 Flask 项目中实现线程注释,我希望它看起来像这样:

comment1
    reply1
        reply4
            reply6
        reply5
    reply2
    reply3
comment2

对于上面的例子,我有这样的评论:

comments = { 'comment1':['reply1', 'reply2', 'reply3'],
             'reply1':['reply4', 'reply5'],
             'reply4':['reply6'],
             'reply2':[],
             'reply3':[],
             'reply5':[],
             'reply6':[],
             'comment2':[],
            }

键值对comment:their直接回复

在此之后,我尝试为每个根评论构建一个基于列表的树,即评论 1、评论 2 等。例如 comment1 我有一个像这样的树:

['reply1', ['reply4', ['reply6', []], 'reply5', []], 'reply2', [], 'reply3', []]

现在,我不知道如何将这些 comments/replies 呈现为线程和多级缩进。我应该如何在 Jinja 模板中解析这棵树并呈现 comments/replies ?是否有必要像我在这里所做的那样为每个评论构建一个基于列表的树,或者评论字典是否足以满足所需的实现?

首先决定HTML应该是什么样子(我假设你想生成HTML),然后设计你的模板,然后编写Python代码来生成合适的数据结构体。不要尝试在您的模板中实现任何复杂的树遍历内容。

嵌套 HTML 列表的一个示例:

<ul>
{% for node in nodes %}
{% if node.indent %}
  <li><ul>
{% elif node.outdent %}
  </ul></li>
{% elif node.content %}
  <li>{{ node.content }}</li>
{% endif %}
{% endfor %}
</ul>

这需要像这样的扁平树结构:

{ "nodes": [
  { "content": "hi" },
  { "indent": True },
  { "content": "how do you do" },
  { "outdent": True },
  { "content": "hi again" },
]}