Question

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

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

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

[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)

任何想法都很棒-谢谢

Answer 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。卓越的插件

使用卓越的插件对此进行自定义。 Markdown引擎非常出色，可将Markdown转换为HTML。

这个remarkable-extlink plugin似乎正是您所需要的。尝试将其添加到siteConfig中！请参阅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。编写自己的卓越插件

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

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

1 个答案:

1。卓越的插件

2。出色的选择

3。在Markdown中使用HTML

4。编写自己的卓越插件