Docusaurus - 如何在新标签页中打开外部链接？
Docusaurus - how to open external links in new tab?
我正在使用 Docusaurus 并想在新选项卡中打开外部 links。
我更愿意为此使用代码，而不是根据 this answer.
在我的降价文档中编写 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 编写的 link 可以在新的浏览器选项卡中打开：
[the rmarkdown website](https://rmarkdown.rstudio.com)
任何想法都会很棒 - 谢谢
这里是 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 插件对此进行自定义。值得注意的是将 Markdown 转换为 HTML.
的 Markdown 引擎
这个remarkable-extlink plugin seems to be what you need. Try adding it into your siteConfig! Refer to the siteConfig documentation 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 and Docusaurus exposes that in siteConfig (but isn't documented) and isn't working at the moment. I've submitted a PR 将所有链接设为外部链接来修复此问题，因此请在下一个版本中留意它。但是，我不推荐这种方法，因为它会使 All 您的链接在新选项卡中打开，而不仅仅是外部链接。
3。在你的 Markdown
中使用 HTML
就我个人而言，我只会使用此选项，因为它是最快的。这样做也没有什么 wrong/bad，我喜欢我可以退回到 HTML。
4。编写您自己的 Remarkable 插件
编写你自己的插件来理解这样的 [link](url){:target="_blank"} 语法并生成你想要的 HTML。如果您不想使用，这可能是最好的选择 HTML 但它需要最大的努力。
我正在使用 Docusaurus 并想在新选项卡中打开外部 links。
我更愿意为此使用代码，而不是根据 this answer.
在我的降价文档中编写 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 编写的 link 可以在新的浏览器选项卡中打开：
[the rmarkdown website](https://rmarkdown.rstudio.com)
任何想法都会很棒 - 谢谢
这里是 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 插件对此进行自定义。值得注意的是将 Markdown 转换为 HTML.
的 Markdown 引擎这个remarkable-extlink plugin seems to be what you need. Try adding it into your siteConfig! Refer to the siteConfig documentation 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 and Docusaurus exposes that in siteConfig (but isn't documented) and isn't working at the moment. I've submitted a PR 将所有链接设为外部链接来修复此问题，因此请在下一个版本中留意它。但是，我不推荐这种方法，因为它会使 All 您的链接在新选项卡中打开，而不仅仅是外部链接。
3。在你的 Markdown
中使用 HTML就我个人而言，我只会使用此选项，因为它是最快的。这样做也没有什么 wrong/bad，我喜欢我可以退回到 HTML。
4。编写您自己的 Remarkable 插件
编写你自己的插件来理解这样的 [link](url){:target="_blank"} 语法并生成你想要的 HTML。如果您不想使用，这可能是最好的选择 HTML 但它需要最大的努力。