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

Question

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

javascriptreactjsmarkdowndocusaurus

6

我正在使用Docusaurus，并希望在新标签页中打开外部链接。我更喜欢使用代码来解决这个问题，而不是按照这个答案在我的markdown文档中编写html代码的解决方案。

我尝试了这个答案:

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

以及这个答案:

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

我认为这篇文章可能会满足我的需求，我尝试将代码添加到_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)

有任何想法都可以，非常感谢。

- RedBeard

相关问题：https://github.com/facebook/docusaurus/issues/3309 - Sebastien Lorber

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Yangshun Tay · Accepted Answer

注意：此答案适用于Docusaurus v1

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插件进行自定义。Remarkable是将Markdown转换为HTML的Markdown引擎。

这个remarkable-extlink插件似乎是您需要的。尝试将其添加到您的siteConfig中！有关siteConfig文档，请参见此处。

// 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 选项来使所有链接都成为外部链接，而Docusaurus在 siteConfig 中提供了该选项（但未记录）并且目前不起作用。我已经提交了一个PR来解决这个问题，所以请在下一个版本中关注它。但是，我不建议使用此方法，因为它会将所有您的链接都打开在新标签页中，而不仅仅是外部链接。

3. 在你的Markdown中使用HTML

就我个人而言，我会选择这个选项，因为它是最快的。同时这样做没有任何问题/不好的地方，并且我可以回退到HTML。

4. 编写自己的Remarkable插件

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