hugo recursive listings
My blog has a tree style listing for pages (screenshot below). I managed to do this after many tries .. there are pretty much zero resources on the internet regarding how to do this properly.
§ doc structure
First thing is that you need to have your content directory structure properlly. The respective dir structure for the screenshot below is:
TL;DR: if you want a directory to become a logical section, it has to
directly contain _index.md
. (directories directly under root dir i.e.
/content/
are selbständlig sections).
content/notes/
├── _index.md
├── misc/
│ ├── article1.md
│ ├── article2.md
│ └── _index.md
├── tooling/
│ ├── article3.md
│ ├── article4.md
│ └── _index.md
├── linux/
├── _index.md
├── article5.md
├── article6.md
└── tooltips/
├── article7.md
└── _index.md
- For a page to be treated as a “Node” (or, “Section”), it has to contain
_index.md
(or other supported content formats of the same name) - A “section” could be a page at the same time. The page content is that of
_index.md
. Think about a tree of pages, some pages are nodes and some are leaves. These node pages are not of.RegularPages
For example, if content/notes/linux
has do direct _index.md
, the above
structure is equilevant to:
content/notes/
├── _index.md
├── misc/
│ ├── article1.md
│ ├── article2.md
│ └── _index.md
├── tooling/
│ ├── article3.md
│ ├── article4.md
│ └── _index.md
├── article5.md
├── article6.md
└── tooltips/
├── article7.md
└── _index.md
Well, it’s not completelely the same, for example if you don’t specify a url
parameter for each page under linux/
, the /linux
will become part of the
url. e.g. in both cases the url to article7
is.
/notes/linux/tooltips/article7
In other words, the default url is derived from the file system structure, not the logical relationships. (I’m pretty sure there are ways to have different url scehemes but I’m not digging into it)
§ recursively render a tree
TL;DR: you can check the page parameter (method) .IsNode
1. If it
is a node, dive into it by getting its .Pages
, otherwise list it as normal
page.
Code /layouts/_default/list.html
Code /layouts/partials/fs_style_page_list.html
We can use the first .Ancestors
to have a “parent dir” url.
|
|
Code /layouts/partials/internal_fs_node_recursive.html
note that we increment the depth counter with every recursive call
|
|
Code (helper): /layouts/partials/internal_fs_indent.html
add leading indentations w.r.t the directory depth