Jekyll: создание собственного HTML-кода для внешних ссылок (целевой класс и класс CSS)

Я понимаю что target атрибут <a> ссылка не может быть указана CSS. Я хотел бы иметь возможность создавать внешние ссылки в документе разметки на основе Jekyll со следующим выводом:

<a href="the-url" class="external" target="_blank">the text</a>

не прибегая к чему-то вроде этого:

[the text](the url){:target"_blank" class="external"}

Я не хочу жестко кодировать target в каждой ссылке, потому что я мог бы хотеть изменить это в некоторый момент, также это шумно. Так что в идеале я бы

[the text](the url){:class="external"}

... но тогда CSS не может добавить target="_blank",

Так что моя идея - это собственный плагин, который позволяет мне писать

{% ext-link the-url the text %}

Существует ли такой плагин? Есть ли лучшие способы добиться этого?

Источник

4 ответа

Решение

Кажется, написать плагин просто. Вот что я придумал:

module Jekyll
  class ExtLinkTag < Liquid::Tag
    @text = ''
    @link = ''

    def initialize(tag_name, markup, tokens)
      if markup =~ /(.+)(\s+(https?:\S+))/i
        @text = $1
        @link = $3
      end
      super
    end

    def render(context)
      output = super
      "<a class='external' target='_blank' href='"+@link+"'>"+@text+"</a>"
    end
  end
end

Liquid::Template.register_tag('extlink', Jekyll::ExtLinkTag)

Пример использования:

Exhibition at {% extlink Forum Stadtpark http://forum.mur.at %}.

HTML вывод:

<p>Exhibition at <a class="external" target="_blank" href="http://forum.mur.at">Forum Stadtpark</a>.</p>
Источник

Когда вам нужно сделать это на страницах Github, а затем не можете использовать плагины, вы можете сделать это с помощью JavaScript:

// any link that is not part of the current domain is modified

(function() {
  var links = document.links;
  for (var i = 0, linksLength = links.length; i < linksLength; i++) {
    // can also be
    //  links[i].hostname != 'subdomain.example.com'
    if (links[i].hostname != window.location.hostname) {
      links[i].target = '_blank';
      links[i].className += ' externalLink';
    }
  }
})();

Вдохновлен этим ответом.

Источник

Есть небольшой плагин Jekyll для применения target="_blank", rel="nofollow", имена классов и любые другие атрибуты по вашему выбору для внешних ссылок автоматически:

Jekyll ExtLinks Плагин

Список хостов, которые нужно пропустить при подаче заявки rel можно настроить, если вы хотите, чтобы некоторые ссылки оставались нетронутыми. Таким образом, вам не нужно больше манипулировать с Markdown.

UPD: этот плагин был выпущен для RubyGems: jekyll-extlinks. использование gem install jekyll-extlinks установить его. Также доступно на GitHub.

Источник

Мой плагин может автоматически принудительно открывать все внешние ссылки в новом браузере.

https://keith-mifsud.me/projects/jekyll-target-blank

Начиная с версии 1.1.0 вы также можете добавлять дополнительные имена классов CSS.

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