hugo
Pocket

Hugoの公式テーマショーケースに自作テーマが掲載されて知見が溜まったので、ちょっとずつHugoの記事を書いていこうと思います。

https://themes.gohugo.io/hugo_theme_pickles/

GitHubはこちら。

https://github.com/mismith0227/hugo_theme_pickles

今回は簡単ですが、ほぼ間違いなく使うpartialについて。

partial

partialはWordPressでいえばテンプレート化して読み込むイメージです。Pugだとインクルードとか。ヘッダーやフッターなどはどのページでも共通だと思いますので、このpartialを使うのは基本です。

partialを作る

partialはlayoutsディレクトリの中にpartialディレクトリを作り、その中に作ります。

例えばヘッダーのpartialを作ってみます。

layouts/partial

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>

partialを読み込む

読み込みは簡単で以下のように書きます。

{{ partial "header.html" . }}

最後の「.(ドット)」を忘れずに!コードを展開するために必要です。

最後に

簡単にですがpartialの紹介でした。

https://themes.gohugo.io/hugo_theme_pickles/

GitHubはこちら。

https://github.com/mismith0227/hugo_theme_pickles

Pocket

カテゴリー: タグ: