'''
{% block page-main %}
<div class="article-detail">
<h1>{{ article.title }}</h1>
{# <h3>{{ article.desc }}</h3>#}
<p>{{ article.articledetail.content|safe }}</p>
</div>
<div class="poll clearfix">
<div id="div_digg">
<div class="diggit action">
<span class="diggnum" id="digg_count">{{ article.up_count }}</span>
</div>
<div class="buryit action">
<span class="burynum" id="bury_count">{{ article.down_count }}</span>
</div>
<div class="clear"></div>
<div class="diggword" id="digg_tips" style="color: red;"></div>
</div>
</div>
<p>评论列表</p>
<ul class="comment_list">
{% for comment in comment_list %}
<li class="list-group-item">
<div>
<a href="">#{{ forloop.counter }}楼</a>
<span style="color: gray">{{ comment.create_time|date:"Y-m-d H:i" }}</span>
<a href=""><span>{{ comment.user.username }}</span></a>
<a class="pull-right reply_btn" username="{{ comment.user.username }}"
comment_pk="{{ comment.pk }}"><span>回复</span></a>
</div>
{# 父评论 #}
{% if comment.parent_comment_id %}
<div class="pid_info well">
<p> {{ comment.parent_comment.user.username }}:
{{ comment.parent_comment.content }} </p>
</div>
{% endif %}
<div class="con">
<p>
{{ comment.content }}
</p>
</div>
</li>
{% endfor %}
</ul>
//评论功能
{% if request.user.username %}
<div class="div_comment">
<p>昵称：<input type="text" id="tbCommentAuthor" class="author" disabled="disabled" size="50"
value="{{ request.user.username }}"></p>
<p>评论内容</p>
<textarea name="" id="comment_content" cols="60" rows="10"></textarea>
<p>
<button id="comment_btn" style="margin-top: 20px">提交评论</button>
</p>
</div>
{% else %}
<a href="/login/">登录</a>
{% endif %}
{#自定义一个属性标签，便用后续使用属性值，并且当js设置为静态文件时，时必须要用到的 #}
<div class="info" article_id="{{ article.pk }}" username="{{ request.user.username }}"></div>
{% endblock %}
{% block page_js %}
{% csrf_token %}
<script>
$("#div_digg .action").on("click",function () {
//判断是点赞还是踩灭,注意不能是diggnum
if($(".info").attr("username")){
var is_up=$(this).hasClass("diggit");
console.log(is_up);
//获取到文章id 在js中需要加引号
var article_id="{{ article.pk }}";
$.ajax({
url:"/blog/up_down/",
type:"post",
data:{
"is_up":is_up,
"article_id":article_id,
"csrfmiddlewaretoken":$("[name='csrfmiddlewaretoken']").val(),
},
success:function(data){
alert(data);
//如果为真，说明是第一次操作
//console.log(data.state); 都可以使用
console.log(data["state"]);
if(data.state){
if(is_up){
var val=$("#digg_count").text(); //点赞加1
val=parseInt(val)+1;
console.log(val);
$("#digg_count").text(val);
}else{
var val=$("#bury_count").text();
val=parseInt(val)+1;
$("#bury_count").text(val); //踩加1
}
}else{
var val=66;
console.log(val);
if(data.first_action){
$("#digg_tips").html("您已经推荐过");
}else {
$("#digg_tips").html("您已经反对过");
}
}
}
}
)
}else{
location.href = "/login/"
}
});
//提交评论 pid为空就是根评论，不为空就是子评论
var pid="";
$("#comment_btn").on("click",function () {
var article_id='{{ article.pk }}';
var content=$("#comment_content").val();
console.log(article_id,content);
if(pid) {
//子评论时，要有@父评论用户，然后再填评论，在存评论时只存评论内容，因此用到切割
var index=content.indexOf("
");
content=content.slice(index+1)
}
$.ajax({
url:"/blog/comment/",
type:"post",
data:{
article_id:article_id,
content:content,
pid:pid,
csrfmiddlewaretoken: $("[name='csrfmiddlewaretoken']").val(),
},
success:function (data) {
alert(data)
var create_time=data.create_time;
var content=data.content;
var username=data.username;
//拼接使用++
var comment_li= '<li class="list-group-item"><div><span style="color: gray">' + create_time + '</span> <a href=""><span>' + username + '</span></a></div> <div class="con"> <p> ' + content + ' </p> </div> </li>';
$(".comment_list").append(comment_li);
// 清空文本框
$("#comment_content").val('');
// 清空pid
pid = ""
}
})
});
//回复功能
$(".list-group-item .reply_btn").on("click",function () {
//点击回复的时候，光标移到评论框
$("#comment_content").focus();
//得到属性为username的值
var v="@"+$(this).attr("username")+"
";
$("#comment_content").val(v)
//pid赋值
pid = $(this).attr("comment_pk")
})
</script>
{% endblock %}
'''
