Hugoのショートコードを作る
Published Oct 14, 2022
⋅
Updated Nov 3, 2025
⋅
1 minutes read
##完成形
info, warning, danger, normalを用意。
{{%/* hint info */%}}
Info box.
{{%/* /hint */%}}
{{%/* hint warning */%}}
Warning box.
{{%/* /hint */%}}
{{%/* hint danger */%}}
Danger box.
{{%/* /hint */%}}
{{%/* hint normal */%}}
Normal box.
{{%/* /hint */%}}出力例（実際のレンダリング結果は省略）
##作り方
全面的にNelis Oostens氏のコードをThe Unilicenseのもとで利用させていただいています。
###layouts/shortcodes/hint.html
Hugoのショートコードではどのテーマを利用しているかに関わらず、layouts/shortcodesがショートコードの定義ファイルの置き場であり、ファイル名(この場合はhint)がショートコード名になります。
{`{{ $type := .Get 0 }}`}
{`{{ printf "<blockquote className=\"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のカラーピッカーを使用してちまちまとカラーピック。
.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);
}
}##あとは使うだけ!
以下のようにして使います。
{{%/* hint info */%}}
Info box.
{{%/* /hint */%}}HugoではGo言語がバックエンドなので、ショートコードの作り方はややGoっぽい特殊な書き方です。 ただまあ･･･PHPよりは簡単なのかな。