为博客做了外联新建标签页跳转和/mailto/自动跳转邮件客户端

时间：2026-05-24   标签： blog, web,

---

早上起来为博客新增了两个功能

外联新建标签页跳转

这个在我的博客的实现有两种方法

直接硬编码

顶栏，底部footer，友链/link/等等

这些地方的外联一般加了就会很久不改，就直接硬编码使用新标签页打开

例如

<!-- 这里是底部 footer -->
<div
  class="footer border-top border-gray-light mt-5 pt-3 text-gray"
  style="display:flex; justify-content:space-around; align-items:center;"
>
  <div>
    <a href="https://mikufans.qzz.io" target="_blank" rel="noopener noreferrer"
      >VICP-T6JGPJNE</a
    >
  </div>
  <div>© 2025 - {{ "now" | date: "%Y" }} lm-xiao-fen</div>
  <div>
    文章内容遵循
    <a
      href="https://creativecommons.org/licenses/by-nc-sa/4.0/"
      target="_blank"
      rel="noopener noreferrer"
      >CC BY-NC-SA 4.0</a
    >
    协议，源码遵循
    <a
      href="https://opensource.org/licenses/MIT"
      target="_blank"
      rel="noopener noreferrer"
      >MIT</a
    >
    协议
  </div>
  <div>
    <a
      href="https://github.com/xfcnl/xfcnl.github.io"
      target="_blank"
      rel="noopener noreferrer"
      >源码</a
    >
    在GitHub开源
  </div>
  <div><a href="feed.xml">RSS</a>&emsp;<a href="sitemap.xml">网站地图</a></div>
</div>

就直接加上 target=”_blank” rel=”noopener noreferrer” 即可

但我写博客是用 markdown ，我总不可能写 markdown 时写个

<a href="url" target="_blank" rel="noopener noreferrer">text</a>

那也太麻烦了，于是

js 脚本自动添加

<script>
      document.addEventListener('DOMContentLoaded', function () {
        const toggle = document.getElementById('navToggle');
        const links = document.getElementById('navLinks');
        if (toggle && links) {
          toggle.addEventListener('click', function () {
            this.classList.toggle('active');
            links.classList.toggle('open');
          });
        }
      });
</script>

当检测到时外联就自动加上target=”_blank” rel=”noopener noreferrer”

/mailto/自动跳转邮件客户端

这个就是通过一个隐藏的