独学者Fossa

独学していることなど

Hugo Taxonomy sorting

Hugo
Hugo

Info
例えとして、相応しくないかもしれませんが、ご了承ください。

前提

使用したHugoのバージョンは、hugo v0.101.0-extendedです。

content/prefecture フォルダの中に1.mdから47.mdがあります。

1.mdの中身は、下記の通りです。

---
title: 北海道
weight: 101
categories:
- 北海道地方
categories_weight: 1
---

config.tomlの中身は、下記の通りです。

[taxonomies]
  category = "categories"

カテゴリー表示の順番

カテゴリー名を英語にした場合は、アルファベット順だったので、あまり気にしなかったのですが、日本語にした場合、カテゴリーが表示される順番を設定したいと思いました。

都道府県は、47あるので、地方でまとめようと思い、カテゴリーにしたわけです。

例えば、北海道のカテゴリーは北海道地方、青森県のカテゴリーは東北地方という感じです。

色々、試してみたのですが、2つ方法があることがわかりました。

まずは、試して失敗した例を記載します。

失敗例

layouts/partials/sidenav.html

<ul>
{{ range $key, $value := .Site.Taxonomies.categories }}
  <li>{{ $key }}</li>
{{ end }}
</ul>

結果

失敗例成功例
左が失敗例

左側の画像が、失敗例です。

画像の中の左側のメニューが、右側の画像のような順番で表示したいわけです。

成功例1 categories.yamlを作成

これが一番、簡単なのでは?と思います。

しかし、使い途は限定されるような気がします。

data/categories.yaml

---
  - 北海道地方
  - 東北地方
  - 関東地方
  - 中部地方
  - 近畿地方
  - 中国地方
  - 四国地方
  - 九州地方

layouts/partials/sidenav.html

<ul>
{{ range $.Site.Data.categories }}
  <li>{{ . }}</li>
{{ end }}
</ul>

成功例2 content/categories フォルダを作成

content/categories/1/index.mdでもcontent/categories/1.mdでも、どちらでも良いみたいです。

content/categories/1/index.md

---
title: "北海道地方"
weight: 10
---

layouts/partials/sidenav.html

<ul>
{{ range ($.Site.GetPage "categories").Pages.ByWeight }}
  <li><a href="{{ .RelPermalink }}">{{ .Title }}</a></li>
{{ end }}
</ul>

番外編 カテゴリーを使わずセクションにする

元々、カテゴリーを使わず、セクションを使う方法で、制作していました。

セクションだと、contentフォルダの階層が、北海道地方(list page)→北海道(list page)→札幌市(single page)になります。

カテゴリーだと、contentフォルダの階層が、北海道(list page)→札幌市(single page)になります。

セクションにすると、階層が深くなる可能性があり、メニューとして使う場合、深い階層は面倒です。