【建站】Joe主题点赞和切换日夜间模式按钮动态效果不生效解决办法
标签搜索
侧边栏壁纸
博主昵称
WPBKJ

  • 累计撰写 33 篇文章
教程 技术 建站 JS

【建站】Joe主题点赞和切换日夜间模式按钮动态效果不生效解决办法

wpbkj
wpbkj
2022-12-26 / 776 阅读
温馨提示：
本文最后更新于2023年07月27日，已超过483天没有更新，若内容或图片失效，请发送邮件至admin@wpbkj.com。

这两天把旧版本的joe主题更新到了最新版的Joe 7.7.1，然后突然发现一个问题，文章页面中的点赞和页面右下角悬浮的日夜间模式切换开关什么也不显示，原因是JavaScript不生效，这里给出一种解决办法。

一、文章点赞按钮不显示解决

1、分析问题

(1)、找到控制文章点赞按钮的JS文件

Joe\assets\js\joe.post_page.js

相应代码：

    /* 激活文章点赞功能 */
    {
        let agreeArr = localStorage.getItem(encryption('agree')) ? JSON.parse(decrypt(localStorage.getItem(encryption('agree')))) : [];
        if (agreeArr.includes(cid)) $('.joe_detail__agree .icon-1').addClass('active');
        else $('.joe_detail__agree .icon-2').addClass('active');
        let _loading = false;
        $('.joe_detail__agree .icon').on('click', function () {
            if (_loading) return;
            _loading = true;
            agreeArr = localStorage.getItem(encryption('agree')) ? JSON.parse(decrypt(localStorage.getItem(encryption('agree')))) : [];
            let flag = agreeArr.includes(cid);
            $.ajax({
                url: Joe.BASE_API,
                type: 'POST',
                dataType: 'json',
                data: { routeType: 'handle_agree', cid, type: flag ? 'disagree' : 'agree' },
                success(res) {
                    if (res.code !== 1) return;
                    $('.joe_detail__agree .text').html(res.data.agree);
                    if (flag) {
                        const index = agreeArr.findIndex(_ => _ === cid);
                        agreeArr.splice(index, 1);
                        $('.joe_detail__agree .icon-1').removeClass('active');
                        $('.joe_detail__agree .icon-2').addClass('active');
                        $('.joe_detail__agree .icon').removeClass('active');
                    } else {
                        agreeArr.push(cid);
                        $('.joe_detail__agree .icon-2').removeClass('active');
                        $('.joe_detail__agree .icon-1').addClass('active');
                        $('.joe_detail__agree .icon').addClass('active');
                    }
                    const name = encryption('agree');
                    const val = encryption(JSON.stringify(agreeArr));
                    localStorage.setItem(name, val);
                },
                complete() {
                    _loading = false;
                }
            });
        });
    }

(2)、相应问题

可以看到他是使用“$('.joe_detail__agree .icon-1')”这类来获取对象进行修改，有时并不起作用，所以我们换为id获取对象来进行修改

2、解决方法

(1)、为元素加上id属性

图标元素所在文件：

Joe\public\handle.php

为icon、icon-1、icon-2分别加上"agreeIcon"、"noAgree"、"isAgree"的id属性
修改完成后如下：

<div class="joe_detail__agree">
  <div class="agree">
    <div id="agreeIcon" class="icon">
      <svg id="noAgree" class="icon-1" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="28" height="28">
        <path d="M736 128c-65.952 0-128.576 25.024-176.384 70.464-4.576 4.32-28.672 28.736-47.328 47.68L464.96 199.04C417.12 153.216 354.272 128 288 128 146.848 128 32 242.848 32 384c0 82.432 41.184 144.288 76.48 182.496l316.896 320.128C450.464 911.68 478.304 928 512 928s61.568-16.32 86.752-41.504l316.736-320 2.208-2.464C955.904 516.384 992 471.392 992 384c0-141.152-114.848-256-256-256z" fill="#fff" />
      </svg>
      <svg id="isAgree" class="icon-2" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="28" height="28">
        <path d="M512 928c-28.928 0-57.92-12.672-86.624-41.376L106.272 564C68.064 516.352 32 471.328 32 384c0-141.152 114.848-256 256-256 53.088 0 104 16.096 147.296 46.592 14.432 10.176 17.92 30.144 7.712 44.608-10.176 14.432-30.08 17.92-44.608 7.712C366.016 204.064 327.808 192 288 192c-105.888 0-192 86.112-192 192 0 61.408 20.288 90.112 59.168 138.688l315.584 318.816C486.72 857.472 499.616 863.808 512 864c12.704.192 24.928-6.176 41.376-22.624l316.672-319.904C896.064 493.28 928 445.696 928 384c0-105.888-86.112-192-192-192-48.064 0-94.08 17.856-129.536 50.272l-134.08 134.112c-12.512 12.512-32.736 12.512-45.248 0s-12.512-32.736 0-45.248L562.24 196c48.32-44.192 109.664-68 173.76-68 141.152 0 256 114.848 256 256 0 82.368-41.152 144.288-75.68 181.696l-317.568 320.8C569.952 915.328 540.96 928 512 928z" fill="#fff" />
      </svg>
    </div>
    <span class="text"><?php _getAgree($this) ?></span>
  </div>
</div>

(2)、修改JS文件

找到上述的JS文件，修改其中"激活文章点赞功能"模块如下：
使用id获取对象，并使用setAttribute修改svg的class值

注意：
修改完js文件后需要使用VSCode的minify 压缩成.min.js 文件并上传替换原文件
见JoeREADME.md

/* 激活文章点赞功能 */
    {
        var agreeIcon1 = document.getElementById("noAgree");
        var agreeIcon2 = document.getElementById("isAgree");
        var agreeIcon = document.getElementById("agreeIcon");
        let agreeArr = localStorage.getItem(encryption('agree')) ? JSON.parse(decrypt(localStorage.getItem(encryption('agree')))) : [];
        if (agreeArr.includes(cid)) {
            agreeIcon1.setAttribute("class","icon-1 active");
        }
        else{
            agreeIcon2.setAttribute("class","icon-2 active");
        }
        let _loading = false;
        $('.joe_detail__agree .icon').on('click', function () {
            if (_loading) return;
            _loading = true;
            agreeArr = localStorage.getItem(encryption('agree')) ? JSON.parse(decrypt(localStorage.getItem(encryption('agree')))) : [];
            let flag = agreeArr.includes(cid);
            $.ajax({
                url: Joe.BASE_API,
                type: 'POST',
                dataType: 'json',
                data: { routeType: 'handle_agree', cid, type: flag ? 'disagree' : 'agree' },
                success(res) {
                    if (res.code !== 1) return;
                    $('.joe_detail__agree .text').html(res.data.agree);
                    if (flag) {
                        const index = agreeArr.findIndex(_ => _ === cid);
                        agreeArr.splice(index, 1);
                        agreeIcon1.setAttribute("class","icon-1");
                        agreeIcon2.setAttribute("class","icon-2 active");
                        agreeIcon.classList.remove('active');
                    } else {
                        agreeArr.push(cid);
                        agreeIcon2.setAttribute("class","icon-2");
                        agreeIcon1.setAttribute("class","icon-1 active");
                        agreeIcon.className += " active";
                    }
                    const name = encryption('agree');
                    const val = encryption(JSON.stringify(agreeArr));
                    localStorage.setItem(name, val);
                },
                complete() {
                    _loading = false;
                }
            });
        });
    }

二、日夜间切换按钮不显示解决

1、分析问题

该问题与上述文章点赞按钮相同

(1)、找到控制日夜间切换按钮的JS文件

Joe\assets\js\joe.global.js

相应代码：

    /* 初始化昼夜模式 */
  {
    if (localStorage.getItem("data-night")) {
      $(".joe_action_item.mode .icon-1").addClass("active");
      $(".joe_action_item.mode .icon-2").removeClass("active");
    } else {
      $("html").removeAttr("data-night");
      $(".joe_action_item.mode .icon-1").removeClass("active");
      $(".joe_action_item.mode .icon-2").addClass("active");
    }
    $(".joe_action_item.mode").on("click", () => {
      if (localStorage.getItem("data-night")) {
        $(".joe_action_item.mode .icon-1").removeClass("active");
        $(".joe_action_item.mode .icon-2").addClass("active");
        $("html").removeAttr("data-night");
        localStorage.removeItem("data-night");
      } else {
        $(".joe_action_item.mode .icon-1").addClass("active");
        $(".joe_action_item.mode .icon-2").removeClass("active");
        $("html").attr("data-night", "night");
        localStorage.setItem("data-night", "night");
      }
    });
  }

(2)、相应问题

与文章点赞按钮问题相同

2、解决方法

(1)、为元素加上id属性

图标元素所在文件：

Joe\public\footer.php

为icon-1、icon-2分别加上"nightIcon"、"dayIcon"的id属性
修改完成后如下：

<svg id="nightIcon" class="icon-1" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="25" height="25">
      <path d="M587.264 104.96c33.28 57.856 52.224 124.928 52.224 196.608 0 218.112-176.128 394.752-393.728 394.752-29.696 0-58.368-3.584-86.528-9.728C223.744 832.512 369.152 934.4 538.624 934.4c229.376 0 414.72-186.368 414.72-416.256 1.024-212.992-159.744-389.12-366.08-413.184z" />
      <path d="M340.48 567.808l-23.552-70.144-70.144-23.552 70.144-23.552 23.552-70.144 23.552 70.144 70.144 23.552-70.144 23.552-23.552 70.144zM168.96 361.472l-30.208-91.136-91.648-30.208 91.136-30.208 30.72-91.648 30.208 91.136 91.136 30.208-91.136 30.208-30.208 91.648z" />
    </svg>
    <svg id="dayIcon" class="icon-2" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="25" height="25">
      <path d="M234.24 512a277.76 277.76 0 1 0 555.52 0 277.76 277.76 0 1 0-555.52 0zM512 187.733a42.667 42.667 0 0 1-42.667-42.666v-102.4a42.667 42.667 0 0 1 85.334 0v102.826A42.667 42.667 0 0 1 512 187.733zm-258.987 107.52a42.667 42.667 0 0 1-29.866-12.373l-72.96-73.387a42.667 42.667 0 0 1 59.306-59.306l73.387 72.96a42.667 42.667 0 0 1 0 59.733 42.667 42.667 0 0 1-29.867 12.373zm-107.52 259.414H42.667a42.667 42.667 0 0 1 0-85.334h102.826a42.667 42.667 0 0 1 0 85.334zm34.134 331.946a42.667 42.667 0 0 1-29.44-72.106l72.96-73.387a42.667 42.667 0 0 1 59.733 59.733l-73.387 73.387a42.667 42.667 0 0 1-29.866 12.373zM512 1024a42.667 42.667 0 0 1-42.667-42.667V878.507a42.667 42.667 0 0 1 85.334 0v102.826A42.667 42.667 0 0 1 512 1024zm332.373-137.387a42.667 42.667 0 0 1-29.866-12.373l-73.387-73.387a42.667 42.667 0 0 1 0-59.733 42.667 42.667 0 0 1 59.733 0l72.96 73.387a42.667 42.667 0 0 1-29.44 72.106zm136.96-331.946H878.507a42.667 42.667 0 1 1 0-85.334h102.826a42.667 42.667 0 0 1 0 85.334zM770.987 295.253a42.667 42.667 0 0 1-29.867-12.373 42.667 42.667 0 0 1 0-59.733l73.387-72.96a42.667 42.667 0 1 1 59.306 59.306l-72.96 73.387a42.667 42.667 0 0 1-29.866 12.373z" />
    </svg>

(2)、修改JS文件

找到上述的JS文件，修改其中"初始化昼夜模式"模块如下：
使用id获取对象，并使用setAttribute修改svg的class值

注意：
修改完js文件后需要使用VSCode的minify 压缩成.min.js 文件并上传替换原文件
见Joe\README.md

/* 初始化昼夜模式 */
  {
    var dayIcon = document.getElementById("dayIcon");
    var nightIcon = document.getElementById("nightIcon");
    if (localStorage.getItem("data-night")) {
      nightIcon.setAttribute("class","icon-1 active");
      dayIcon.setAttribute("class","icon-2");
    } else {
      $("html").removeAttr("data-night");
      nightIcon.setAttribute("class","icon-1");
      dayIcon.setAttribute("class","icon-2 active");
    }
    $(".joe_action_item.mode").on("click", () => {
      if (localStorage.getItem("data-night")) {
        nightIcon.setAttribute("class","icon-1");
        dayIcon.setAttribute("class","icon-2 active");
        $("html").removeAttr("data-night");
        localStorage.removeItem("data-night");
      } else {
        nightIcon.setAttribute("class","icon-1 active");
        dayIcon.setAttribute("class","icon-2");
        $("html").attr("data-night", "night");
        localStorage.setItem("data-night", "night");
      }
    });
  }

三、总结

至此问题全部解决，相关使用minify 压缩成.min.js后的js文件可从如下链接下载使用，除了js别忘了修改PHP中的id属性

https://www.wpbkj.com/usr/themes/Joe/assets/js/joe.post_page.min.js
https://www.wpbkj.com/usr/themes/Joe/assets/js/joe.global.min.js

9
JoeTypecho主题点赞按钮不生效日夜间切换按钮不生效
版权属于： wpbkj
本文链接： https://www.wpbkj.com/archives/Joe-Theme-Svg-JavaScript-Error.html
作品采用： 《 署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 》许可协议授权
知识共享许可协议
MySSL 安全签章
TrustAsia 安全签章