Docusaurus - 如何在新标签页中打开外部链接？答案

【问题标题】：Docusaurus - how to open external links in new tab?Docusaurus - 如何在新标签页中打开外部链接？
【发布时间】：2019-09-20 00:02:28
【问题描述】：

我正在使用 Docusaurus，并希望在新标签页中打开外部链接。

我更愿意为此使用代码，而不是按照this answer 在我的 Markdown 文档中编写 html 代码的解决方案。

我试过this answer:

[link](url){:target="_blank"}

还有this answer:

[Google](https://google.com" target="_blank)

我认为this post 可能会做我想做的事，我尝试将代码添加到 _index.js，但 Docusaurus 停止构建。

(function() {
  var links = document.getElementsByTagName('a');
  for (var i = 0; i < links.length; i++) {
    if (/^(https?:)?\/\//.test(links[i].getAttribute('href'))) {
      links[i].target = '_blank';
    }
  }
})();

我将 JavaScript 代码上传到 GitHub 并添加到 siteConfig.js：

// Add custom scripts here that would be placed in <script> tags.
  scripts: [
    "https://buttons.github.io/buttons.js",
    "https://msdcanderson.github.io/docusaurus-open-link-new-tab.github.io/open-link-new-tab.js"
  ],

脚本似乎已加载，但未按预期工作。

我希望在新的浏览器选项卡中打开一个用 Markdown 编写的链接：

[the rmarkdown website](https://rmarkdown.rstudio.com)

任何想法都会很棒 - 谢谢

【问题讨论】：

相关问题：github.com/facebook/docusaurus/issues/3309

标签： javascript reactjs markdown docusaurus

【解决方案1】：

Docusaurus 维护者在这里！

你说得对，Docusaurus 不支持开箱即用。上面的脚本不起作用的可能原因是 Docusaurus 注入的 <script> 标签位于 <body> 上方，并且当脚本运行时，<body> 尚未加载并且没有 <a> 标签可操作在。尝试将您的代码包装在 document.addEventListener('DOMContentLoaded', ...) 中，如下所示：

document.addEventListener('DOMContentLoaded', function() {
  var links = document.getElementsByTagName('a');
  for (var i = 0; i < links.length; i++) {
    if (/^(https?:)?\/\//.test(links[i].getAttribute('href'))) {
      links[i].target = '_blank';
    }
  }
});

但是，我建议您不要使用该脚本，而是通过其他几种方式来实现效果：

1。出色的插件

使用 Remarkable 插件自定义它。 Remarkable 是将 Markdown 转换为 HTML 的 Markdown 引擎。

这个remarkable-extlink plugin 似乎是你需要的。尝试将其添加到您的站点配置中！参考 siteConfig 文档here。

// siteConfig.js
const extlink = require('remarkable-extlink');

const siteConfig = {
  ...
  markdownPlugins: [
    function(md) {
      extlink(md, {
        host: 'yourhost.com', // The hrefs that you DON'T want to be external
      });
    },
  ],
  ...
}

2。非凡的选择

Remarkable 支持通过自定义 linkTarget option 将所有链接设为外部，而 Docusaurus 在 siteConfig 中公开了该链接（但未记录），目前无法正常工作。我已经提交了PR 来解决这个问题，所以请在下一个版本中注意它。但是，我不推荐这种方法，因为它会使您的所有链接在新标签页中打开，而不仅仅是外部链接。

3。在 Markdown 中使用 HTML

我个人会使用这个选项，因为它是最快的。这样做也没有错/不好，我喜欢我可以回退到 HTML。

4。编写你自己的 Remarkable 插件

编写您自己的插件，该插件可以理解这种[link](url){:target="_blank"} 语法并生成您想要的HTML。如果您不想使用 HTML，这可能是最好的选择，但需要付出最大的努力。

【讨论】：

我使用了非凡的插件 - 效果很好，谢谢阳顺
很高兴听到这个消息:)
@YangshunTay 我试图通过require('remark-external-links') 在我的 docusaurus v2 remarkPlugins 块中使用 remark-external-links 项目，但它似乎没有解决。您是否有机会使用 v2 的参考来更新它？