7 功能5：文章详情页、评论、评论树

1、文章详情页之评论如何实现？

 

 2、根评论

1、根评论样式

 

　　

 

        input.author {
            background-image: url('/static/img/icon_form.gif');
            background-repeat: no-repeat;
            border: 1px solid #ccc;
            padding: 4px 4px 4px 30px;
            width: 230px;
        }

 

              <div class="comments">
                    <p>发表评论</p>
                    <p>昵称</p><input type="text" id="tbCommentAuthor" class="author" disabled="disabled" size="50"
                                    value={{ request.user.username }}>
                    <p>评论内容</p>
                    <textarea name="" id="" cols="60" rows="10"></textarea>
                    <p>
                        <button class="btn btn-default comment_btn">提交评论</button>
                    </p>
                </div>

 

 

2、提交根评论

 

 

 

 

 

 

 3、显示根评论

 

                    <p>评论列表</p>
                    <ul class="list-group comment_list">
                        {% for comment in comment_list %}
                            <li class="list-group-item">
                                <div class="comment_head">
                                    <a href=""># {{ forloop.counter }}楼</a>&nbsp;&nbsp;
                                    <span>{{ comment.create_time|date:"Y-m-d H:i" }}</span>&nbsp;&nbsp;
                                    <a href="">{{ comment.user.username }}</a>
                                    <a href="" class="pull-right">回复</a>
                                </div>

                                <div class="comment_content">
                                    <p>{{ comment.content }}</p>
                                </div>
                            </li>
                        {% endfor %}

                    </ul>

评论列表