Question

我了解CSS无法指定target链接的<a>属性。我希望能够使用以下输出在基于Jekyll的markdown文档中生成外部链接：

<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 %}

这样的插件是否存在？有没有更好的方法来实现这一目标？

Answer 1

当您需要在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';
    }
  }
})();

受this answer的启发。

Answer 2

看起来编写插件很简单。这就是我想出的：

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>

Answer 3

有一个小的Jekyll插件可以自动将target="_blank"，rel="nofollow"，类名和您选择的任何其他属性应用于外部链接：

Jekyll ExtLinks Plugin

如果要保持一些链接不变，可以配置应用rel时要跳过的主机列表。通过这种方式，您不再需要使用Markdown。

UPD：此插件现已发布到RubyGems：jekyll-extlinks。使用gem install jekyll-extlinks进行安装。还available on GitHub。

Answer 4

我的插件可以自动强制所有外部链接在新的浏览器中打开。

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

从v1.1.0开始，您还可以添加可选的额外CSS类名称。

Jekyll：为外部链接（目标和CSS类）生成自定义HTML

4 个答案: