1.對評論內容進行評論

1.1.增加評論按鈕

comment_hander.py

def render_tree_node(tree_dic,margin_val):
    html = ""
    #展示子集評論
    for k, v in tree_dic.items():
        #合成評論、日期、用戶名及評論按鈕
        ele = "<div class=‘comment-node‘ style=‘margin-left:%spx‘>" % margin_val + k.comment + "<span style=‘margin-left:20px‘>%s</span>
 
" %k.date               + "<span style=‘margin-left:20px‘>%s</span>" %k.user.name               + ‘<span comment-id="%s"‘ %k.id +‘ style="margin-left:10px" class="glyphicon glyphicon-comment add-comment" aria-hidden="true"></span>‘               + "</div>"
        html += ele
        html 
 
+= render_tree_node(v,margin_val+10)
    return html

def render_comment_tree(tree_dic):
    #展示父級評論
    html = ""
    for k,v in tree_dic.items():
        ele = "<div class=‘root-comment‘>" + k.comment + "<span style=‘margin-left:20px‘>%s</span>" %k.date               + "<span style=‘margin-left:20px‘>%s</span>
 
" %k.user.name               + ‘<span comment-id="%s"‘ %k.id + ‘style="margin-left:10px" class="glyphicon glyphicon-comment add-comment" aria-hidden="true"></span>‘               + "</div>"
        html += ele
        html += render_tree_node(v,10)
    return html

查看效果：

1.2.點擊評論按鈕，展示評論框

1.2.1.克隆原來評論框

article_detail.html

 {% if request.user.is_authenticated %}
                <!-- 判斷用戶已經登錄，輸入框輸入評論 -->
                <div class="new-comment-box"> <!-- 評論框增加樣式 -->
                    <textarea class="form-control" rows="3"></textarea>
                    <!-- 按鈕樣式 -->
                    <button type="button" style="margin-top: 10px;" class="btn btn-success pull-right">評論</button>
                </div>
            {% else %}
                <div class="jumbotron">
                 <!-- 點擊登錄後，跳轉到原先準備評論的頁面，也就是給原路徑加next?xxx -->
                  <h4 class="text-center"><a class="btn-link" href="{% url ‘login‘ %}?next={{ request.path }}">登錄</a>後評論</h4>
                </div>
            {% endif %}

<script>
    //評論展示
    function getComments() {
        $.get("{% url ‘get_comments‘ article_obj.id %}",function(callback){
            //console.log(callback);
            $(".comment-list").html(callback);

            //start add comment
            $(".add-comment").click(function () {
                var comment_id = $(this).attr("comment-id");
                console.log("comment id" + comment_id);
                //克隆評論框並添加
                var new_comment_box_div = $(".new-comment-box").clone();
                $(".new-comment-box").remove();//刪除之前的評論框,不刪除會展示所有評論框
                $(this).parent().append(new_comment_box_div);
            })
        });
    }    

1.2.2.查看效果：

第二十二 BBS（2）