How to order list content based on section front matter

Hello,

I am stuck trying to solve a problem with Hugo, and would appreciate any ideas for how to approach it. What I want to do is order the content rendered on a list page according to a variable from the page’s section front matter. Below is a toy example to better explain:

Let’s say I am working with content stored in content/rabbits/

That directory, which uses page bundles, looks like this:

content/
├── rabbits/
│	  ├─── flopsy/
│   		└── index.md 
│	  ├─── mopsy/
│   		└── index.md 
│	  └─── cottontail/
│   		└── index.md 

The default ordering on the list page of course is alphabetical so cottontail > flopsy > mopsy. Following these instructions, I can change the order of these pages in my list page using a page parameter like inside flopsy/index.md:

name: flopsy
order: 1

mopsy/index.md

name: mopsy
order: 2

cottontail/index.md

name: cottontail
order: 3

Then the following works within my list layout and I see flopsy > mopsy > cottontail:

{{ range sort (where .Pages "Section" "rabbits") ".Params.order" }}

(I realize I can use weights here instead of making up a new variable called order, but this works too).

Now what I would like is to be able to specify this order once and in one place, so I only have to edit my front matter in the _index.md to change the order, rather than changing the page-level parameters within each individual file. Ideally, it would be user-friendly to be able to use some front matter in my _index.md that looks vaguely like how we specify the ordering of menu items, like this:

---
peters_sisters:
  - name: flopsy
    order: 1
  - name: mopsy
    order: 2
  - name: cottontail
    order: 3
---

I’m not attached to this at all- just throwing it out there as one way to structure the orders. Where I am stuck is:

(a) how to structure the orders of the pages in the _index.md, and then
(b) how to apply the sort within my list template when I range over the pages (the rabbits here). I am guessing I will need to use .Site.GetPage.

Thank you in advance for any ideas!

I tried to post links to other questions on this forum that I think are related but ultimately didn’t help me, but since I am new I can only post 2 links.

I like that peters sisters example :rabbit:

Try something like this in your layouts/rabbits/list.html template:

{{ range sort (.Params.peters_sisters) "order" }}
  {{ $page := $.Site.GetPage .name }}
  {{ $page.Title }}
{{ end }}

I didn’t realize you could use .GetPage like that! For anyone who has similar problems, here is what now works :tada:

<!-- showing that this works-->
{{ with .Site.GetPage "section" "rabbits" }}{{ .Title }}{{ end }}

{{ with .Site.GetPage "section" "rabbits" }}{{ .Content }}{{ end }}

<!-- Ranges through content/rabbits/*/index.md -->
{{ range sort (.Params.peters_sisters) "order" }}
  {{ $page := $.Site.GetPage .name }}
  {{ with $page }}<li><a href="{{ .RelPermalink }}">{{ .Params.name }}</a></li>{{ end }}
{{ end }}

Thank you!

2 Likes