链接缺少可识别的名称报错
偶然间,通过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,修复完成。:

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