Hugo でページ内リンク（アンカー）を張る

2020-04-05

ページ内リンクを張ることで、ワンクリックでページ内の任意の位置へジャンプできるようになります。

ヘッダ要素 (h2, h3, h4) へのジャンプ

自動的に割り振られる id 属性を使用する

Hugo はデフォルトで、ヘッダ要素（h2 などの見出し）に id 属性を付けてくれます。例えば、次のようなヘッダがあったとすると、

Link to me
----

生成される h2 要素には、次のように自動的に id 属性が設定されます（スペースは - に置き換えられます）。

<h2 id="link-to-me">Link to me</h2>

よって、このヘッダ要素には、次のような内部リンクを張ることができます。

[Link to me へジャンプ](#link-to-me)

もちろん、他のページのヘッダ要素へのリンクを張ることもできます。

[Link to me へジャンプ](/posts/pagename/#link-to-me)

ヘッダ要素に独自の id 属性を設定する

ヘッダ要素に自動的に割り振られる id 属性を使用することの欠点は、アルファベットや数字以外の文字が削除されてしまうことです。また、見出しを変更すると id 属性の値も変わってしまうので、リンク切れのリスクも高まります。

例えば、次のような見出しがあったとすると、

OGP とは
----

出力される HTML は次のようになります。

<h2 id="ogp-">OGP とは</h2>

日本語の「とは」の部分が無視され、分かりにくい ID になってしまっています。このような不完全な ID が割り当てられるのが嫌な場合は、次のようにして独自の ID を設定することができます。

OGP とは {#what-is-ogp}
----

出力される HTML は次のようになります。

<h2 id="what-is-ogp">OGP とは</h2>

これで、次のように自信を持って内部リンクを張ることができます。

詳細は [OGP の説明](#what-is-ogp) を参照してください。

任意の位置にアンカーを設定するショートコード

通常は、前述のようなヘッダ要素への内部リンクを使うだけで十分ですが、任意の位置に内部リンクを張りたいことがあるかもしれません。次の anchor ショートコードは、id 属性を持つ、空っぽのアンカータグを出力します（ちなみに、id 属性の代わりに name 属性を設定しても同様の振る舞いをしますが、HTML5 では id 属性の方を使用すべきとされています）。

layouts/shortcodes/anchor.html

<a id="{{ .Get 0 }}"></a>

Markdown ファイルの中で、アンカーを設定したい位置（ジャンプ先）で次のようにショートコードを呼び出します。

content/posts/sample.md

{{< anchor "what-is-ogp" >}}
ここに OGP の説明を記述。
ここにジャンプしてきたい。

ここにジャンプするためのリンクを張るには次のように記述します。

詳細は [OGP の説明](#what-is-ogp) を参照してください。

2020-04-05