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

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

1 голос
/ 01 мая 2019

Я использую 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 Ответ

2 голосов
/ 01 мая 2019

Сопровождающий 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 , кажется, то, что вам нужно. Попробуйте добавить его на свой сайт! Обратитесь к документации сайта site здесь . 

// 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 , и Docusaurus раскрывает это в siteConfig (но не задокументировано) и не работает в данный момент. Я отправил PR , чтобы исправить это, так что следите за ним в следующем выпуске. Однако я бы не рекомендовал этот подход, поскольку он позволяет Все открывать ваши ссылки в новой вкладке, а не только во внешних.

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

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

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

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

...