Octopressで外部リンクを別ウィンドウで開く様にする

Octopressでの小技。 Markdown記法の[]()で書くリンクだと、通常はクラス指定や属性指定など出来ないので別ウィンドウで開くリンクにはなりませんが、いくつか方法があるのでそれらについて。

Htmlで直接書く
Markdown
JavaScript (jQuery)
プラグインで新たなタグを作る

Htmlで直接書く

Octopressの作者の人が、Issueに上がってきた時にバッサリと、直接書けば、と言った方法。

Open links in a new window

<a href="http://example.com" target="_blank">Link</a>

もちろん、単にHtmlでtarget属性を指定(_blank)してるだけなのでこのまま別ウィンドウに開きます。

Markdown

Markdownでも Kramdown ではMarkdown記法の後に{: attribute="value"} みたいな感じで属性を追加することが出来るので¹ 、これを使って

[Link](http://example.com){:target="_blank"}

と書くことで出力に上と同様target="_blank"を足すことが出来ます。

他にも ~~Maruku: http://maruku.rubyforge.org/proposal.html~~ とかでも同じ書き方です。

ただし、これらはPHP Markdown Extraを取り入れた拡張バージョンですが、 PHP Markdown Extra自身は違う文法(:が無しなのと、属性については取り敢えず言及がない ²) の様で、他のパーサーでは少し違った書き方が必要かもしれません。

RDiscountは多分出来ない、と思う。

JavaScript (jQuery)

上のOctopressのIssueでも載っていた方法。 JavaScriptでa要素にtarget属性を追加します。

Issueに載ってた簡単な方はこれ。

function addBlankTargetForLinks () {
  $('a[href^="http"]').each(function(){
  $(this).attr('target', '_blank');
  });
}
$(document).bind('DOMNodeInserted', function(event) {
  addBlankTargetForLinks();
});

DOMNodeInsertedを使ってやってますが、もうちょっとシンプルにこんな感じで十分です。

// Open outside links with other window
jQuery(function($){
  $("a[href^='http']").attr('target', '_blank');
});

これで、外部のサイトは新しいウィンドウで開かれて、自分のサイトを/blog/..の様にルート相対パスで書いておけば上の関数には無視されるので新たなウィンドウは出ません。

この場合は、自分のサイトをhttp://..からフルに書いてあげるとこれは新しいウィンドウを作ります。

これだけでほとんど十分ですが、自分でhtmlタグ等で直接targetを指定したい時がある場合は targetが指定されてない時だけ加える様に

jQuery(function ($) {
  $("a[href^='http'], a[href^='ftp']").click(function () {
    if ($(this).attr("target") === undefined) {
      $(this).attr("target", "_blank");
  });
});

こんな感じで。ついでにクリックした時に適用する様にして、更にftpサイトも追加してあります。

どんな場合でも自分のサイトは新しいウィンドウにしたくない場合は

jQuery(function ($) {
  $("a[href^='http']:not([href*='" + location.hostname + "', a[href^='ftp'])").click(function () {
    if ($(this).attr("target") === undefined) {
      $(this).attr("target", "_blank");
  });
});

こんな風にhttpから始まっても自分のホスト名と同じじゃない事を確認してからtarget属性を加えてやるようにしてあげればOK。

プラグインで新たなタグを作る

OctopressではimgもLiquidタグで書けるようにプラグインが用意されてますが、同じ様に、

こんなプラグインを作れば

{% link http://example.com This is an external link. %}

こんな感じで書くとこうなります。

<a href="http://example.com" target="_blank">This is an external link</a>

/の場合は_blankを加えないようにしてあります。

また、上のプラグインではURLの前に何かを書けばそのままa要素に渡す様になってるので、 class等も

{% link class="myclass" target="_self" http://example.com This is opend in the same window. %}

こんな感じで渡してあげると、

<a href="http://example.com" class="myclass" target="_self">This is opend in the same window.</a>

こんな感じの出力に。target属性を渡してあげれば渡した方を優先して使うようにしてあります。

Octopress専用の書物だと思えば、上みたいに余計なJavaScriptを加えなくて済むので最初から導入するのであれば便利かな、と。

ただ、途中から導入するには書き換えるのに適当なスクリプトでも書いてかいてあげないと面倒なのと、 Markdownビューではリンクにならないので、 Markdownで見ることがある場合にはあまりLiquidタグに頼りすぎると良くないかもしれません。まあ、どちらかというとそれはimgタグの方がより強く言えることなので、それなら別に良いじゃないか、ともなる気もしますが。