ブログに埋め込んだGistのコードやYouTubeが表示されなくなっていたので対処法メモです。
このブログはHugoという静的ファイルジェネレータで作っているのですが、いつからかブログに埋め込んだコンテンツが表示されなくなっていました。
具体的に表示されなくなっていたのは以下のコンテンツです。
- Gistのコード
- YouTube動画
- Tweet
- CodePenのコード
- Steamのリンク
これまでは、記事の元になるマークダウンファイルに各コンテンツに用意されていた埋め込み用のコードをコピペしていました。 記事を書いていた時には表示されていたのですが、どうやらHugoのバージョンを上げたタイミングから表示されなくなってしまったようです。
少し調べたところ、HugoにはShortcodesという機能があり、マークダウンに書き込むことで簡単にコンテンツを埋め込むことが出来るようです。
YouTubeやTweetなど、よく埋め込まれるコンテンツについてはHugo標準で埋め込み用のショートコードが用意されています。
標準で用意されているショートコードについては、以下のように書き方を変更するだけで、記事内にコンテンツを埋め込めるようになります。
CodePenやSteamのリンクなど、標準でショートコードが用意されていないものについては、自分でショートコードを定義しておくことで、標準のショートコードと同じ用にコンテンツを埋め込めるになります。
ショートコードを定義する方法は、公式サイトのCreate Your Own Shortcodesに書いてあるので省略しますが、僕は以下2つを定義しています。
.
└── layouts
└── shortcodes
├── codepen.html
└── steam.html
元のコンテンツに用意されているiframeタグをベースにして、可変部分をパラメータとして受け取れるようにしています。
実際に使うときは、以下のようにマークダウンに書き込めばOKです。