12

我了解CSS 无法指定链接的target属性。<a>我希望能够在基于 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

4 回答 4

11

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

受到这个答案的启发。

于 2014-11-23T17:19:18.940 回答
10

似乎写一个插件是直截了当的。这就是我想出的：

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>
于 2014-11-23T14:20:07.073 回答
3

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

Jekyll ExtLinks 插件

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

UPD：此插件现已发布到 RubyGems：jekyll-extlinks。用来gem install jekyll-extlinks安装它。也可以在 GitHub 上找到。

于 2016-01-11T21:07:48.887 回答
0

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

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

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

于 2018-08-02T11:49:26.140 回答