ショートコード作成の解説

こんにちはnasustです。

今回は、Hugoでショートコード作成の解説をします。

ショートコードとは

Markdown文章中に {{< ショートコードテンプレート名 >}} と入力するとテンプレートをHTMLにレンダリングしてくれます。

WordPressと同じ機能ですね。

see also: Create Your Own Shortcodes | Hugo

ショートコードの作成

以下の簡単なショートコードのテンプレートを作成します。 以下の内容を/layouts/shortcodes/warning.htmlに作成します。

<div class="warning">
    <i class="material-icons">warning</i> Warning
    <div>
        {{ .Inner | markdownify }}
    </div>
</div>

以下のようにショートコードを指定すると

{{< warning >}}
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
{{< /warning >}}

{{< warning >}} 吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。

何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
{{< /warning >}}

このように上記のようにレンダリングしてくます。

テンプレートの内容は普通のHugoのテンプレートと同じです。 ただしショートコード特有の関数と変数があります。それを紹介します。

属性で指定可能な型

string、bool、int、floatが指定出来ます。

{{< shortcode “hoge” true false 32 3.14 >}}

ショートコードの関数と変数

ショートコードの関数と変数を解説します。

.Inner

これはショートコードのタグに囲まれた文章が格納されている変数です。

see also: Create Your Own Shortcodes | Hugo

markdownify

ショートコード特有では無いですが、併用することが多いと思いますので紹介します。この関数に渡された文字列をMarkdownとして扱いHTMLに変換します。

warningショートコードの例では以下の内容になります。

<p>吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。</p>

<p>何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。</p>

1行空けての改行がpタグで囲まれています。

※Markdown Render Hooksを有効にしたい場合は、.RenderStringを使用してください。

.Get “key”

{{< shortcode attr=“value” >}}

のように属性と値がある場合、.Get "属性名"で取得できます・

{{ $attr := .Get "attr" }}

$attrの中身は”value”という文字列になります。

.Get 0

{{< shortcode “value” >}}

のように値がある場合、.Get indexで取得できます。indexは位置の数値を指定します。

{{ $zero := .Get 0 }}

$zeroの中身は”value”という文字列になります。

プログラミングの配列の位置指定と同じように0から始まります。

$.Page.Params

ショートコードテンプレートの中でPage変数にアクセスしたい場合は、$.でアクセスできます。

{{ $title := $.Page.Title }}

$titleの中身はページのタイトルの文字列になります。

まとめ

ショートコードはHTMLのカスタムタグの様に定義できます。 ショートコードを用意することによって、文章やメディアをリッチに表現できます。

iOS、Android、Web、APIサーバーなどのフロントエンド・バックエンドを開発するソフトウェアエンジニアです。 UI/UXが好きです。かっこいいUIやWebデザインを眺めるのが趣味です。 このブログはソフトウェア開発関係の内容を記事にしています。
web service:
GitHubQiitaTwitterはてなブログ
handle name:
nasust
real name:
hideki mori
job:
ソフトウェアエンジニア
develop:
target: ios, android, web page, single page application, api server, system service, cli tool, linux embedded device

lang: c/c++, go, swift, objective-c, java, kotlin, typescript, dart, javascript, ruby, python, php

tool: vscode, xcode, android studio, photoshop, vim, docker