Hugo テーマ 5. Shortcode
2021-11-24 22:07:00 hugoサイト内リンクとサイト外リンクを判別して target="_blank"
を差し込むショートコードを題材に、Shortcode を解説します。
最終形
layouts/shortcodes/link.html
|
|
※レンダリング後に間延びしないように、{{- xxx -}}
のように前後にハイフンを記述しています。
変数
|
|
冒頭の $url
等は変数宣言です。
この後、リンクの判断をするために何度か同じ内容をもとにチェックをするため、変数としてくくりだしています。
Shortcode のパラメーター
Shortcode の利用側では…
{ { < link href="https://www.google.com" > } } ...
…といった形で Shortcode を記述しますが、その際のパラメーターは
.Get "href"
とすることで参照します。
※↑の例は、Shortcode と認識されないよう、カッコをスペースで離しています。実際にはくっつけて記述します。
渡されていないパラメーターを参照した場合、空文字列が返ってきます。
空文字列は { { if .Get "hogehoge" } }
といった条件では偽と判定されます。
Shortcode で括った内容の取得
↓の部分の解説
|
|
↓のように記述した場合…
{ { <link href="hoge" > } }
内容だよー
{ { </lnk> } }
… .Inner
でその内容を取得できます。
解説の部分では、内容が渡されなかった場合にリンクの URL をそのまま表示するようにしています。
これを判断することで、空要素タグのように記述できる Shortcode を作れるわけです。
{ { <link href="hoge" /> } }
Shortcode の残念なところ
テーマの利用者には関係ないことですが、 テーマを作成する中で、テンプレートの記述中に Shortcode を利用することはできません。 同等の処理をテンプレート言語で記述する必要があります。
- 📄 Goのパッケージ2024-04-20 22:46:28Go向けパッケージの一覧
- 📄 Vim LSP メモ2024-04-20 11:40:33忘れそうな内容をメモ
- 📄 GOEXPERIMENT + Build Constraints2024-02-13 22:32:04例えば GOEXPERIMENT=rangefunc の場合にビルドしたい/したくない場合の書き方
- 📄 reqdumper2024-01-02 10:53:41受け取った HTTP リクエストの内容を出力するだけの HTTP サーバー
- 📄 detour2024-01-02 10:29:11Windows のショートカット先を書き換える CLI アプリ
- 📄 Popcorn2023-10-21 22:00:18自分がよく使うコマンドを登録して呼び出すための Vim script
- 📄 deline2023-10-21 21:08:33Vim の statusline をカスタマイズしやすくするための Vim script. すぐに使
- 📄 k7jis2023-01-07 15:18:44Keychron K7 を JIS 配列のキーボードとして使っている場合に便利なキーマッピングを追加
- 📄 csv2xlsx2023-01-05 21:23:31CSVファイルをXLSXファイルに変換するツール
- 📄 slack-file2022-08-25 23:13:37Slackにアップされたファイルを操作するツール(主に削除)