Docusaurus - как открыть внешние ссылки в новой вкладке?

Я использую 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)

Любые идеи будут великолепны - спасибо

Источник

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. Замечательные плагины

Настройте это с помощью замечательных плагинов. Замечательным является механизм уценки, который преобразует уценку в HTML.

Этот замечательный плагин extlink, кажется, то, что вам нужно. Попробуйте добавить его на свой сайт! Обратитесь к документации по конфигурации сайта здесь.

// 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. Замечательные варианты

Замечательная поддержка делает все ссылки внешними, настраивая linkTarget вариант и докузавр разоблачает, что в siteConfig (но не задокументировано) и не работает в данный момент. Я представил PR, чтобы исправить это, так что следите за этим в следующем выпуске. Однако я бы не рекомендовал этот подход, поскольку он открывает все ваши ссылки в новой вкладке, а не только внешние.

3. Используйте HTML в вашей уценке

Лично я бы просто использовал эту опцию, поскольку она самая быстрая. Также в этом нет ничего плохого / плохого, и мне нравится, что я могу использовать HTML.

4. Напишите свой собственный замечательный плагин

Напишите свой собственный плагин, который понимает такой [link](url){:target="_blank"} синтаксис и генерирует HTML, который вы хотите. Это может быть лучшим вариантом, если вы не хотите использовать HTML, но это требует больше усилий.

Источник
Другие вопросы по тегам