Hugo テーマ 5. Shortcode

2021-11-24 22:07:00 hugo

サイト内リンクとサイト外リンクを判別して target="_blank" を差し込むショートコードを題材に、Shortcode を解説します。

最終形

layouts/shortcodes/link.html

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
{{- $url := (default (.Get "href") (.Get "url")) -}}
{{- $urlobj := $url | relURL | urls.Parse  -}}
{{- $baseurl := urls.Parse (($.Site.BaseURL) | absURL) -}}

<a href="{{ $url }}"
   {{- if .Get "class" }} class='{{ .Get "class" }}'{{ end -}}
   {{- if .Get "title" }} title='{{ .Get "title" }}'{{ end -}}
   {{- if not (or (eq $urlobj.Host $baseurl.Host) (eq $urlobj.Host "")) }} target='_blank' rel='noopener noreferer'{{ end -}}>
    {{- if eq .Inner "" }}{{ $url }}{{ else }}{{ .Inner }}{{ end -}}

    {{- if not (or (eq $urlobj.Host $baseurl.Host) (eq $urlobj.Host "")) -}}
    <span style="position:relative;">{{- "" -}}
        <span style="">&#x2610;</span>{{- "" -}}
        <span style="position:absolute; top:-0.3em; left:0.2em">&#x2197;</span>{{- "" -}}
    </span>
    {{- end -}}
</a>

※レンダリング後に間延びしないように、{{- xxx -}} のように前後にハイフンを記述しています。

変数

1
2
3
{{- $url := (default (.Get "href") (.Get "url")) -}}
{{- $urlobj := $url | relURL | urls.Parse  -}}
{{- $baseurl := urls.Parse (($.Site.BaseURL) | absURL) -}}

冒頭の $url 等は変数宣言です。この後、リンクの判断をするために何度か同じ内容をもとにチェックをするため、変数としてくくりだしています。

Shortcode のパラメーター

Shortcode の利用側では…

{ { < link href="https://www.google.com" > } } ...

…といった形で Shortcode を記述しますが、その際のパラメーターは .Get "href" とすることで参照します。

※↑の例は、Shortcode と認識されないよう、カッコをスペースで離しています。実際にはくっつけて記述します。

渡されていないパラメーターを参照した場合、空文字列が返ってきます。空文字列は { { if .Get "hogehoge" } } といった条件では偽と判定されます。

Shortcode で括った内容の取得

↓の部分の解説

1
{{- if eq .Inner "" }}{{ $url }}{{ else }}{{ .Inner }}{{ end -}}

↓のように記述した場合…

{ { <link href="hoge" > } }
内容だよー
{ { </lnk> } }

… .Inner でその内容を取得できます。

解説の部分では、内容が渡されなかった場合にリンクの URL をそのまま表示するようにしています。

これを判断することで、空要素タグのように記述できる Shortcode を作れるわけです。

{ { <link href="hoge" /> } }

Shortcode の残念なところ

テーマの利用者には関係ないことですが、テーマを作成する中で、テンプレートの記述中に Shortcode を利用することはできません。同等の処理をテンプレート言語で記述する必要があります。

« Hugo テーマ 4. ダークモード «

» Hugo テーマ 6. Render Hook »