标签: TOC组件修复

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

    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,已解决。