在 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" },
]}
我正在尝试在我的 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" },
]}