※※ version 0.60.0 で HugoのデフォルトMarkdownエンジンが変更されたので、この記事は過去のものとなりました。

静的サイトジェネレータ “Hugo”

Hugoは、動的でないシンプルなブログを生成するのに適したCMS。手元で書いて生成までしてサーバに公開するタイプ。github.io なんかと相性がよいらしい。
WordPress等サーバサイドCMSは便利だが、更新停止後にセキュリティ管理の責任と手間だけ残る。とにかく放っといてＯＫなものにしたかったためHugoを使っている。

とはいえエンジニア向け、フルスクラッチ可能、開発中、大体英語等々、時間泥棒要素満載。一度手を入れ始めると止め時がなくなる。今回はそんな中で一番時間をとられたリンク周りの挙動についてのメモ。

Hugo Static Site Generator v0.55.6
GOVERSION="go1.12.2"

MarkdownエンジンはデフォルトのBlackfriday。

やりたい事

内部リンクは同ウィンドウ内で、外部リンクは別窓で表示する。
（※htmlタグの直打ちはせず、MarkDownやshortcodeを使う。）

たったそれだけが遠かった。

方法（結論）

  • configファイルに下記を追加して、

    [blackfriday]
	hrefTargetBlank = true

  • 内部リンク、外部リンクはこのように書く。

    [表示テキスト](相対パス)	//内部リンク用
[表示テキスト](絶対パス)	//外部リンク用

  • 推奨 ：shortcodeの ref と relref は使わない。使うなら {{% rel %}} 形式で。

詳細

デフォルトでは、Markdownで書いたすべてのリンクは、同ウインドウ内で表示される。<a> タグに target="_blank" がつかない。
ドキュメント によると、configファイルに上記の hrefTargetBlank=true を記述をすれば、絶対パスには target="_blank" がつき、相対パスにはつかないとある。

これで全てならシンプルなのだが、不可の場合もある。

Hugoには shortcode と呼ばれる機能がある。
主に内部リンク用には ref と relref という 二つのビルトインshortcode があり、ソースファイル名など柔軟な指定でリンクアドレスを生成してくれるので、これまで内部リンクはこれを多用していた。

[表示テキスト]( {{< ref ファイル名など >}} )	//絶対パス生成
[表示テキスト]( {{< relref ファイル名など >}} )	//相対パス生成

このうち相対パスを生成する relref からの出力が、 target="_blank" に関してどうしても絶対パスと同じ振る舞いしかしてくれない。
フォーラム でも議論の対象になっていた。

と思ったらドキュメントに この記述 。v0.55から一応解決していた。

In Hugo 0.55 we changed how the % delimiter works. Shortcodes using the % as the outer-most delimiter will now be fully rendered when sent to the content renderer (e.g. Blackfriday for Markdown), meaning they can be part of the generated table of contents, footnotes, etc.

[表示テキスト]( {{% ref ファイル名など %}} )	//絶対パス生成
[表示テキスト]( {{% relref ファイル名など %}} )	//相対パス生成

こっちで書いたらうまくいった。要はblackfridayとかの仕様と挙動が違ってたら％の方を使ってねと。この開発中っぽさよ。

他にも ref/relref には、相対パスで指定するとビルド時に警告が出続けるなど調査コストの嵩む点がいくつか。なのでMarkdownで済む所はMarkdownで書くのがよさそう。ここのようなシンプルなブログでは特に。