Explicitly order pages by file path

tips & tricks
1

Hugo’s default page ordering is as follows:

Weight > Date > LinkTitle > FilePath

So, while ordering by file path is possible, to do so you must not have weight/date/title set in your front matter. This is unrealistic for most projects.

Luckily there is another way. First, create an empty slice. Next, range through your pages, appending a dictionary of the (1) page object, and (2) its file path, to the slice. Then sort the slice by file path in ascending order, and range through it.

{{ $pages := slice }}

{{ range .Pages }}
  {{ $pages = $pages | append (dict "page" . "file_path" .File.Path) }}
{{ end }}

{{ range sort $pages "file_path" }}
  {{ .page.Title }}
{{ end }}

As an example, given content:

content/
├── 01_getting_started.md
├── 02_setup.md
└── 03_configuration.md

It will display, ordered by file path, as:

Getting Started
Setup
Configuration

P.S. if you know of a better way to do this, I’m all ears.

5 Likes
2

I think that the sort() function does what you want to do in a quicker way. And with less room for an accidental error.

For example:

<ul>
{{ range sort .Site.RegularPages "File.Path" }}
    <li>{{ .File.Path }}</li>
{{ end }}
</ul>

Gives me the following output with file paths sorted alphabetically:

Output 
csharp\branching\if-else\if-statement.md
csharp\branching\loop\do-while-loop.md
csharp\branching\loop\for-loop.md
csharp\branching\loop\optional-for-loop-parts.md
csharp\branching\loop\while-loop.md
csharp\maintenance.md
csharp\rss-feed.md
csharp\tags\do-while.md
csharp\tags\looping.md
feedback.md
hugo\branching\if-else\cascaded-ifs.md
hugo\branching\if-else\if-else-statement.md
hugo\branching\if-else\if-statement.md
hugo\branching\if-else\nested-if-else.md
hugo\branching\if-else\nested-if-statement.md
hugo\branching\if-else\switch-statement.md
hugo\branching\if-else\with-else-statement.md
hugo\branching\if-else\with-statement.md
hugo\branching\looping\while-loop.md
hugo\deployment\circleci\hugo-s3deploy-circleci.md
hugo\maintenance.md
hugo\standard-functions\string-functions\lower-function.md
hugo\standard-functions\string-functions\title-function.md
hugo\standard-functions\string-functions\upper-function.md
hugo\strings\title-case-string.md
hugo\strings\uppercase-lowercase-string.md
javascript\jquery-alternative\wrap-jquery-replace-plain-javascript.md

Of course sort can also reverse the sorting:

<ul>
{{ range sort .Site.RegularPages "File.Path" "desc" }}
    <li>{{ .File.Path }}</li>
{{ end }}
</ul>
Click for output

javascript\jquery-alternative\wrap-jquery-replace-plain-javascript.md
hugo\strings\uppercase-lowercase-string.md
hugo\strings\title-case-string.md
hugo\standard-functions\string-functions\upper-function.md
hugo\standard-functions\string-functions\title-function.md
hugo\standard-functions\string-functions\lower-function.md
hugo\maintenance.md
hugo\deployment\circleci\hugo-s3deploy-circleci.md
hugo\branching\looping\while-loop.md
hugo\branching\if-else\with-statement.md
hugo\branching\if-else\with-else-statement.md
hugo\branching\if-else\switch-statement.md
hugo\branching\if-else\nested-if-statement.md
hugo\branching\if-else\nested-if-else.md
hugo\branching\if-else\if-statement.md
hugo\branching\if-else\if-else-statement.md
hugo\branching\if-else\cascaded-ifs.md
feedback.md
csharp\tags\looping.md
csharp\tags\do-while.md
csharp\rss-feed.md
csharp\maintenance.md
csharp\branching\loop\while-loop.md
csharp\branching\loop\optional-for-loop-parts.md
csharp\branching\loop\for-loop.md
csharp\branching\loop\do-while-loop.md
csharp\branching\if-else\if-statement.md

3 Likes
3

Very nice. Thank you @Jura!