模板制作新手教程（七）-内容页使用评论功能

更新时间：2024-09-13 00:52:10
1136阅读
0评论

上一篇我们制作了文章内容页面，但是没有用户交互，用户想发布下自己的看法观点还没地方发的，一个好模板怎能没有评论功能呢。so，这一篇我们就把内容页面的评论功能加上去。

老规矩，先看效果图：

微信截图_20210108133542.png

一、写评论的辅助函数

评论的辅助函数有两个，一个是评论的表单，一个是评论的列表。

/*评论列表*/
function comment_list($CommentData){
	$html='<h3 class="comment_title">有 <b>'.$CommentData['count'].'</b> 位网友评论：</h3><div class="comment_list">';
	$comments=$CommentData['list'];
	$commentsData=$comments['lists'];
	foreach($comments['top'] as $k=>$v){
		$comment = $commentsData[$v];
		$html.= '<div class="comment_msg" data-id="'.$comment['id'].'"><img class="comment_avatar" src="'.getHead($comment['email']).'"/>
			<div class="comment_content">
				<p class="comment_name">
					<a href="'.(!empty($comment['home']) ? $comment['home'] : ':;').'" rel="nofollow" target="_blank">'.$comment['nickname'].'</a>
					<span class="comment_time"><i class="iconfont icon-time"></i> '.formatDate($comment['createTime']).' ('.$comment['createTime'].')</span>
					<button type="button" class="quickReplay"><i class="iconfont icon-comment"></i>回复</button>
				</p>
				<p class="comment_info"><i class="iconfont"></i>'.$comment['content'].'</p>
			</div>';
		$html.=comment_list_children($comment['children'],$commentsData);
		$html.='</div>';
	}
	return $html.'</div><div class="pages comment_page">'.$CommentData['pageHtml'].'</div>';
}
/*子评论列表*/
function comment_list_children($children,$commentsData){
	$html='';
	if(!empty($children)){
		foreach($children as $k=>$v){
			$comment = $commentsData[$v];
			$html.='<div class="comment_msg comment_msg_son" data-id="'.$comment['id'].'"><img class="comment_avatar" src="'.getHead($comment['email']).'"/>
				<div class="comment_content">
					<p class="comment_name">
						<a href="'.(!empty($comment['home']) ? $comment['home'] : ':;').'" rel="nofollow" target="_blank">'.$comment['nickname'].'</a>
						<span class="comment_time"><i class="iconfont icon-time"></i> '.formatDate($comment['createTime']).' ('.$comment['createTime'].')</span>
						<button type="button" class="quickReplay"><i class="iconfont icon-comment"></i>回复</button>
					</p>
					<p class="comment_info"><i class="iconfont"></i>'.$comment['content'].'</p>
				</div>';
				$html.=comment_list_children($comment['children'],$commentsData);
			$html.='</div>';
		}
	}
	return $html;
}
/*
*发表评论
*@types类型：logs  or  pages
*@id：文章或单页的id
*@user：系统自带的，直接调用即可。$user是系统预留变量，保存用户登录数据，开发会员可以使用到此。
*@isRemark：文章或单页是否开启评论
*/
function comment_post($types,$id,$user,$isRemark){
	$types = $types == 'pages' ? 'pages' : 'logs';
	$id=intval($id);
	$html='<p style="padding: 3rem;text-align: center;">评论功能暂时关闭</p>';
	if(Config::get('webConfig.commentStatus') == 1 && $isRemark == 1){
		$html='<form id="commentSumbit" target="_self" method="post" action="/comment/addcom" class="form_box" onSubmit="return false;">
			<input type="hidden" name="types" id="types" value="'.$types.'">
			<input type="hidden" name="vid" id="vid" value="'.$id.'">
			<input type="hidden" name="topId" id="topId" value="0">
			<div class="input_line"><input type="text" name="username" id="username" value="'.$user['nickname'].'" tabindex="1" placeholder="名称(*)"></div>
			<div class="input_line"><input type="text" name="email" id="email" tabindex="2" value="'.$user['email'].'" placeholder="邮箱"></div>
			<div class="input_line"><input type="text" name="home" id="home" tabindex="3" value="'.$user['home'].'" placeholder="主页网站http(s)://"></div>';
		Config::get('webConfig.commentVcode') == 1 && $html.='<div class="input_line input_qrcode" style="padding-right: 0;"><input type="text" name="verifyCode" id="verifyCode" tabindex="4" placeholder="验证码(*)"><img id="commentVcode" src="'.Url::other('captcha','comment').'" alt="请填写验证码" onclick=":this.src=this.src+'?v='+new Date().getTime();"></div>';
		$html.='<div class="input_textarea">
				<textarea name="content" id="content" cols="50" rows="4" tabindex="5" placeholder="欢迎你的交流和评论，还请不要无意义的灌水呢(°ー°〃)"></textarea>
				<input name="sumbit" type="submit" tabindex="6" value="提交评论" onclick="return commentPost()" class="form_btn">
			</div>
		</form>';
	}
	return $html;
}
function getHead($email){
	$headImg=TEMPURL .'/image/avatar.gif';
	if(empty($email)){
		return $headImg;
	}
	$emailArr=explode('@', $email,2);
	if($emailArr[1] == 'qq.com' && is_numeric($emailArr[0])){
		$headImg='http://q1.qlogo.cn/g?b=qq&nk='.$emailArr[0].'&s=100&t='. time();
	}else{
		$hash = md5($email);
		$s=45;
		$d='mm';
		$g='g';
		$avatar = 'http://secure.gravatar.com/avatar/'.$hash.'?s='.$s.'&d='.$d.'&r='.$g;
		$headImg=!empty($avatar) ? $avatar : '';
	}
	return $headImg;
}

二、内容页调用评论

这里我们需要用到js文件，就顺便把footer.php搞了吧，然后detail.php需要在最下面引入footer模板。

先创建footer.php模板文件，在此文件中写入：

<?php if (!defined('CMSPATH')){exit('error!');}?>
<div class="footer">
	<p>&copy;{:date('Y')} {$webConfig['icp']}</p>
	<p>Powered by <a href="http://www.rpcms.cn" style="color: inherit;">rpcms V{RP.RPCMS_VERSION}</a></p>
</div>
<script type="text/" src="{$tempUrl}/js/common.js"></script>
</body>
</html>

然后，我们在detail.php文件的class为detailContent的div下面加入：

<div class="comment_box" id="commentlist">
	{:comment_list($CommentData)}
</div>
<div class="comment_post">
	<h3 class="comment_title">欢迎 <b>你</b> 来评论</h3>
	<div class="comment_post_form">
		{:comment_post('logs',$listId,$user,$data['isRemark'])}
	</div>
</div>

三、写评论js事件

评论我们用异步post数据，需要编写js事件，如：提交评论、快捷回复、取消回复

在js/common.js文件中写入：

$(document).ready(function(){
	$(".quickReplay").click(function(){
		var a=$(this).parents(".comment_msg").eq(0),
			b=a.data("id"),
			c=$(".comment_post");
		b && $("#topId").val(b),c.find(".comment_title").append('<a rel="nofollow" id="cancelReply" href=":;" class="cancelReply">取消回复</a>'),a.find(".comment_content").get(0).appendChild(c.get(0));
	})
	$("body").on("click","#cancelReply",function(){
		var a=$(".comment_post");
		$("#topId").val(0),a.find("#cancelReply").remove(),$("#commentlist").after(a.get(0));
	})
})
function commentPost(){
	var _this=$('#commentSumbit .form_btn'),
		a=$('#commentSumbit').serializeArray(),
		postUrl=$('#commentSumbit').attr('action'),
		param={};
	$.each(a, function(b,c){
		param[c.name] = c.value;
    });
	if(!param.username){
		alert('评论名称不可为空');return !1;
	}
	if('undefined' != typeof param.verifyCode && !param.verifyCode){
		alert('验证码不可为空');return !1;
	}
	if(param.email && !$.checkform(param.email,'email')){
		alert('邮箱格式错误');return !1;
	}
	if(param.home && !$.checkform(param.home,'url')){
		alert('主页网址格式错误');return !1;
	}
	if(!param.content){
		alert('评论内容不可为空');return !1;
	}
	$.ajax({
		"url":postUrl,
		"data":param,
		"type":"post",
		"dataType":"json",
		"beforeSend":function(){
			_this.attr("disabled",true).text("正在提交");
		},
		"complete":function(){
			_this.attr("disabled",false).text("提交评论");
		},
		"success":function(res){
			alert(res.msg);
			if(res.code == 200){
				setTimeout(function(){window.location.reload()},2200);
			}else if(res.code == 101){
				$("#commentVcode").length > 0 && $("#commentVcode").click();
			}
		},
		"error":function(){
			alert("提交失败");
		}
	})
}

四、附css，可参考

.comment_box{clear: both;margin-bottom: 20px;}
.comment_list .comment_msg{border-bottom: 1px solid #f1f1f1;padding: 15px 20px;transition: all .35s ease 0s;}
.comment_list .comment_msg:hover{box-shadow: 0 5px 30px rgba(0,0,0,.1);}
.comment_list .comment_avatar{float: left;margin-right: 15px;width: 50px;height: 50px;border-radius: 50%;box-shadow: 0 0 4px 0 rgba(0,0,0,.1);border: 2px solid #fff;}
.comment_list .comment_content{overflow: hidden;}
.comment_list .comment_name{margin-bottom: 5px;}
.comment_list .comment_name .comment_time{color: #bbb;margin-left: 5px;font-size: 13px;}
.comment_list .comment_name .quickReplay{color: #bbb;border: none;background: none;margin-left: 10px;cursor: pointer;outline: none;}
.comment_list .comment_name .quickReplay:hover{color: #f40;}
.comment_list .comment_info{margin-bottom: 5px;}
.comment_list .comment_msg_son{margin-top: 10px;padding: 15px;border: 1px solid #f1f1f1;border-radius: 4px;box-shadow: 0 0 2px rgba(0,0,0,0.05);}
.comment_post .cancelReply{float: right;font-size: 0.7rem;font-weight: normal;}
.comment_post .cancelReply:hover{color:#f40;}
.comment_title,.comment_title b{font-size: 20px;}
.comment_post_form{padding: 10px;}
.comment_post_form .input_line{width: 25%;position: relative;float: left;padding-right: 4px;margin-bottom: 10px;}
.comment_post_form .input_line input{line-height: 38px;height: 38px;width: 100%;padding: 0 10px;border: 1px solid #e4e4e4;}
.comment_post_form .input_qrcode img{position: absolute;right: 1px;top: 4px;height: 30px;width: auto;}
.comment_post_form .input_textarea{position: relative;width: 100%;clear: both;height: 120px;}
.comment_post_form .input_textarea textarea{border: 1px solid #e4e4e4;border-radius: 0;padding: 8px;width: 100%;height: 100%;resize: none;}
.comment_post_form .input_textarea .form_btn{position: absolute;right: 0;bottom: 0;background-color: #1ba1e2;height: 38px;line-height: 38px;padding: 0 20px;color: #fff;text-align: center;cursor: pointer;border: 0;}
.comment_list .comment_content .comment_post{margin: 15px 0;border: 1px solid #f1f1f1;}
.comment_list .comment_content .comment_post .comment_post_form .input_line{width:33%}
.comment_list .comment_content .comment_post .comment_post_form .input_qrcode{width: 50%;}
.pages{text-align: right;padding: 1rem 0 0.5rem;}
.pages span{padding: 0.3rem 0.65rem;background: #0077dd;color: #fff;border: 1px solid #0077dd;}
.pages a{padding: 0.3rem 0.65rem;border: 1px solid #fff;background: #fff;}
.footer{clear:both;padding: 50px 0;text-align: center;background: #2f2f2f;color: #ccc;}

总结：评论功能涉及知识点比较多，所以基础知识最重要，一定要打好根基。

模板开发

上一篇：模板制作新手教程（六）-文章内容页制作，并获取相关文章

下一篇：模板制作新手教程（八）-制作搜索结果页面

发表评论

评论已关闭，请移步论坛发表，立即前往

有 0 位网友评论：

下载

使用教程

开发教程

文档手册

模板开发

插件开发

应用中心

社区

模板制作新手教程（七）-内容页使用评论功能

一、写评论的辅助函数

二、内容页调用评论

三、写评论js事件

四、附css，可参考

下载

使用教程

开发教程

文档手册

模板开发

插件开发

应用中心

社区