javascript - Docusaurus - cum să deschizi linkurile externe într-un tab nou?

Folosesc Docusaurus și aș dori să deschid linkurile externe în file noi.

Aș prefera să folosesc cod pentru asta mai degrabă decât soluția de a scrie cod HTML în documentul meu markdown conform acestui răspuns.

Am încercat acest răspuns:

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

La fel și acest răspuns:

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

Cred că această postare ar face probabil ceea ce vreau, am încercat să adaug codul în _index.js, dar Docusaurus a încetat să mai construiască.

(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';
    }
  }
})();

Am încărcat codul JavaScript pe GitHub și l-am adăugat în 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"
  ],

Se pare că scriptul se încarcă, dar nu funcționează așa cum era de așteptat.

Mă aștept ca un link scris în Markdown să se deschidă într-o filă nouă a browserului:

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

Orice idee ar fi grozavă - mulțumesc

Răspuns #1

NOTĂ: Acest răspuns este pentru Docusaurus v1

Întreținătorul Docusaurus aici!

Ai dreptate că Docusaurus nu suportă acest lucru direct. Probabil că motivul pentru care scriptul tău de mai sus nu funcționează este pentru că Docusaurus inserează etichetele <script> deasupra <body> și atunci când rulează scriptul, <body> nu s-a încărcat și nu există etichete <a> pe care să le folosească. Încearcă să încadrezi codul tău în document.addEventListener('DOMContentLoaded', ...) astfel:

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';
    }
  }
});

Totuși, recomand să nu folosiți acel script și, în schimb, să obțineți efectul în câteva alte moduri:

1. Pluginuri remarcabile

Personalizează acest lucru folosind pluginurile Remarkable. Remarkable este motorul Markdown care convertește Markdown în HTML.

Acest plugin remarcabil-extlink pare să fie ceea ce ai nevoie. Încearcă să-l adaugi în siteConfig-ul tău! Consultă documentația siteConfig aici.

// 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. Opțiuni Remarcabile

Remarkable acceptă setarea tuturor linkurilor ca externe prin personalizarea opțiunii linkTarget, iar Docusaurus expune aceasta în siteConfig (dar nu este documentat) și momentan nu funcționează. Am trimis un PR pentru a remedia acest lucru, așa că fiți atenți la următoarea versiune. Totuși, nu aș recomanda această abordare deoarece face ca Toate linkurile voastre să se deschidă într-un tab nou, nu doar cele externe.

3. Folosește HTML în Markdown-ul tău

Personal, aș folosi doar această opțiune deoarece este cea mai rapidă. De asemenea, nu este nimic greșit/rele în a face asta și îmi place că pot reveni la HTML.

4. Scrie propriul tău Plugin Remarcabil

Scrieți propriul plugin care să înțeleagă o astfel de sintaxă [link](url){:target="_blank"} și să genereze HTML-ul dorit. Aceasta ar putea fi cea mai bună opțiune dacă nu doriți să folosiți HTML, dar necesită cel mai mult efort.