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

教程简介：

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

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

相关图片：

教程如下：

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;

下载地址：https://jsw.lanzoum.com/i3Igo1xves8b

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

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