3

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

我更愿意为此使用代码，而不是按照这个答案在我的降价文档中编写 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)

任何想法都会很棒-谢谢

4

1 回答 1

4

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 引擎。

这个非凡的 extlink 插件似乎正是您所需要的。尝试将其添加到您的站点配置中！请参阅此处的 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.编写自己的卓越插件

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

于 2019-05-01T17:49:08.137 回答