早上起来为博客新增了两个功能
这个在我的博客的实现有两种方法
顶栏,底部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 - 2026 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> <a href="sitemap.xml">网站地图</a></div>
</div>
就直接加上 target=”_blank” rel=”noopener noreferrer” 即可
但我写博客是用 markdown ,我总不可能写 markdown 时写个
<a href="url" target="_blank" rel="noopener noreferrer">text</a>
那也太麻烦了,于是
<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”
这个就是通过一个隐藏的 <iframe> 元素触发 mailto: 协议,从而在后台静默调起系统默认的邮件客户端
<script>
(function () {
var iframe = document.createElement("iframe");
iframe.style.display = "none";
iframe.src = "mailto:G114514g@yeah.net"; //在这里配置收件人邮件地址
document.body.appendChild(iframe);
setTimeout(function () {
iframe.parentNode && iframe.parentNode.removeChild(iframe);
}, 3000);
})();
</script>
这个还是蛮简单的,但有些浏览器可能会拦截,建议在页面上添加一个手动唤醒邮件客户端的按钮
可以在 /mailto/ 体验一下
注:Windows 默认邮件客户端可能时 edge ,如果失败的话可以在设置搜索 默认应用 检查一下是不是你常用的邮件客户端