您好,登錄后才能下訂單哦!
前言
我們經(jīng)常會(huì)有這樣的需求,比如評(píng)論功能,每個(gè)評(píng)論都有可能會(huì)有自己的子評(píng)論,如果在界面只展示成一列的話非常不美觀,也不能體現(xiàn)出他們的層級(jí)關(guān)系。那么我們今天就來看看如何使用Django的模版來生成樹狀結(jié)構(gòu),以本站為例,效果如下圖所示:
那么我們要怎么實(shí)現(xiàn)呢?首先先看看評(píng)論實(shí)體的定義,如下所示:
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="上級(jí)評(píng)論", blank=True, null=True, on_delete=models.CASCADE)
可以看到,有一個(gè)parent_comment字段,關(guān)聯(lián)自己。這樣就可以根據(jù)這個(gè)字段來生成層級(jí)關(guān)系。 為了方便我們使用,我們自定義了一個(gè)叫query的tag,也可以叫修飾器。定義tag的代碼如下,tag的定義應(yīng)該定義在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)
接下來下面這段代碼是樹節(jié)點(diǎn)的模版代碼。
{% load blog_tags %} {% load comments_tags %} <div id="commentlist-container" class="comment-tab" > <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 %}
的功能就是從評(píng)論中篩選出來是父級(jí)的評(píng)論。 comment_item_tree.html的實(shí)現(xiàn)也很簡單:
{% load blog_tags %} <li class="comment even thread-even depth-{{ depth }} parent" id="comment-{{ comment_item.pk }}" > <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 class="comment-reply-link" href="javascript:void(0)" rel="external nofollow" onclick="do_reply({{ comment_item.pk }})" aria-label="回復(fù)給{{ comment_item.author.username }}">回復(fù)</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>標(biāo)簽后面那段。這里使用with和include配合來在每一次循環(huán)里面重復(fù)的引入comment_item_tree.html,并且每次引入時(shí)賦予當(dāng)前的評(píng)論變量和depth(每層循環(huán)depth會(huì)+1)。然后在每個(gè)評(píng)論處使用來實(shí)現(xiàn)縮進(jìn),這樣就實(shí)現(xiàn)了樹狀顯示。
總結(jié)
以上就是這篇文章的全部內(nèi)容了,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,謝謝大家對(duì)億速云的支持。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。