子比主题美化-给评论区添加一个夸夸功能

用夸夸功能替代传统的评论一言（文章/论坛），将它们分开使用，先看看效果图，再考虑使用不使用！

效果：

教程：

1、将下方代码添加到主题根目录下functions.php文件中，或者自己创建一个func.php文件把代码放里面也可以：

//随机夸夸
function kuakua(){
   echo'<style type="text/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(https://www.aiik.cn/api/img/kuakua.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;
    }
</style>
<a class="but btn-input-expand input-image mr6 "    style="margin-bottom: 0px;background: #33e4ffab;border-radius: 6px;color: #000000;" id="kuakua" href="javascript:;">
    <svg class="icon" aria-hidden="true">
    <use xlink:href="#icon-zan-p"></use>
    </svg><span>夸夸</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">
              <use xlink:href="#icon-zan-p"></use></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://api.71xk.com/api/sentence?msg=v18&type=json",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://api.71xk.com/api/sentence?msg=v18&type=json",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>';
}
//随机夸夸结束

2、后台自定义底部HTML代码：

<script src="//at.alicdn.com/t/c/font_4273847_4nf72j3ukyx.js"></script>

3、将下方代码放到主题根目录下的template/comments.php第88行中：

<?php kuakua()?>

以下为论坛评论区：

论坛评论区：路径：zibll/inc/functions/bbs/inc/comment.php里77行处添加以下代码：

$btns_r .= kuakua('return');