简单的标记插件以打开新选项卡中的外部链接
#javascript #网络开发人员 #astro #markdown

我使所有外部链接成为_blank。我需要这个，因为我在Markdown中写了我的每篇文章。

介绍

在我的personal blog上，我的帖子中的外部链接很少。我想通过在外部（不参考我的网站）链接上应用koude1来将人们留在我的网站上。这也是一个普遍的良好习惯。我在Markdown中写了我的内容，所以我决定编写一个koude2插件。实现很容易，只有几行代码。

插件

它摄入降价文件的tree，并通过链接查看。

检查它是否是外部站点：

  1. 如果链接是完整的URL（例如：https://example.com/已满，但/example不会是）
  2. 检查它是否不包含我的网站的启动URL（如果使用该插件，则编辑此网址）

如果找到了外部链接，则将target设置为_blank。因为该元素可能没有任何特殊属性，因此首先确保其具有data和data.hProperties。

import { visit } from 'unist-util-visit';

const site = "https://tomoviktor.com";

export function externalAnchorPlugin() {
  return function (tree, file) {
    visit(tree, 'link', (node) => {
      if (/^(https?):\/\/[^\s/$.?#].[^\s]*$/i.test(node.url) && !node.url.includes(site)) {
        node.data ??= {};
        node.data.hProperties ??= {};
        node.data.hProperties.target = '_blank';
      }
    });
  }
}

与Astro一起使用

正如我在一个other post中提到的那样，我将Astro web framework用于博客。 Astro毫不费力地导入Markdown插件。我要做的就是将功能添加到astro.config.mjs。

import { externalAnchorPlugin } from './remarkplugins/external-anchor-plugin.mjs';

export default defineConfig({
  markdown: {
    remarkPlugins: [externalAnchorPlugin],
  },
});