これはなに
Hugoを使ってブログを運営している際に、見出しにアンカーリンクを設置したい場合がある。本記事では、HugoでMarkdownから生成される記事の見出しの横に、自動でアンカーリンクを設置する方法について解説する。
アンカーリンクの基本とその機能
アンカーリンクとは、Webページ内の別の箇所へジャンプするためのリンクである。通常、リンクのURLには「#」と続けて、リンク先の要素のIDを指定する。たとえば、<a href="#section2">Section 2に移動</a>というリンクは、ページ内の「section2」というIDを持つ要素へジャンプするリンクとなる。
Hugoでの見出しにアンカーリンクを追加する具体的な手順
Hugoで見出しにアンカーリンクを設置するには、.Content内のhタグに、href="#見出しの文章"を持つリンクを追加すればよい。こちらのサイト
を参考に、アンカーリンクを自動で付ける設定をする。
まず、記事の内容.Contentを表示するlayoutファイルを開く。筆者はStack
というテーマを使っているが、このテーマの場合はthemes/hugo-theme-stack/layouts/partials/article/components/content.htmlが.Contentを表示するファイルだった。そのため、そのファイルをlayouts/partials/article/components/content.htmlにコピーし、コピーしたものを開く。この時点では、内容は次のとおりだった。
<section class="article-content">
<!-- Refer to https://discourse.gohugo.io/t/responsive-tables-in-markdown/10639/5 -->
{{ $wrappedTable := printf "<div class=\"table-wrapper\">${1}</div>" }}
{{ .Content | replaceRE "(<table>(?:.|\n)+?</table>)" $wrappedTable | safeHTML }}
</section>このうちの.Contentに対して、.Content内のhタグをアンカーリンク付きのhタグに置換する処理を追加する。
置換処理は下記で記述される。この記述では、${1}にはhタグ、${2}には見出しについているID、${3}はhタグより後の内容が自動で入る。
{{ .Content | replaceRE "(<h[2-9] id=\"([^\"]+)\".+)(</h[2-9]+>)" "${1} <a class=\"headline-hash\" href=\"#${2}\">#</a> ${3}" | safeHTML }}以上により、content.htmlの内容は以下のように変更される。
<section class="article-content">
<!-- Refer to https://discourse.gohugo.io/t/responsive-tables-in-markdown/10639/5 -->
{{ $wrappedTable := printf "<div class=\"table-wrapper\">${1}</div>" }}
{{ .Content | replaceRE "(<table>(?:.|\n)+?</table>)" $wrappedTable
| replaceRE "(<h[1-9] id=\"([^\"]+)\".+)(</h[1-9]+>)"
"<a aria-hidden=\"true\" href=\"#${2}\">${1}<img src=\"/icons/link.svg\" style=\"width: 0.9em; margin-left: 0.25em; margin-bottom: -0.12em;\" /></a> ${3}"
| safeHTML }}
</section>ここで、imgタグは、アンカーリンクのためのアイコン/icons/link.svgをアンカーリンクとして機能させるための記述である。imgタグを#などの文字列にすれば、その文字#にアンカーリンクが設定される。