如何修改Squeezebox Portfolio模板，让链接跳转外部页面并在新窗口打开

你遇到的问题大概率是模板自带的JavaScript事件还在阻止链接的默认跳转行为——毕竟原模板是用来触发模态框的，哪怕你移除了<a href="#0">，之前绑定的点击事件可能还在生效。下面是一步步的解决办法：

1. 清理阻止跳转的JS事件 #

原模板肯定有监听点击事件来触发模态框的代码，通常会包含e.preventDefault()来阻止默认链接行为。你需要找到这段代码并修改：

• 打开模板的JS文件（比如main.js或者类似名称），搜索包含.project-info、modal或者preventDefault的代码块。
• 修改事件处理逻辑，让它忽略.project-info内部的链接点击：

// 示例修改方式（根据实际代码调整）
document.addEventListener('click', function(e) {
  // 先判断点击的是不是.project-info里的链接
  const externalLink = e.target.closest('.project-info a');
  if (externalLink) {
    // 如果是外部链接，直接放行，不执行后续模态框逻辑
    return;
  }
  // 原来的模态框触发逻辑（如果已经移除展示项目模块，可以直接删掉这部分）
  // ...
  // e.preventDefault(); // 确保这行不会影响到外部链接
});

2. 正确添加外部链接 #

确保你在.project-info里的名称和描述上正确包裹了<a>标签，比如：

<div class="project-info">
  <h2 class="project-name"><a href="https://your-target-url.com">项目名称</a></h2>
  <p class="project-desc"><a href="https://another-target-url.com">项目描述文本</a></p>
</div>

3. 检查CSS的点击限制 #

有些模板会给父元素设置pointer-events: none来禁用点击，导致内部链接也无法响应。检查你的CSS，给.project-info里的链接强制开启点击：

.project-info a {
  pointer-events: auto;
  /* 可选：添加下划线让链接更明显 */
  text-decoration: underline;
}

4. 调试验证 #

用浏览器开发者工具（F12）的Event Listeners面板，查看.project-info或其父元素上的点击事件，确认没有残留的阻止跳转的绑定。如果有，可以直接在调试面板里临时移除测试，看链接是否正常跳转。

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