Hugoのショートコードを作る

完成形

info, warning, danger, normalを用意。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15


{{% hint info %}}
Info box.
{{% /hint %}}

{{% hint warning %}}
Warning box.
{{% /hint %}}

{{% hint danger %}}
Danger box.
{{% /hint %}}

{{% hint normal %}}
Normal box.
{{% /hint %}}

Info box.P

Warning box.

Danger box.

Normal box.

作り方

全面的にNelis Oostens氏のコードをThe Unilicenseのもとで利用させていただいています。

`layouts/shortcodes/hint.html`

Hugoのショートコードではどのテーマを利用しているかに関わらず、layouts/shortcodesがショートコードの定義ファイルの置き場であり、ファイル名(この場合はhint)がショートコード名になります。

1
2
3
4


{{ $type := .Get 0 }}
{{ printf "<blockquote class=\"md-hint %s\">" $type | htmlUnescape | safeHTML }}
{{ .Inner | safeHTML }}
{{ printf "</blockquote>" | htmlUnescape | safeHTML }}

`theme/**/assets/scss/custom.scss`

scssにてcssを定義します。記述すべき場所はテーマによって違うと思います。私が使用しているStack themeではtheme/hugo-theme-stack/assets/scss/custom.scssです。

冒頭紹介した参考記事では、カラーコードをどこかの変数から取ってきているようですが、参照すべきその変数が記事内には書かれていなかったのでハードコードしました。 Windows PowerToysのカラーピッカーを使用してちまちまとカラーピック。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21


.md-hint {
    &.info {
        border-left-color: rgba(102, 187, 255, 1);
        background-color: rgba(102, 187, 255, 0.25);
    }

    &.warning {
        border-left-color: rgba(255, 221, 102, 1);
        background-color: rgba(255, 221, 102, 0.25);
    }

    &.danger {
        border-left-color: rgba(255, 102, 102, 1);
        background-color: rgba(255, 102, 102, 0.25);
    }

    &.normal {
        border-left-color: rgba(91, 93, 94, 1);
        background-color: rgba(91, 93, 94, 0.05);
    }
}

あとは使うだけ!

以下のようにして使います。

1
2
3


{{% hint info %}}
Info box.
{{% /hint %}}

HugoではGo言語がバックエンドなので、ショートコードの作り方はややGoっぽい特殊な書き方です。ただまあ･･･PHPよりは簡単なのかな。