Hugo を使った個人サイトの作り方 5 ホームページの作成(2)とPartial Template

tech 1200字：読了まで約2分13秒

Hugo アイキャッチ画像

前回はサイトの設定(hugo.toml）をしたところで終わってしまいました。今回は続けてフッター部分を作成していきます。

フッター部分のデザインは以下の図のようになっています。赤で囲まれているのがHugoのテンプレート機能で生成される部分です。

フッターのデザイン[Hugo-footerdesign.jpg(50866byte)]

Partial Template の利用

現代の一般的なサイト構成では、フッターやヘッダーはサイトで共通としたいことが多いと思います。 このような場合、HugoではPartial Template を利用することができます。つまり、ページの共通部分を外部で分割し、部品として扱えるのです。完全な静的HTMLでは難しい部分であり、多くの人にとっては動的生成を行う動機でしょう。

Partial Templateは./themes/[yourthemename]/layouts/partials/*に置きます。ちなみに、サイトの./layouts/partials/[PARTIALNAME].html のほうがテーマディレクトリ内のものより優先されます。ここではわかりやすくfooter.htmlという名前にしてテーマフォルダ内に置きます。

./themes/[yourthemename]/layouts/index.htmlからは次のように参照します。

1<h2>Latest 3 posts by Tegalog</h2>
2<div id="tegalogue">
3</div><!-- end #tegalogue -->
4</main>
5{{- partial "footer.html" . -}}
6</body>
7</html>

{{- partial “footer.html” . -}}の部分にfooter.htmlが丸ごと挿入されます。

footer.html

ハイライト部分はhugoテンプレートの機能で変数などを表示しています。 五行目からがhugo.tomlで設定したメニューを表示している部分になります。

 1</div><!-- div.contents_body or div.homecontents end -->
 2<footer>
 3<div id="page-top"><a href="#top">Top</a></div>
 4<ul class="footer_menu">
 5  {{ range .Site.Menus.global }}
 6    <li>
 7    <a href="{{ .URL }}" title="{{ .Title }}" class="{{ with .Params.class }}{{ . }}{{ end }}">{{ .Pre }}<small>{{- .Name -}}</small></a>
 8    </li>
 9  {{ end }}
10</ul>
11 <dl class="pagedate">
12  <dt class="published_date">Published</dt>
13  <dd class="published_date"><time>{{ .Date }}</time></dd>
14  <dt class="lastmodified_date">Last modified</dt>
15  <dd class="lastmodified_date"><time>{{ .Lastmod }}</time></dd>
16 </dl>
17<p class="copyright">
18 <address>
19 Written by <a href="{{ .Site.BaseURL }}mail/" class="mailform">aouma</a> and Built with <a href="https://gohugo.io/">Hugo</a>
20 </address>
21 </p>
22</footer><!-- footer end -->
23<script src="https://rawgit.com/outboxcraft/beauter/master/beauter.min.js"></script>

これは非常に便利な機能です。フッターのデザインや記述をを変えたければ、footer.htmlを編集するだけで呼び出し元のページ全てで適応されます。たとえば私がハンドルネームを「Iwatobingo」に変えたくなったとしましょう。footer.htmlの該当部分を変えればいいだけです。素晴らしい。

同様にして、header.htmlやhead.html、またスマホなどのデバイスで表示されるmobilenavi.htmlなども部品化していきます。とくにhead要素の中身は近年では非常に複雑化していますから、Partial Templateの面目躍如ですね。ただ、トップページの作成の説明については都合上、ここまでにします。head.htmlについてはRSSやSitemap、faviconなど外部へのアピールに関わるので、最後に紹介しようと思います。

次回は「about」などの固定ページの作成と、Shortcodeについて扱います。

関連記事