这一节将讲述如何添加comments库与ajax的支持。
一.添加comments库
comments库是是django框架内置的一个评论库，可以快速的搭建岀一个评论系统，不过再自定义方面有些麻烦，不想用的话也可以自己动手编写。激活comments的方法。
1.在setting.py INSTALLED_APP 添加
'django.contrib.sites', django.contrib.comments',
2.更新数据库，执行
python manage.py syncdb
3.在web目录下urls.py添加以下内容
urlpatterns = patterns('', ... (r'^comments/', include('django.contrib.comments.urls')), ... )
4.在.在setting.py中添加
SITE_ID = 1 #任意一个值
5.在templates 中使用 comment template tags
在blog_list.html、blog_filter.html中添加
{% load comments %}
在blog_list.html、blog_filter.html中添加以下内容
<div class="col-md-2 col-md-offset-7"> <a href="{% url 'updateblog' blog.id %}" title="edit"> <span class="glyphicon glyphicon-edit"></span> </a> <a href="{% url 'delblog' blog.id %}" title="delete"> <span class="glyphicon glyphicon-trash"></span> </a> {% get_comment_count for blog as comment_count %} <a href="{% url 'detailblog' blog.id %}#cmt" title="comment"> <span class="glyphicon glyphicon-comment"></span> {{comment_count}} </a> </div>
二.自定义评论表单
在blog_show.html中添加以下代码
自定义comments表单 {% block comments %} <article id="cmt"> {% get_comment_count for blog as comment_count %} <h4 class="muted comtop">{{ comment_count }} Comments</h4> <hr class="soften"> {% get_comment_list for blog as blog_com %} {% for comment in blog_com %} <div class="container-fluid none-padding"> <p class="muted"><small>{{ comment.user }}</small><small>{{ comment.submit_date|date:"F,j,Y" }}</small></p> {{ comment.comment }} </div> <hr class="soften"> {% endfor %} </article> <article > {% get_comment_form for blog as blog_form %} <div id="comment_form"> <h4 class="muted comtop">New Comments</h4> <form class="form-horizontal" action="{% comment_form_target %}" method="post"> <fieldset> {% csrf_token %} {{ blog_form.object_pk }} {{ blog_form.content_type }} {{ blog_form.timestamp }} {{ blog_form.site }} {{ blog_form.submit_date }} {{ blog_form.security_hash }} <div class="control-group"> <label class="control-label" for="id_name">name: </label> <div class="controls"> <input type="text" id="id_name" class="input-xlarge" name="name" placeholder="please enter name" required="required"> </div> </div> <div class="control-group"> <label class="control-label" for="id_email">email: </label> <div class="controls"> <input class="input-xlarge" id="id_email" type="email" name="email" placeholder="please enter email" required="required"> </div> </div> <div class="control-group"> <label class="control-label" for="id_comment">comment: </label> <div class="controls"> <textarea class="input-xlarge comment" id="id_comment" name="comment" placeholder="please enter comment" required="required"></textarea> </div> </div> <p style="display:none;"><label for="id_honeypot">如果你在该字段中输入任何内容，那么你的评论就会被视为垃圾评论。</label> <input type="text" name="honeypot" id="id_honeypot"></p> <div class="form-actions"> <input class="btn btn-info" type="submit" name="submit" value="Post"> {# <input class="btn btn-info" type="submit" name="preview" value="Preview"> #} <input type='hidden' name='next' value='{% url detailblog blog.id %}'/> </div> </fieldset> </form> </div> </article> {% endblock %}
修改views.py文件，将blog_show中的
return render_to_response("blog_show.html", {"blog": blog}) 改为 return render_to_response("blog_show.html", {"blog": blog}, context_instance=RequestContext(request))
这样评论功能就完成了。
三.ajax支持
修改自定义表单中最后一行（这一行的作用是提交完表单后跳转的页面）
<input type='hidden' name='next' value='{% url 'detailblog' blog.id %}'/>
为
<input type='hidden' name='next' value='{% url 'showcomment' blog.id %}'/>
在url中添加
url(r'^blog/commentshow/(?P<id>d+)/$', 'blog_show_comment', name='showcomment'),
在views.py中添加
def blog_show_comment(request, id=''): blog = Blog.objects.get(id=id) return render_to_response('blog_comments_show.html', {"blog": blog})
新建blog_comments_show.html
{% load comments %} <article id="cmt"> {% get_comment_count for blog as comment_count %} <h4 class="muted comtop">{{ comment_count }} Comments</h4> <hr class="soften"> {% get_comment_list for blog as blog_com %} {% for comment in blog_com %} <div class="container-fluid none-padding"> <p class="muted"><small>{{ comment.user }}</small><small>{{ comment.submit_date|date:"F,j,Y" }}</small></p> {{ comment.comment }} </div> <hr class="soften"> {% endfor %} </article>
在blog_show.html中添加：
{% block extra_head %} <script type="text/javascript" charset="utf-8"> function bindPostCommentHandler() { $('#comment_form form input.submit-preview').remove(); $('#comment_form form').submit(function() { $.ajax({ type: "POST", data: $('#comment_form form').serialize(), url: "{% comment_form_target %}", cache: false, dataType: "html", success: function(html, textStatus) { $('#cmt').replaceWith(html); $('#comment_form form')[0].reset(); }, error: function (XMLHttpRequest, textStatus, errorThrown) { $('#comment_form form').replaceWith('Your comment was unable to be posted at this time. We apologise for the inconvenience.'); } }); return false; }); } $(document).ready(function() { bindPostCommentHandler(); }); </script> {% endblock %}
这样就添加了ajax的支持。