Hugoブログテーマ「Salt」とは？

Hugoで用意されているショートコード使用時の表示サンプルです figure スイカの画像 gist ※このgistショートコードはHugoのバージョン0.143.0で非推奨となり、将来のリリースで削除予定なので Hugo Theme Salt内のショートコードに移行しました 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 View this post on Instagram X Owl bet you'll lose this staring contest 🦉 pic.twitter.com/eJh4f2zncC

このテーマ内でサイト内ブログカードを作れる「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です