Saltの使い方

Hugo Theme Salt v3.0.0でもContent adaptersに対応しました。
使用方法と移行方法をまとめたので参考にして下さい

前提として

• 目次が使えません
• ページバンドル内の画像ファイル等が考慮されていません（記事本文を修正する必要あり）
• 本文内にHugoの記法がある場合ビルドエラーになります（{{ xxx }}の記述）
• ディレクトリ構造について
  • 下記の構成で記事を保存している
    • content/article/[category]/[article]/index.md
    • content/article/[category]/[article]/thumbnail.jpg
  • 記事ディレクトリパスと記事URLパスが同一（slugを使用している場合は未検証）

Content adaptersを使用した記事表示方法

大まかな流れとしては下記の通り

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

「Salt」はシンプルなブログを低コストで作成できる

を目標にしたHugo用テーマです。名前の通り、できるだけ素材そのものを引き出せるようなシンプルなデザイン・レイアウトにしました。

実際にSaltでできることについて紹介したいと思います

1. レスポンシブデザイン対応

PCとSP表示に対応しています。 デフォルトで横幅600pxをデフォルトにしていますが、任意のサイズに変更できます。

2. サイトカラーを自分の好きなように変更可能

ヘッダー・フッダー・コンテンツの背景色、記事カードの細かいスタイルも簡単に変更できます

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です