【Hugo】内部リンクを挿入する方法

内部リンクの入れ方も色々とありますが、個人的に一番しっくり来ているものを紹介します。

カスタマイズ性が高いので、ショートコードがおすすめです。

Hugoで画像を入れるにはショートコードを使う

Hugo自体にも相対リンクを貼る機能があるのですが、個人的にこちらのほうが使いやすいかなって。

前提として、Hugoはローカル環境、ビルド時でそれぞれURLが変わります。

ローカルとビルド環境それぞれで画像を表示させるには、ショートコードを作成するのが効率的です

ショートコードを作成する

ショートコードフォルダにショートコードのHTMLを作成します。

├─archetypes
├─content
├─data
├─layouts
│  └─shortcodes←このフォルダに作成
│     └─a.html
├─public

今回は「a.html」としました。

Hugoのショートコードは知ってのとおり、ファイル名を利用して呼び出します。

こうしておくと、VSCodeでHTMLタグと認識されて、色が着くので、非常に可読性が良くなるんです！

a.htmlの中身はこうです。

blog\layouts\shortcodes\a.html

<a
{{ with .Get "href" }}href="{{ . | absURL }}" {{ end }}
{{ with .Get "target" }}target="{{ . }}" {{ end }}
{{ with .Get "rel" }}rel="{{ . }}" {{ end }}
>
{{ .Inner }}
</a>

意味はショートコード上で“href”があったら「絶対参照のURLにして」href=“この中に”入れろってことです。

withで条件式を書くと判定文に使った変数を{{ . }}で描けるので、可読性が少し上がります。

なかったら、何も起こらないので安心ですよ。

内部リンクでも、本筋から外れるようなリンクは、別ウィンドウで開くものだと思っているので、

target属性も追加です。

relは内部リンクならいらない気もしますが、とりあえず追加。

{{ .Inner }}はショートコードで挟んだ中身を使用する変数です。

使い方は次の次を参照！

リンク先の構成

Hugoの記事の作成途中では以下のフォルダに入っています。

フォルダ構成

├─content
│  └─post ←投稿ページ入れる所
│    └─static-site-generator-writing.md ←記事。カテゴリやトップに分裂する

そして「hugo」や「hugo server」をしてサイト状態にするとこうなります

ビルド時

│──post
│    └─static-site-generator-writing ←URLがフォルダ階層となる
│       └─index.html

ここを意識してリンク先を指定します。

使用方法

使用方法はこんな感じですね。

{{<a href="/post/static-site-generator-writing" target="_blank">}}アンカーリンク{{</a>}}

「absURL」の変換で絶対パスにしています。

Hugoのローカル環境(テスト環境)とビルド(本番環境)に対応するにはこれが良いんじゃないかと。

「absURL」と書くことで、どちらにも対応できます

これで、それぞれのビルド後のパスに変換できます。

フォルダ階層が変わることが一番むずかしいです。

アレンジ例

ショートコードを色々といじることで、ブログカード風にすることもできます。

ブログカード風内部リンク

hrefで囲んだURLからページを読み込んで、設定してあるアイキャッチ画像へのパスやタイトル、サマリーを取得しています。

{{ $href := .Get "href"}}
{{ $target := .Get "target"  | default "_self" }}
<div class="box">
    <div class="media">
        {{ with .Site.GetPage $href }}
        <figure class="media-left">
            <amp-img class="image is-128x128" src="{{ .Params.cover }}" width="16" height="9" layout="responsive">
            </amp-img>
        </figure>
        <div class="media-content">
            <a class="content kadlu-color4" href="{{ $href }}" target="{{ $target }}">
                <p>
                    <span class="bold">{{ .Title }}</span>
                </p>
                <p>
                    {{ if .Params.Description }}
                    {{ .Params.Description }}
                    {{ end }}
                </p>
            </a>
        </div>
        {{ end }}
    </div>
</div>

簡単に解説

{{ with .Site.GetPage $href }}でhrefに指定されたURLからページを読み込み、

それぞれ{{ .Params.cover }}(画像)や{{ .Title }}(タイトル)を読み込んできます。

使用方法はこんなんですかね。

{{<a href="/post/static-site-generator-writing">}}