文章信息:


文章类型:

当前文章标签:

文章发布日期:

最后修改日期:

文章摘要:


如题,控制台有个报错,分析查看后,发现是Greenshift的TOC锚点报错,位置在: 插件目录 &#8211…

文章目录:


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

265 Views


如题,控制台有个报错,分析查看后,发现是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,已解决。

网站文章分类及页面


格言警句