标签： Greenshift

修复Greenshift产生的slider链接缺少可识别名称报错，实现Pagespeed Insights 100分
链接缺少可识别的名称报错

偶然间，通过Pagespeed Insights测试网站时，发现存在一个报错

简单看了下这个报错时由于Greenshift slider区块部分没有为Slider设置链接标题导致，因此可能需要手动修复，如同之前中文TOC锚点识别不正确的BUG一样。感兴趣的可以看下上篇文章：

Greenshift 插件TOC目录组件中文锚点不识别跳转的解决办法 – 个人项目总结 | 网址导航, WordPress, 网站建设, 外贸, 教程, 云服务器,

如题，控制台有个报错，分析查看后，发现是Greenshift的TOC锚点报错，位置在：插件目录 – libs-TOC-index.js 主要报错原因是：如果 s.hash 包含中文或其他特殊字符，它在 URL 中会被编码，而未解码的值直接传入 querySelector 会引发语法错误。故此，将全部代码丢入GPT

修复思路

从后台该区块部分看了下：

这部分的确没有标题的设置项，因此只能手动修复了。然后查找对应的特征词去定位该部分的代码区域。

修复思路就是：为该链接添加一个title属性就好了。

如上，我们直接将插件的所有代码在visual studio code中打开，然后直接搜索特征词：gspd-sliderlink

可以看到，就是见到那的几行，这就好办了。仔细阅读代码后发现，就是修改这两行添加个title属性就好了。

直接丢入GPT，让GPT解释并给出修复后的代码：
```
(0, a.createElement)("a", { className: "gspb-sliderlink", href: b, target: f ? "_blank" : null, rel: `noopener${h ? " nofollow" : ""}${v ? " sponsored" : ""}`, title: "我构建的项目", "aria-label": "我构建的项目" })
```
替换原来的部分：

修复失败

检查前端是否已被正确修改添加：

发现并没有被修复，那么可能该部分有更复杂的逻辑，并且不是这种修复方式。

调整修复思路

那么，就采用更直接简单的方式，从前端使用js直接定位slider这链接，直接添加！

js代码：
```
document.addEventListener('DOMContentLoaded', function() {
    document.querySelectorAll('.gspb-sliderlink').forEach(link => {
        // 获取父元素中 .gspb_text 的文本内容，默认值为 'slider'
        const text = link.parentElement.querySelector('.gspb_text')?.textContent || 'slider';
        // 设置 title 属性
        link.setAttribute('title', text);
        // 设置 aria-label 属性
        link.setAttribute('aria-label', text);
    });
});
```
控制台打开看下：

OKAY, 已正确添加。

修复完成

再次使用Pagespeed Insights进行测试，okay，修复完成。：

总结，好吧，没啥事别动源代码，尤其前端可以解决的，尽量使用前端代码解决。
2025-01-22

Greenshift 插件TOC目录组件中文锚点不识别跳转的解决办法

如题，控制台有个报错，分析查看后，发现是Greenshift的TOC锚点报错，位置在：插件目录 – libs-TOC-index.js 主要报错原因是：

如果 s.hash 包含中文或其他特殊字符，它在 URL 中会被编码，而未解码的值直接传入 querySelector 会引发语法错误。

故此，将全部代码丢入GPT，让GPT给出修复后的代码，如下：

"use strict"; 
let gstoplist = document.getElementsByClassName("gs-scrollto"); 
for (let i = 0; i < gstoplist.length; i++) {
    gstoplist[i].addEventListener("click", function (e) { 
        e.preventDefault(); 
        let t = e.currentTarget, 
            s = t.href.split("#")[1]; // 获取 ID
        let decodedId = decodeURIComponent(s); // 将 URL 编码的 ID 解码
        let l = document.getElementById(decodedId); 
        
        if (l) { 
            let r = t.closest(".gs-toc").getAttribute("data-offset") || 50, 
                c = l.getBoundingClientRect().top + window.scrollY - r; 
            window.scroll({ top: c, behavior: "smooth" }); 
        }
    }, false); 
}
if (document.querySelector(".gs-toc-mobile") !== null) { 
    document.querySelector(".gs-toc-mobile").addEventListener("click", function (e) { 
        e.preventDefault(); 
        e.currentTarget.classList.toggle("open"); 
        document.querySelector(".gs-section-sticky-nav").classList.toggle("open"); 
    }); 
    
    let links = document.querySelectorAll(".gs-section-sticky-nav ul li a"), 
        targets = []; 
    
    links.forEach(link => { 
        let id = link.hash.substring(1); // 去掉开头的 '#'
        let decodedId = decodeURIComponent(id); // 解码
        targets.push(document.getElementById(decodedId)); // 使用解码后的 ID 查找元素
        link.addEventListener("click", function (event) { 
            event.preventDefault(); 
            links.forEach(link => { link.classList.remove("current"); }); 
            link.classList.add("current"); 
        }, false); 
    }); 
    
    let observer = new IntersectionObserver(entries => { 
        entries.forEach(entry => { 
            if (entry.isIntersecting) { 
                let id = entry.target.getAttribute("id"); 
                links.forEach(link => { link.classList.remove("current"); }); 
                
                let linkToAdd = document.querySelector('.gs-section-sticky-nav ul li a[href="#' + id + '"]'); 
                if (linkToAdd) {
                    linkToAdd.classList.add("current");
                }
            } 
        }); 
    }, { threshold: 1 }); 
    
    for (let el of targets) {
        if (el) { // 只观察存在的元素
            observer.observe(el); 
        }
    }
}

再次查看控制台，OK，已解决。

2025-01-13

标签： Greenshift

修复Greenshift产生的slider链接缺少可识别名称报错，实现Pagespeed Insights 100分

链接缺少可识别的名称报错

修复思路

修复失败

调整修复思路

修复完成

Greenshift 插件TOC目录组件中文锚点不识别跳转的解决办法