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

【问题标题】：Jekyll: produce custom HTML for external links (target and CSS class)Jekyll：为外部链接生成自定义 HTML（目标和 CSS 类）
【发布时间】：2014-11-23 13:33:06
【问题描述】：

我了解 <a> 链接的 target 属性不能由 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 %}

这样的插件存在吗？有没有更好的方法来实现这一点？

【问题讨论】：

标签： css jekyll liquid kramdown

【解决方案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。

【讨论】：

【解决方案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>

【讨论】：

【解决方案3】：

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

Jekyll ExtLinks Plugin

如果您想保持某些链接不受影响，可以配置应用rel 时要跳过的主机列表。这样一来，您就不必再使用 Markdown 了。

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

【讨论】：

在 Jekyll 3.4.0 上测试，nokogiri 存在问题 - 通过在项目 Gemfile 中指定 gem 'nokogiri' 修复。除此之外，该插件运行良好。

【解决方案4】：

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

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

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

【讨论】：