给Tooplate的Gymso模板导航栏加外部链接触发DOMException求助

问题根源 #

模板自带的导航JS逻辑默认把所有导航链接的href值当作页面内CSS选择器（比如#section-id）来执行querySelector，但外部链接的http://xxx格式不是合法的CSS选择器，因此抛出DOM异常。

具体修复步骤 #

1. 定位导航处理JS代码
   找到模板中的main.js（或类似名称的核心JS文件），搜索包含querySelector、scrollIntoView或导航链接点击事件的代码块，一般是处理平滑滚动的逻辑。

2. 修改JS逻辑，区分内外链接
   在点击事件中增加判断：如果是外部链接（以http:///https://开头，或包含://），直接放行默认跳转行为；仅对内部锚点执行原有平滑滚动逻辑。

示例修改后的代码：

// 假设导航链接的class是.nav-link，根据实际情况调整
document.querySelectorAll('.nav-link').forEach(link => {
  link.addEventListener('click', function(e) {
    const linkHref = this.getAttribute('href');
    
    // 判断是否为外部链接
    if (/^https?:\/\/|:\/\//.test(linkHref)) {
      // 外部链接，不阻止默认跳转
      return;
    }

    // 内部锚点处理逻辑
    e.preventDefault();
    const targetElement = document.querySelector(linkHref);
    if (targetElement) { // 增加存在性判断，避免额外报错
      targetElement.scrollIntoView({ behavior: 'smooth' });
    }
  });
});

3. 备选方案：给外部链接加专属class
   如果不想修改全局逻辑，可以给所有外部导航链接添加external-link类，然后在JS中跳过对这类链接的处理：

<!-- 外部链接示例 -->
<a href="http://test.com" class="nav-link external-link">外部链接</a>

对应的JS修改：

document.querySelectorAll('.nav-link:not(.external-link)').forEach(link => {
  // 原有内部锚点处理逻辑...
});

内容的提问来源于stack exchange，提问作者user22114598