Next.js中用Copy Link to Highlight聚焦元素但取消高亮的方法

方法一：用原生锚点替代文本片段链接 #

Chrome的「复制链接到高亮」生成的URL带#:~:text=xxx参数，这就是触发浏览器自动高亮的核心原因。你可以换用目标段落的原生锚点来实现聚焦且无高亮：

• 打开目标WordPress页面，右键检查你要聚焦的段落，查看它是否带有id属性（很多WordPress主题会自动给段落、标题添加id，比如p id="post-content-5"这类格式）。
• 把链接的href改成https://你的WordPress地址/文章路径#目标段落id，例如https://blog.example.com/my-post#post-content-5。
• 在Next.js里使用原生<a>标签，加上target="_blank"和rel="noopener noreferrer"确保在新标签页打开：

  <a 
    href="https://blog.example.com/my-post#post-content-5"
    target="_blank"
    rel="noopener noreferrer"
  >
    打开指定段落
  </a>
  

  这种方式跳转后会自动聚焦到对应id的元素，且不会出现高亮效果。

方法二：无原生锚点时的替代技巧 #

如果目标段落没有id，可以试试这个小技巧：

• 用Chrome生成高亮链接后，把#:~:text=xxx部分改成#:~:text=,（仅保留参数结构，清空文本内容）。不过这个方法兼容性有限，部分浏览器可能失效或仍有轻微高亮，优先推荐方法一。

注意事项 #

Next.js中不要用内置的Link组件跳转外部链接，必须使用原生<a>标签，同时加上rel="noopener noreferrer"规避安全风险。

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