ページ内のリンクがサイト内へのものなのか、サイト外部へのものなのかが 判別しにくいと見ていただいている方に誤った印象を与えかねません。 そこでサイト外部へのリンクにアイコンを付けたいと思います。

  • No title « サイト内へのリンク (内部リンク)
  • No titile « サイト外部へのリンク (外部リンク)

Jekyllはサイト内へのリンクをドキュメントルートからの相対URLとして生成しますので、 リンクが絶対URLの時Font Awesomeの fa-external-link アイコンを表示するようにします。

Icons | Jekyll theme for documentation などによれば、これはCSSだけでも実現できるようです。

/* this part adds an icon after external links, using FontAwesome*/
a[href^="http://"]:after, a[href^="https://"]:after {
    content: "\f08e";
    font-family: FontAwesome;
    font-weight: normal;
    font-style: normal;
    display: inline-block;
    text-decoration: none;
    padding-left: 3px;
}

今回は外部リンクにアイコンだけでなく属性も付与したいので、pluginの力を借ります。

jekyll-target-blank plugin

keithmifsud / jekyll-target-blank は絶対URLのリンクにtarget="_blank"やrel="noopener noreferrer"を自動的に付与してくれるpluginです (site.urlを含むURLには付与されません)

インストールはGemfile, _config.ymlを編集してbundleするだけです。

# Gemfile
group :jekyll_plugins do
  gem 'jekyll-target-blank'
end

# _config.yml
plugins:
  - jekyll-target-blank

target-blank:
  add_css_classes: ext-link  # ext-linkクラスを付ける
  noreferrer: false          # noreferrerを付けない

これですべての外部リンクにclass="ext-link" target="_blank" rel="noopener"が付与されます。

詳細: Jekyll Target Blank

テーマの修正

CSSを修正したいので、 Jekyllの翻訳ページ に従ってsassファイルを用意します。

スタイルシートを修正する場合はもう一つステップが必要で、 メインのsassファイル（Minimaテーマの場合は _sass/minima.scss）もサイトのソースの_sassディレクトリにコピーします。

用意したsassファイルに上記のCSSを書き足せばよいのですが、 jekyll-target-blankによって外部リンクにはclass="ext-link"が 付与されていますので、これを使用します。

/* _sass/minima.scss */
a.ext-link:after {
    ...
}