Skip to content

Instantly share code, notes, and snippets.

@nuovotaka
Last active December 10, 2015 15:22
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save nuovotaka/d7a32905f86b273d214e to your computer and use it in GitHub Desktop.
Save nuovotaka/d7a32905f86b273d214e to your computer and use it in GitHub Desktop.
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