Hugoブログテーマ「Salt」
  1. Home
  2. /
  3. サンプル
  4. /
  5. Hugo標準のショートコード表示サンプル
2021-09-11 / 2021-09-11

Hugo標準のショートコード表示サンプル

2021-09-11 / 2021-09-11
Hugo標準のショートコード表示サンプル

Hugoで用意されているショートコード使用時の表示サンプルです

figure

スイカの画像

gist

※このgistショートコードはHugoのバージョン0.143.0で非推奨となり、将来のリリースで削除予定なので Hugo Theme Salt内のショートコードに移行しました

Hugo標準のgistショートコードをテーマ内に移行しました

Hugo標準のgistショートコードをテーマ内に移行しました

Hugo公式のgistショートコードはバージョン0.143.0で非推奨となり、将来のリリースで削除されるそうなので Hugo Theme Salt内ののショートコードとして使えるように移行しました WARN The "gist" shortcode was deprecated in v0.143.0 and will be removed in a future release. See https://gohugo.io/shortcodes/gist for instructions to create a replacement. Hugo公式ページでは下記の通り Gist shortcode Embed a GitHub Gist in your content using the gist shortcode. The gist shortcode was deprecated in version 0.143.0 and will be removed in a future release. To continue embedding > GitHub Gists in your content, you’ll need to create a custom shortcode: Gist ショートコードはバージョン 0.143.0 で非推奨となり、今後のリリースで削除される予定です。コンテンツに GitHub Gist を埋め込むには、カスタムショートコードを作成する必要があります。

highlight

<section id="main">
  <div>
   <h1 id="title">{{ .Title }}</h1>
    {{ range .Pages }}
        {{ .Render "summary"}}
    {{ end }}
  </div>
</section>

instagram

X

vimeo

youtube

関連記事

サイト内ブログカードを作る自作ショートコード

サイト内ブログカードを作る自作ショートコード

このテーマ内でサイト内ブログカードを作れる「self-blog-card」というショートコードを作成しました。

使い方

  • 自サイト内のurlを指定します
  • 自記事のブログカードは表示できません。
  • 日本語だとconfig.ymlのsummaryLength: 200以上推奨です

{{< self-blog-card "/article/salt/custom-figure" >}}

表示例

画像のリサイズ・トリミング可能な自作ショートコード

画像のリサイズ・トリミング可能な自作ショートコード

このテーマ内で画像のリサイズ・トリミングができる「custom-figure」というショートコードを作成しました。 使い方 Hugo標準のfigureショートコードの機能をそのまま使えます HugoのImage Processingで使えるResize、Fit、Fillが使えます Image Processingについてはこちらをチェック Image processing Resize, crop, rotate, filter, and convert images. {{< custom-figure src="image.png" title="Resize スイカ" Resize="320x180" >}} {{< custom-figure src="image.png" title="Fit スイカ" Fit="320x180" >}} {{< custom-figure src="image.png" title="Fill スイカ" Fill="320x180" >}} {{< custom-figure src="image.png" title="Crop スイカ" Crop="320x180" >}} 表示例 元画像は512x512です
画像のリサイズ・トリミング可能な自作ショートコード

画像のリサイズ・トリミング可能な自作ショートコード

このテーマ内で画像のリサイズ・トリミングができる「custom-figure」というショートコードを作成しました。

使い方

  • Hugo標準のfigureショートコードの機能をそのまま使えます
  • HugoのImage Processingで使えるResize、Fit、Fillが使えます

Image Processingについてはこちらをチェック

Image processing

Resize, crop, rotate, filter, and convert images.


{{< custom-figure src="image.png" title="Resize スイカ" Resize="320x180" >}}

{{< custom-figure src="image.png" title="Fit スイカ" Fit="320x180" >}}

{{< custom-figure src="image.png" title="Fill スイカ" Fill="320x180" >}}

{{< custom-figure src="image.png" title="Crop スイカ" Crop="320x180" >}}

表示例

元画像は512x512です

マークダウン表示サンプル
画像のリサイズ・トリミング可能な自作ショートコード