内容简介:我们经常会有这样的需求,比如评论功能,每个评论都有可能会有自己的子评论,如果在界面只展示成一列的话非常不美观,也不能体现出他们的层级关系。那么我们今天就来看看如何使用那么我们要怎么实现呢?首先先看看评论实体的定义,如下所示:
我们经常会有这样的需求,比如评论功能,每个评论都有可能会有自己的子评论,如果在界面只展示成一列的话非常不美观,也不能体现出他们的层级关系。那么我们今天就来看看如何使用 Django
的模版来生成树状结构,以本站为例,效果如下图所示:
那么我们要怎么实现呢?首先先看看评论实体的定义,如下所示:
class Comment(models.Model): body = models.TextField('正文', max_length=300) author = models.ForeignKey(settings.AUTH_USER_MODEL, verbose_name='作者', on_delete=models.CASCADE) article = models.ForeignKey(Article, verbose_name='文章', on_delete=models.CASCADE) parent_comment = models.ForeignKey('self', verbose_name="上级评论", blank=True, null=True, on_delete=models.CASCADE)
可以看到,有一个 parent_comment
字段,关联自己。这样就可以根据这个字段来生成层级关系。 为了方便我们使用,我们自定义了一个叫 query
的 tag
,也可以叫修饰器。定义 tag
的代码如下,tag的定义应该定义在 app/templatetags
目录下,这里py文件命名为 blog_tags.py
:
@register.simple_tag def query(qs, **kwargs): """ template tag which allows queryset filtering. Usage: {% query books author=author as mybooks %} {% for book in mybooks %} ... {% endfor %} """ return qs.filter(**kwargs)
接下来下面这段代码是树节点的模版代码。
{% load blog_tags %} {% load comments_tags %} <div id="commentlist-container" class="comment-tab" style="display: block;"> <ol class="commentlist"> {% query article_comments parent_comment=None as parent_comments %} {% for comment_item in parent_comments %} {% with 0 as depth %} {% include "comments/tags/comment_item_tree.html" %} {% endwith %} {% endfor %} </ol> </div>
其中的 {% query article_comments parent_comment=None as parent_comments %}
的功能就是从评论中筛选出来是父级的评论。 comment_item_tree.html
的实现也很简单:
{% load blog_tags %} <li class="comment even thread-even depth-{{ depth }} parent" id="comment-{{ comment_item.pk }}" style="margin-left: {% widthratio depth 1 3 %}rem"> <div id="div-comment-{{ comment_item.pk }}" class="comment-body"> <div class="comment-meta commentmetadata"> {{ comment_item.created_time }} </div> <p>{{ comment_item.body |escape|custom_markdown }}</p> <div class="reply"><a rel="nofollow" class="comment-reply-link" href="javascript:void(0)" onclick="do_reply({{ comment_item.pk }})" aria-label="回复给{{ comment_item.author.username }}">回复</a></div> </div> </li><!-- #comment-## --> {% query article_comments parent_comment=comment_item as cc_comments %} {% for cc in cc_comments %} {% with comment_item=cc template_name="comments/tags/comment_item_tree.html" %} {% with depth=depth|add:1 %} {% include template_name %} {% endwith %} {% endwith %} {% endfor %}
其中最主要的部分就是 </li>
标签后面那段。这里使用 with
和 include
配合来在每一次循环里面重复的引入 comment_item_tree.html
,并且每次引入时赋予当前的评论变量和 depth
(每层循环depth会+1)。然后在每个评论处使用 style="margin-left: {% widthratio depth 1 3 %}rem"
来实现缩进,这样就实现了树状显示。
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:- 一个在线的 Jetpack 模版项目生成工具
- 重学 Java 设计模式:实战模版模式「模拟爬虫各类电商商品,生成营销推广海报场景」
- Django的模版引擎与模版使用
- 常见算法模版总结(一)
- 常见算法模版总结(二)
- C++ 模版的本质
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
PHP Web 2.0开发实战
泽瓦斯 / 苏金国 / 人民邮电出版社 / 2008-10-1 / 59.00元
本书通过一个完整的Web 2.0应用——带有动态图库、搜索和地图功能的博客系统详细介绍了Web开发的全过程。首先讨论了Web应用的规划与设计,然后逐章实现各个具体特性,包括网站主页、用户主页、用户注册页面、账户登录和管理页面、用户博客系统、网站搜索以及应用管理等,最后介绍部署和维护。 本书适合中、高级的PHP程序员阅读。一起来看看 《PHP Web 2.0开发实战》 这本书的介绍吧!