Hugoでwebサイト構築(3) partialで部品をつくる

written: kengo
tag:

1. partialを用いた部品の作成

サイト構築(1)でも軽く触れましたが、partialでの部品作りを少し詳しく行います。

「layouts > partials」フォルダ内にあるHTMLファイルが部品として機能します。

1-1. partialの作成例(ヘッダとフッタ)

partialでよく使われる例は、サイトのヘッダとフッタの部品化です。 すべてのページで共通して用いられる上、それなりに記述量が多く、また複雑であることが多いので partial化しておくと便利です。以下に例を示します。

なお、config.tomlは前回の情報が準備されている前提での例となります。

layouts/partials/site_header.html

<!DOCTYPE html>
<html>
<head>
	
	{{ .Site.Title }} | {{ .Site.Params.site_name_jp }}
	
	
</head>
<body>
	

layouts/partials/site_footer.html

Copyright (c) {{ .Site.Title }} ({{ .Site.Params.site_name_jp }}) Allrights reserved.
<body> <html>

1-2. partialを使う

partialの埋め込みはlayoutsの中のリソースでのみ機能します。 index.htmlや_default内にあるレイアウト用HTMLの埋め込みたい位置に、次のように記述します。

{{ partial "部品ファイル名.html" . }}

partialコマンドで指定したHTMLを読み込みます。 最後にピリオドが付いていますが、partialで読み込んだデータをこの位置に展開するために必要です。

2で作成したsite_header.htmlとsite_footer.htmlを用いた例が以下です(サイト構築(1)で示したものと同様です)。

layouts/_default/single.html

{{ partial "site_header.html" . }}
{{ .Content }}
{{ partial "site_footer.html" . }}

partialは単純な埋め込み

partialは、記述された部分に指定されたファイルの中身を入れ込む単純な機能です。

単純な埋め込みであるため、partial内で用いられているパラメータ類には少し注意しておく必要があります。 基本的な使い方ではあまり問題になりませんが、 サイト構築が進み複雑なパラメータを用いるpartialを使うようになると、 パラメータ指定の整合性がとれなくなり、エラーを出すことがあります。 その場合、パラメータ指定に工夫が必要になってきます。

References