Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
Hugoのテーマ:twentyfourteenのshortcodeについて

Hugo(theme: twentyfourteen)でのshortcodeの使い方

twentyfourteenにはfigure及びfigcaptionをつけるためのshortcodeがあります。

{{% name parameters %}} 

[name] = shortcodes フォルダ以下のファイル名になります。

[parameters] = 下記のfigure のコードを参考にしてみてください。

一般的な使い方はHugo - Shortcodesこちらにも書かれている通りです。

<figure class="wp-caption alignnone">
  <img src="{{ .Get "src" }}" alt="{{ .Get "alt" }}">
  <figcaption class="wp-caption-text">{{ .Get "caption" }}</figcaption>
</figure>

[.Get] = Markdownファイル内から該当の値を取得します。

ファイルはlayouts > shortcodes > figure.htmlにあります。

このファイルの使い方は以下のようになります

{{% figure src="" alt="画像の代わりとなる代替テキストを" caption="こちらに説明を" %}}

[src] = "http" - 絶対パス, "/" - 相対パスが使えます。当然ですが。

このようにMarkdownファイル内に記述をすると先ほどのHTMLファイルに値を埋め込みHTMLファイルが生成されます。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment