ショートコード

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 を埋め込むには、カスタムショートコードを作成する必要があります。

Hugoでは外部サイトのデータを扱う場合、getJSONやgetCSVを使った方法しかありませんでしたが、ついにv0.91でGetRemoteが実装されました。

Release v0.91.0 · gohugoio/hugo

Hugo 0.91.0 is mostly on the boring and technical side. See the list of changes below, but especially note the fix that allows passing falsy arguments to partials with the return keyword (5758c37 #...

Hugo Pipes

Hugo Pipes is Hugo's asset processing set of functions.

GetRemoteの基本

基本の使い方はこんな感じで、html以外にも外部の画像、css、jsといったデータも取得できます。

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

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