子比主题美化 – 评论区添加随机夸夸功能

简介

有很多人在网站浏览需要回复,有的比较嫌麻烦不愿意打字,也会收到一些各种评论相对比较杂乱,今天分享一个用夸夸功能,来替代传统的评论一言,将它们分开使用,先看看效果图,再考虑使用不使用!

操作:在本站评论旁边,点击夸夸按钮后,弹出如下随机一言评论窗口,本站效果图如下:

图片[1] - 子比主题美化 – 评论区添加随机夸夸功能 - 筱信日记

教程

css代码自行本地化 或直接下载

本文隐藏内容
 
 
 
.kuakua-first-box{
margin: auto;
width: 440px;
border-radius: 16px;
bottom: auto;
min-height: 10rem;
left: 50%;
position: fixed;
right: auto;
top: 50%;
transform: translate(-50%, -50%);
background: #fff;
z-index: 1032;
box-shadow: 0px 0px 20px #0000001f;
display: none;
}
@media screen and (max-width: 500px){.kuakua-first-box{width:94%;}}
.kuakua-ei{
border-radius: 4px;
overflow: inherit;
}
.kuakua-close{
z-index: 9999;
right: 14px !important;
display: flex;
position: absolute;
right: 8px;
top: 4px;
padding: 16px;
cursor: pointer;
}
.kuakua-column{
position: absolute;
width: 298px;
height: auto;
top: -28px;
left: 0px;
right: 0px;
z-index: 6000;
background: url(/sucai/kua-ribbon.png) 0% 0% / 298px 83px no-repeat;
margin: 0 auto;
text-align: center;
}
.kuakua-headerIcon{
border-radius: 50%;
position: relative;
text-align: center;
padding: 6px;
background-color: rgb(255, 255, 255);
width: 78px;
height: 78px;
margin: 0 auto;
}
.kuakua-icon{
width: 60px !important;
height: 60px !important;
fill: currentcolor;
transition: transform 0.3s ease 0s;
cursor: pointer;
}
.kuakua-headerTitle{
font-size: 20px;
font-weight: 600;
}
.kuakua-modal-body{
position: relative;
background-color: transparent;
text-align: center;
border-bottom: none;
border-top: none;
border-radius: 0px;
box-shadow: none;
padding: 65px 30px 20px 30px;
}
.kuakua-contentBox{
width: 100%;
min-height: 102px;
padding: 15px 20px;
margin-top: 20px;
border-radius: 0;
box-sizing: border-box;
position: relative;
background-color: rgb(244, 244, 244);
text-align: center;
border-bottom: none;
border-top: none;
box-shadow: none;
}
.kuakua-comment{
margin-bottom: 10px;
line-height: 26px;
display: flex;
-webkit-box-align: center;
align-items: center;
-webkit-box-pack: center;
justify-content: center;
word-break: break-all;
transition: all 0s ease 0s;
color: rgb(68, 68, 68);
font-size: 18px;
}
.kuakua-cancelBtn{
background-color: rgb(255, 255, 255);
color: rgb(102, 102, 102);
border: none;
border-radius: 36px;
transition: all 0.3s ease 0s;
padding: 4px;
width: 80px;
display: inline-block;
margin-top: 10px;
}
.kuakua-confirmBtn{
background: rgb(255, 227, 0);
width: 118px;
height: 36px;
display: inline-block;
-webkit-box-align: center;
align-items: center;
-webkit-box-pack: center;
justify-content: center;
background-color: rgb(255, 227, 0);
color: rgb(68, 68, 68);
border: none;
border-radius: 4px;
font-size: 14px;
cursor: pointer;
transition: all 0.3s ease 0s;
box-sizing: border-box;
margin-top: 20px;
}
.form-control:focus {
border: 1px solid rgb(148 148 148) !important;
box-shadow: none !important;
}
 

kuakua.css

主要代码

以下代码放到子比主题的func.phpfunctions.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行后(提交评论之前)插入下面这行代码

 
 
 
<!–夸夸功能开头–>
<?php kuakua()?>
<!–夸夸功能结尾–>

2345_image_file_copy_1

 

至此就修改完成了,因为涉及到CSS,建议清空浏览器缓存再刷新看效果。

 温馨提示:本文最后更新于2024-03-27 23:44:00,某些文章具有时效性,若有错误或失效,请在下方留言或联系
仅供学习和研究使用,请在下载后24小时内删除
温馨提示:本文最后更新于2024-05-05 19:54:57,某些文章具有时效性,若有错误或已失效,请在下方留言
© 版权声明
THE END
喜欢就支持一下吧
点赞13 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

夸夸
还有吗!没看够!
取消
昵称表情代码图片

    暂无评论内容