LoginSignup
1

More than 5 years have passed since last update.

Hugoのshortcodesでnicovideoの埋め込みを簡単にする

Posted at

はじめに

ブログにも書いた記事の転載です。

Hugoにはshortcodesという仕組みで、カスタムタグみたいなことを実現できるみたいです。
そこで、ニコニコ動画の動画サムネイルやプレイヤーの埋め込みを行うshortcodesを書いてみました。

動画サムネイル

layouts/shortcodes/nicovideo.htmlとして、以下をおきます。

<iframe width="312" height="200" src="http://ext.nicovideo.jp/thumb/{{ .Get 0 }}" scrolling="no" style="border:solid 1px #CCC;" frameborder="0">
</iframe>

記事のMarkdownでは以下のように書きます。

{{<nicovideo sm9 >}}

動画プレイヤー

同じnicovideoにして、ifで分岐させようと思ったのですが、色々やってもうまくいかなかったので別の名前のshortcodesにしちゃいました。

{{ $sm := .Get 0 }}
{{ $url := printf "http://api.ce.nicovideo.jp/nicoapi/v1/video.info?v=%s&__format=json" $sm }}
{{ $dataJ := getJSON $url }}
{{ $title := $dataJ.nicovideo_video_response.video.title }}
<script type="text/javascript" src="http://ext.nicovideo.jp/thumb_watch/{{ $sm }}?w=490&amp;h=307"></script>
<noscript><a href="http://www.nicovideo.jp/watch/{{ $sm }}">{{ $title }}</a></noscript>

使い方はこう。

{{<nicovideoplayer sm9 >}}

変換結果

ブログの方を参照してください。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1