评论夸一夸功能

0449

评论夸一夸功能

原文：https://www.tianyubk.com/863.html

效果图

评论夸一夸功能-洛秋小站

1. 新建CSS文件

​项目根目录/resouces/插件/小工具/评论​ （可以新建上述目录）新建 kuakua.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: 0;
    right: 0;
    z-index: 6000;
    background: url(//www.luoqiu.site/resouces/插件/小工具/评论/img/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: #fff;
    width: 78px;
    height: 78px;
    margin: 0 auto
}

.kuakua-icon {
    width: 60px !important;
    height: 60px !important;
    fill: currentcolor;
    transition: transform .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: 0;
    box-shadow: none;
    padding: 65px 30px 20px
}

.kuakua-contentBox {
    width: 100%;
    min-height: 102px;
    padding: 15px 20px;
    margin-top: 20px;
    border-radius: 0;
    box-sizing: border-box;
    position: relative;
    background-color: #f4f4f4;
    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: #444;
    font-size: 18px
}

.kuakua-cancelBtn {
    background-color: #fff;
    color: #666;
    border: none;
    border-radius: 36px;
    transition: all .3s ease 0s;
    padding: 4px;
    width: 80px;
    display: inline-block;
    margin-top: 10px
}

.kuakua-confirmBtn {
    background: #ffe300;
    width: 118px;
    height: 36px;
    display: inline-block;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    background-color: #ffe300;
    color: #444;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
    transition: all .3s ease 0s;
    box-sizing: border-box;
    margin-top: 20px
}

2. 添加函数代码

​项目根目录/wp-content/themes/zibll​ 新建 func.php​ 文件

第一种：使用hitokoto API接口

  1. 修改代码内的CSS文件路径为刚才保存的文件路径。
<?php
//【夸夸功能】开始
function kuakua(){
    // 引入夸夸功能所需的CSS样式文件
    echo'<link rel="stylesheet" type="text/css" href="https://www.luoqiu.site/resouces/插件/小工具/评论/kuakua.css">
    
    <!-- 创建一个按钮，用于触发夸夸功能的显示和隐藏 -->
    <a class="but btn-input-expand input-image mr6" id="kuakua" href="javascript:;">
        <svg class="icon" aria-hidden="true"><use xlink:href="#icon-dianzan"></use></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"><use xlink:href="#icon-dianzan"></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>


    <!-- 绑定JavaScript交互逻辑，包括按钮点击事件处理 -->
    <script>
    $(function(){
        // 获取夸夸内容的函数
        function getKuakuaContent() {

        // 使用hitokoto API获取夸夸内容
            $.get("https://v1.hitokoto.cn/", function(data) {
                if(data) {
                    // 如果返回的是字符串，尝试解析JSON
                    let content = typeof data === "string" ? JSON.parse(data) : data;
                    // 提取hitokoto字段
                    let text = content.hitokoto || data;
                    $(".kuakua-comment").html(text);
                    $("#comment").val(text);
                } else {
                    console.log("获取数据失败");
                }
            }).fail(function(xhr, status, error) {
                console.log("请求失败：", error);
            });
        }

        // 当用户点击"换一换"按钮时
        $(".kuakua-cancelBtn").click(function() {
            getKuakuaContent();
        });
    
        // 当用户点击"夸夸TA"按钮时
        $(".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);
            getKuakuaContent();
    
            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").val("");
        });
    });
    </script>
  ';
}
//【夸夸功能】结束

第二种：使用 自建API 接口

  1. 修改代码内的CSS文件路径为刚才保存的文件路径。
  2. 在代码 getKuakuaContent 函数内修改接口地址，输出自建API内的 kuakua 文本，例如：
  3. https://www.luoqiu.site/yiyan/api.php
//【夸夸功能】开始
function kuakua(){
    // 引入夸夸功能所需的CSS样式文件
    echo'<link rel="stylesheet" type="text/css" href="CSS文件路径/kuakua.css">
    
    <!-- 创建一个按钮，用于触发夸夸功能的显示和隐藏 -->
    <a class="but btn-input-expand input-image mr6" id="kuakua" href="javascript:;">
        <svg class="icon" aria-hidden="true"><use xlink:href="#icon-dianzan"></use></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"><use xlink:href="#icon-dianzan"></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>


    <!-- 绑定JavaScript交互逻辑，包括按钮点击事件处理 -->
    <script>
    $(function(){
        // 获取夸夸内容的函数
        function getKuakuaContent() {
            // 使用encodeURI处理URL中的中文字符
            var apiUrl = encodeURI("https://www.luoqiu.site/yiyan/api.php");
            // 正确添加时间戳参数
            apiUrl = apiUrl + "?type=kuakua&format=text&t=" + new Date().getTime();
            
            $.ajax({
                url: apiUrl,
                type: "GET",
                timeout: 5000, // 设置5秒超时
                success: function(data) {
                    if(data && data.trim() !== "") {
                        $(".kuakua-comment").html(data);
                        $("#comment").val(data);
                    } else {
                        // API返回空数据，使用本地备选内容
                        var randomKuakua = localKuakua[Math.floor(Math.random() * localKuakua.length)];
                        $(".kuakua-comment").html(randomKuakua);
                        $("#comment").val(randomKuakua);
                        console.log("API返回空数据，使用本地备选内容");
                    }
                },
                error: function(xhr, status, error) {
                    // 请求失败，使用本地备选内容
                    var randomKuakua = localKuakua[Math.floor(Math.random() * localKuakua.length)];
                    $(".kuakua-comment").html(randomKuakua);
                    $("#comment").val(randomKuakua);
                    console.log("API请求失败：" + error + "，使用本地备选内容");
                }
            });
        }

        // 当用户点击"换一换"按钮时
        $(".kuakua-cancelBtn").click(function() {
            getKuakuaContent();
        });
    
        // 当用户点击"夸夸TA"按钮时
        $(".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);
            getKuakuaContent();
    
            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").val("");  // 使用val()而不是text()
        });
    });
    </script>
  ';
}
//【夸夸功能】结束

3. 调用函数代码

​项目根目录/wp-content/themes/zibll/template/comments.php​ 文件里第90行左右添加以下代码。

<!--【夸夸功能】开始 --> 
  <?php kuakua()?> 
<!--【夸夸功能】结束 -->

评论夸一夸功能-洛秋小站

4 . 引入阿里巴巴图标

在 子比主题后台 – 自定义代码 – 自定义底部HTML代码 里面添加下面代码。

<!-- 阿里云矢量图 开始 -->
<script src="//at.alicdn.com/t/c/font_4624750_q8nd8nce0e.js"></script>
<!-- 阿里云矢量图 结束 -->

教程到这里就结束了，完成后记得清空或者刷新各种缓存（浏览器/CDN/PHP等缓存）以便实时更新显示。

© 版权声明
本网站名称：洛秋资源小站
默认解压密码：luoqiu.site
①本站所有资源免费，收取的费用仅为抵扣人工测试和服务器日常维护带来的消耗成本，请须知。
②因源码、模板、插件等程序具有可复制性，一经出售概不退款。
③本站部分资源来源网络或者用户投稿，如有侵权请联系删除。
④本站资源仅用于个人学习和交流，如用于商业使用请选择正版程序。使用非正版程序须在24小时内卸载删除。
➣详细的版权声明请点击文章版权声明查看。
下载/阅读均默认代表您已详细阅读版权声明并同意承担可能造成的所有损失及后果！
THE END
子比美化
# 子比美化
喜欢就支持一下吧
点赞9 分享
luoqiu的头像-洛秋小站
网站设置动态标题-洛秋小站
网站设置动态标题
网站设置动态标题
5天前 60
网站添加侧边彩色滚动条-洛秋小站
网站添加侧边彩色滚动条
网站添加侧边彩色滚动条
5天前 56
首页文章列表悬停上浮-洛秋小站
首页文章列表悬停上浮
首页文章列表悬停上浮
3天前 53
图库图库图库-洛秋小站
图库图库图库
图库图库图库
5天前 49
阿里云矢量图-洛秋小站
阿里云矢量图
阿里云矢量图
5天前 40
从零开始编译安装Nginx：详细步骤与实战配置（附避坑指南）——基于CentOS 7的保姆级教程-洛秋小站
从零开始编译安装Nginx：详细步骤与实战配置（附避坑指南）——基于CentOS 7的保姆级教程
从零开始编译安装Nginx：详细步骤与实战配置（附避坑指南）——基于C...
4天前 29
相关推荐
网站设置动态标题-洛秋小站
网站设置动态标题
网站设置动态标题
5天前 60
网站添加侧边彩色滚动条-洛秋小站
网站添加侧边彩色滚动条
网站添加侧边彩色滚动条
5天前 56
首页文章列表悬停上浮-洛秋小站
首页文章列表悬停上浮
首页文章列表悬停上浮
3天前 53
评论夸一夸功能-洛秋小站
评论夸一夸功能
评论夸一夸功能
5天前 44
阿里云矢量图-洛秋小站
阿里云矢量图
阿里云矢量图
5天前 40
用户头像呼吸光环+鼠标悬停旋转放大-洛秋小站
用户头像呼吸光环+鼠标悬停旋转放大
用户头像呼吸光环+鼠标悬停旋转放大
4天前 27
评论 抢沙发

请登录后发表评论

    暂无评论内容

默认头像

标签

nginx (1) 图库 (1) 图标 (1) 头像 (1) 子比美化 (2) 美化 (1)