背景
flutterについて勉強していることをまとめている時、codesandboxのようなもの(dartPad)を埋め込みたくなった。
こんな感じのやつ。
やってみる
Hugo公式ドキュメントにそれらしいのがあった。（Shortcodes）
shortCodeを使えば良いらしい。vimeoのshortCodeを試してみる。
themes/zzo/layouts/shortcodes配下にvimeo.htmlを作成する。
1
2
3
| <div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;">
<iframe src="https://player.vimeo.com/video/146022717" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border:0;" title="vimeo video" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
|
記事内でvimeoという名前で利用できるはずなので使ってみる
1
| {{< vimeo id="146022717" class="my-vimeo-wrapper-class" title="My vimeo video" >}}
|
動画表示できた！
dartPadのiframeの表示方法を確認し、dartpad.htmlとしてshortcodeを作成する。最終的に作成したのがこれ。
.Getでshortcodeで指定したものを変数に設定することができる。
1
2
3
4
5
6
| {{- $dpid := .Get "id" -}}
{{- $url := "https://dartpad.dev/embed-flutter.html" -}}
<iframe style="width:100%;height:400px;" src="{{ $url }}?id={{ $dpid }}&theme=dark" ></iframe>
# 記事内で呼び出したい時
{{< dartpad id=0f1ec306c6e5e80a61220191d2536010 >}}
|
shortCodeをエスケープするのに苦戦した。。
コード dartpad を/* */でエスケープしたらうまくいった。
