简介
有很多人在网站浏览需要回复,有的比较嫌麻烦不愿意打字,也会收到一些各种评论相对比较杂乱,今天分享一个用夸夸功能,来替代传统的评论一言,将它们分开使用,先看看效果图,再考虑使用不使用!
操作:在本站评论旁边,点击夸夸按钮后,弹出如下随机一言评论窗口,本站效果图如下:
教程
css代码自行本地化 或直接下载
主要代码
以下代码放到子比主题的func.php
或functions.php
中,推荐放func.php
。
//夸夸功能
function kuakua(){
echo'<link rel="stylesheet" type="text/css" href="这里放CSS文件路径">
<a class="but btn-input-expand input-image mr6" id="kuakua" href="javascript:;">
<svg class="icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" role="img">
<image href="/sucai/眼红.svg" width="14px" height="14px" />
</svg>
<span class="hide-sm">夸夸</span>
</a>
<div class="kuakua-div" style="width: 9999px;height: 99999px;background: #000;z-index: 1031;position: fixed;top: 0;left: 0;opacity: .6;display:none"></div>
<div class="kuakua-first-box">
<div class="kuakua-ei">
<span class="kuakua-close" title="关闭">
<div>
<svg fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" id="close" class="sc-eCImPb iRFNEp"><g fill="none" fill-rule="evenodd" stroke="currentColor"><path d="M7.99 7.99L1 1l6.99 6.99L1 14.98l6.99-6.99zm0 0L15 15 7.99 7.99 14.98 1 7.99 7.99z" stroke="currentColor"></path></g></svg>
</div>
</span>
<div>
<div class="kuakua-column">
<section class="kuakua-headerIcon"><svg class="icon kuakua-icon" aria-hidden="true">
<image href="/sucai/眼红.svg" width="65px" height="60px" /></svg>
</section>
<span size="16" color="black4" class="kuakua-headerTitle">夸夸</span>
</div>
</div>
<div style="position: relative;display: block;">
<div>
<section class="kuakua-modal-body">
<section class="kuakua-contentBox">
<span size="18" color="black4" class="kuakua-comment">还有吗!没看够!</span>
<button type="button" class="kuakua-cancelBtn">换一换</button>
</section>
<button type="button" class="kuakua-confirmBtn">夸夸TA</button>
</section>
</div>
</div>
</div>
</div>
<script>
$(function(){
$(".kuakua-cancelBtn").click(function() {
$.getJSON("https://21lhz.cn/cdn/api/yiyanapi.php?encode=kuakua",function(data){
$(".kuakua-comment").html(data.text);
$("#comment").text(data.text);
});
});
});
$(".kuakua-confirmBtn").click(function() {
$("#submit").trigger("click");
$(".kuakua-first-box").hide(150);//隐藏速度
$(".kuakua-div").hide(150);//隐藏速度
});
$("#kuakua").click(function (e) {//
/*阻止冒泡事件*/
$(".kuakua-first-box").show(150);//显示速度
$(".kuakua-div").show(150);//显示速度
$.getJSON("https://21lhz.cn/cdn/api/yiyanapi.php?encode=kuakua",function(data){
$(".kuakua-comment").html(data.text);
$("#comment").text(data.text);
});
e = window.event || e;
if (e.stopPropagation) {
e.stopPropagation();
} else {
e.cancelBubble = true;
}
});
$(".kuakua-close").click(function () {
$(".kuakua-first-box").hide(150);//隐藏速度
$(".kuakua-div").hide(150);//隐藏速度
$("#comment").text("");
});
</script>';
}
子比主题下/template/comments.php
中约88行后(提交评论之前)插入下面这行代码
至此就修改完成了,因为涉及到CSS,建议清空浏览器缓存再刷新看效果。
因api存在跨域问题,现解决办法是自建夸夸api,教程如下
暂无评论内容