「Salt」はシンプルなブログを低コストで作成できる
を目標にしたHugo用テーマです。名前の通り、できるだけ素材そのものを引き出せるようなシンプルなデザイン・レイアウトにしました。
実際にSaltでできることについて紹介したいと思います
PCとSP表示に対応しています。 デフォルトで横幅600pxをデフォルトにしていますが、任意のサイズに変更できます。
ヘッダー・フッダー・コンテンツの背景色、記事カードの細かいスタイルも簡単に変更できます
hugo server -Dって使ってるけどこれって何？draft: trueのコンテンツファイルも含めて出力。
詳しくはhugo server --helpでチェック
こちらのサイトが非常に分かりやすいです！
https://maku77.github.io/hugo/taxonomy/basic.html
content配下のKindが「page」になるので「layout/page/single.html」が使えます
Hugoで使われるlayoutですが実態はgo-templateという、いわゆるテンプレートエンジンです
https://pkg.go.dev/text/template
たまにHugoテンプレート内で{{ .Title }}や{{- .Title -}}で書いてるものを見かけます
この違いはハイフンを付けることで前後の空白を除去したい場合に使われます
ちなみに公式ドキュメントにあります
https://pkg.go.dev/text/template#hdr-Text_and_spaces
Hugoを使う際、空ではない文字列or配列or連想配列のチェックする時に、最初はこんな感じで空チェックをしていたんですが
Hugoのテンプレート内で{{ $title := .Title }}や{{ $title = .Title }}
のようにコロンをつけたり、付けなかったりする記述を見ます。
これはgo言語の書き方の特徴で、変数を定義する場合の省略記法です
title := "タイトル"
省略しない場合はこうなります
var title string = "タイトル"
go言語の変数スコープはif、for、switchなどのブロック内で有効です
if内などで新しく変数を定義するとifブロック内での変数になるので注意です。
title := "タイトル"
if true {
fmt.Println(title)
title := "タイトル2"
fmt.Println(title)
}
fmt.Println(title)
タイトル
タイトル2
タイトル
go言語では変数名を短く、スコープも小さく、変数の寿命を短くすること推奨されます
処理が長くなる場合は細かい単位でメソッドに切り出します。
このテーマ内でサイト内ブログカードを作れる「self-blog-card」というショートコードを作成しました。
summaryLength: 200以上推奨です
{{< self-blog-card "/article/salt/custom-figure" >}}
このテーマ内で画像のリサイズ・トリミングができる「custom-figure」というショートコードを作成しました。
Image Processingについてはこちらをチェック
{{< 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で用意されているショートコード使用時の表示サンプルです
※このgistショートコードはHugoのバージョン0.143.0で非推奨となり、将来のリリースで削除予定なので Hugo Theme Salt内のショートコードに移行しました
<section id="main">
<div>
<h1 id="title">{{ .Title }}</h1>
{{ range .Pages }}
{{ .Render "summary"}}
{{ end }}
</div>
</section>Owl bet you'll lose this staring contest 🦉 pic.twitter.com/eJh4f2zncC
マークダウンで記事作成時の表示サンプルです
先頭に#をレベルの数だけ記述します。
# 見出し1
## 見出し2
### 見出し3
#### 見出し4
##### 見出し5
###### 見出し6
空白行を挟むことで段落となります。
段落1
(空行)
段落2
段落1
段落2
改行の前に半角スペース を2つ記述します。
hoge
fuga(スペース2つ)
piyo
hoge
fuga
piyo
先頭に>を記述します。ネストは>を多重に記述します。
> 引用
> 引用
>> 多重引用
引用
引用多重引用
`バッククオート` 3つ、あるいはダッシュ~３つで囲みます。
