このサイトにも実装されているんですが、Hugoにlunaを使った検索機能を実装する方法を紹介します。

基本的には公式で紹介されているgistを参考に実装します。（コメント下の方にvanilla js版を作ってくれた方がいました！感謝！）

こちらのサイトも参考にさせて頂きました。

1. lunrのセットアップ

npm install lunr lunr-languagesを実行してパッケージをインストールし、config.ymlに下記を追加します

1. とりあえずhugo server -Dって使ってるけどこれって何？

draft: trueのコンテンツファイルも含めて出力。

詳しくはhugo server --helpでチェック

2. taxonomyとtermの違い

• taxonomyは「タグ」や「カテゴリー」といった分類自体
• termはそのタグやカテゴリーに属する「go」とか「tips」のことです

こちらのサイトが非常に分かりやすいです！
https://maku77.github.io/hugo/taxonomy/basic.html

3. content配下の固定ページに共通のlayoutを使いたい

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」というショートコードを作成しました。

使い方

• 自サイト内の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

マークダウンで記事作成時の表示サンプルです

Block Elements

Headers 見出し

先頭に#をレベルの数だけ記述します。

# 見出し1
## 見出し2
### 見出し3
#### 見出し4
##### 見出し5
###### 見出し6

見出し1

見出し2

見出し3

見出し4

見出し5

見出し6

Block 段落

空白行を挟むことで段落となります。

段落1
(空行)
段落2

段落1

段落2

Br 改行

改行の前に半角スペース を2つ記述します。

hoge
fuga(スペース2つ)
piyo

hoge fuga
piyo

Blockquotes 引用

先頭に>を記述します。ネストは>を多重に記述します。

> 引用  
> 引用
>> 多重引用

引用
引用

多重引用

Code コード

`バッククオート` 3つ、あるいはダッシュ~３つで囲みます。

小さいサムネイルの場合の記事です

120x120です

タグとカテゴリーが設定されていない場合の記事です