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

2021-09-11 / 2021-09-11

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

figure

gist

highlight

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

instagram

Instagramのdeveloperアカウントが必要です。自前で用意する必要あり

Owl bet you'll lose this staring contest 🦉 pic.twitter.com/eJh4f2zncC
— San Diego Zoo Wildlife Alliance (@sandiegozoo) October 26, 2021

vimeo

youtube

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

このテーマ内でサイト内ブログカードを作れる「self-blog-card」というショートコードを作成しました。使い方自サイト内のurlを指定します自記事のブログカードは表示できません。日本語だとconfig.ymlのsummaryLength: 200以上推奨です {{< self-blog-card "/article/salt/custom-figure" >}} 表示例画像のリサイズ・トリミング可能な自作ショートコードこのテーマ内で画像のリサイズ・トリミングができる「custom-figur

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

このテーマ内で画像のリサイズ・トリミングができる「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"