为 Hugo 站点实现外部链接跳转访问

最近，我为博客增加了一个新功能：外部链接跳转页。现在，点击站外链接会先进入一个中转页，经用户确认点击 继续访问 后才前往目标网站。当然这功能并不少见，多数网站都有此功能。 为何需要跳转页？ 明确告知：清晰告知访客“您即将离开本站”，避免意外跳转。 提升安全：为访客提供一道心理屏障，降低链接被篡改的风险。 统一体验：统一站外跳转的设计规范，并同步了主站的深浅色模式。 日间模式 夜间模式 实现方法 该功能主要依赖 Hugo 的 Render Hook 与 JavaScript 协同工作： 服务端预处理 (Hugo)：网站构建时，Hugo 通过 Link Render Hook 为所有外部链接添加 target="_blank" 等属性，确保其在新标签页打开，完成基础优化。此时链接的 href 保持不变。 客户端动态改写 (JavaScript)：页面加载后，external-links.js 脚本开始运行。它会遍历所有 <a> 标签，识别出未被排除的外部链接，并将其 href 属性动态地重写，指向我们自定义的跳转页 (/pages/redirect?target=[原始链接])。脚本还能通过 MutationObserver 监听动态内容（如评论区），确保所有外部链接都被处理。 中转页等待用户确认：用户点击链接后会访问 redirect.html 页面。该页面的脚本会解析 URL 参数，并等待用户手动点击“继续访问”按钮后，才会将用户重定向至目标网站。 总之，通过服务端预处理、客户端动态修改方式，将链接重写的逻辑完全放在浏览器端，避免了在 Hugo 构建时对 Markdown 内容的修改，实现方式更为灵活。 如何使用？ 若想让特定链接“豁免”跳转，操作非常简单，有两种方式可选： 方法一：URL 标记法 (推荐) 在 Markdown 中，只需在链接 URL 的末尾加上 #no-redirect 即可。