HUGOのセクションの構造・レイアウト・タイトル・_index.mdを学ぶ

Share on:

この記事は約4 分で読めます。

目次

HUGOブログのサブディレクトリを使って記事をうまく分類してみます。

HUGOではサブディレクトリ配下のことをセクションと呼びます。

セクション配下にはメイン記事とは色合いの違う記事(カテゴリ別記事)をまとめておくと何かと都合がいいです。

例えば、ブログのメイン記事はGo言語だけど、日々の雑記も書きたい場合、

https://hogehoge.com/メイン記事/

https://hogehoge.com/diary/雑記記事/

とまとめると、読み手もURL構造もスッキリします。

このようにすることでHUGOブログに膨らみが出ます。

それでは**HUGOテーマ(テンプレート)**をカスタマイズしていきましょう!

セクションの配置

1content
2 └ post
3    └ メイン記事1.md
4    └ メイン記事2.md
5    └ メイン記事3.md
6 └ diary
7    └ _index.md
8    └ 雑記記事1.md
9    └ 雑記記事2.md

通常の記事はpost配下に書いていきますが、postとは別にdiaryというフォルダをcontent配下に作成しこの下に雑記記事を書いていきます。

このdiaryがセクションとなります。

※diaryや雑記記事はここででの例えです。

_index.mdの作成

セクション記事をまとめたいわゆるインデックスページ(トップページ)的なものを作成します。

上の構造図のように_index.mdを作成します。

_index.mdがないと、httpe://hogehoge.com/diary/にアクセスしても記事一覧は表示されません。

_index.mdの具体的な中身ですが、themelayoutにあるlist.htmlなどが参照されますが、当方の場合、読み込んでくれなかったため諸々参考にしsection.htmlというテンプレートを作成しました。

section.htmlというファイル名のテンプレートがある場合、セクションのインデクスページ生成に利用されます。

section.html

 1<!DOCTYPE html>
 2<html ? lang="{{ .Site.LanguageCode }}">
 3    {{ partial "head.html" . }}
 4    <body>
 5        {{ partial "header.html" . }}
 6            <div class="container">
 7                <h1>{{ .Title }}</h1>
 8                {{ $paginator := .Paginate (.Data.Pages) }}
 9                {{ range $paginator.Pages }}
10                <li>
11                    <a href="{{ .Permalink }}">{{ .Title }} ({{ .Date.Format "2006-01-02" }})</a>
12                </li>
13                {{ end }}
14                {{ partial "pagination.html" . }}
15            </div>
16        {{ partial "footer.html" . }}
17        {{ partial "foot.html" . }}
18    </body>
19</html>

このブログで使っているまんまのテンプレです。

このブログはフルAMP化(PCページもモバイルページもAMP合格ページ)していますので、?が入っていますが気にしないでください。

それぞれのテーマで内容はガラリと異なると思いますので、{{ .Permalink }}で記事リンクを取得して{{ .Title }}で記事タイトルを表示しているところだけ見てもらえればよいかと思います。

セクションごとにタイトルを変える

セクションごとに記事の分類ができたらタイトル(ブログ名)も変えてみたいですよね。

メイン記事はこれだ! - Go言語を極めるブログ

今日思ったことは。。。 - 日記

このブログの場合、head.htmlというテンプレに追記しました。

1{{ $title := .Site.Title }}
2{{ if eq .Section "diary" }}
3{{ $title = "日記"}}
4{{ end }}
5<head>
6 ・・・・・
7 <title>{{ .Title }} - {{ $title }}</title>
8 ・・・・・
9</head>

まず変数$titleに通常のブログタイトルを代入しておきます。

.Sectiondiaryなら変数$title日記を代入して、記事タイトルの後ろに付加します。

diaryでなければ、そのまま通常のブログが付加されます。

これでセクションごとに記事タイトルを変更できます。

まとめ

ここまでの作業で、一つのブログの中にあたかもいくつものテーマのブログがあるかのように配置することができます。

サブドメインでブログを新規に開設するのももちろんいいですし、セクション=サブディレクトリに異なるテーマのブログを加えつつ、ドメイン(ブログ)のボリュームアップを図るのもいいかもしれません。

インデクスページやタイトルにこだわらなければ、contentフォルダの下にセクションフォルダを作成するだけですのでとても簡単です。

是非、HUGOのセクションに挑戦してみてください。