Create a sidebar ToC/Title + Sub Menu structure

1

I am using the minimal-mistakes theme (it has not been modified that much, if at all). I have posted a question in their discussion form already - but, also wanted to post here for some potential other ideas or view points on how to achieve this. This would be in the sidebar as described in the topic, but, ultimately,

We will be using a sub-domain: help.domain.com to achieve this, but, we are hosting our content in the following way:

Index (help.domain.com)
|
|  - "Geting Started"
          |   - Getting Started Page 1.md
          |   - Getting Started Page 2.md
|   - "Product Feature 1"
          |   - How to do XYZ.md
          |   - What if ABC happens.md
|   - "Product Feature 2" 
          |   - Example page 3.md
   |   - etc
|  - Some other subfolder

What I am trying to do is extract the folder/directory names to be the titles, and page names to be the sub-title, to create the Sidebar menu automatically.

In any case, the Getting Started should be first, and then I can append/add the other items to the bottom which I know how to use that liquid function, but, what I can’t figure out is a good way to automatically retrieve the folder/directory name.

Is there an ideal way to do this? Is this better suited as a collection, rather than a page and several sub-pages/content?

Could anyone lend me some thoughts.

2 Likes
2

I can’t speak to using the specific theme. I don’t know if it supports a dynamic sidebar or you’d have to hardcode it

But generally.

If you don’t want to use a generator plugin, I’d recommend storing the directory names as pages. With the title set on the .md file

So

getting-started/
    index.md (`title: Getting started`)
    page-1.md (`title: Example page 1`)
product-feature/
    index.md
    how-do-i-xyz.md

That is without a collections.

To give the concept of directory vs page, you iterate through all site.pages and if it is index.md for name in path then it’s a directory.
Of course if you sort by paths alphabetically, all pages under one directory go together. Or you can use group by in Jekyll.

If the theme doesn’t support this you have to write this yourself for navbar.

3

Just remember Jekyll doesn’t know an index.md is a directory. It is your logic.

So you can’t just get everything under say getting-started. You have to filter pages based on the same item.dir value.

If you want to use collections, then you can get everything under a directory. This could suit you better.

Your index page then needs to exist outside the collection directory and not called index.

Sample structure. Again, Jekyll doesn’t know the friendly name of a collection so use frontmatter for that.

_getting-started/ # collection 
    page-1.md (`title: Example page 1`)
_product-feature/ # collection
    how-do-i-xyz.md
getting-started.md
product-feature.md

If you use config as:

permalink: pretty

Then your page URLs will appear as dirs.

E.g. Disk path and browser path:

getting-started.md => /getting-started/
_getting-started/page-1.md => /getting-started/page-1/

Note that /getting-started/ points to /getting-started/index.html file.

But now say you have 10 collections and you don’t want to hardcode getting each one as

site['getting-started'] # like site.getting-started but handles hyphen 
site['product-feature']
...

Then you can use the site.collections object.

I have a demo here. I iterate through all collections without knowing the name beforehand and then list every page in the collection.

This appears on the body of my homepage as a menu like table of contents.

But this could easily be refactored as a sidebar.

For bonus points…

The top level of my tools collection is tools.md and I list all items in the one collection like so. This could be moved to a layout to avoid repeating code on every collection root.

---
title: Tools
---

This page showcases how to list items in a specific collection.

<ul>
    {% for tool in site.tools %}
        <li>
            <h2>
                <a href="{{ tool.url | relative_url }}">
                    {{ tool.title }}
                </a>
            </h2>

            <p>
                <i>{{ tool.description }}</i>
            </p>
            <p>{{ tool.excerpt }}</p>
        </li>
    {% endfor %}
</ul>

All using the Minima theme by the way. But only using the theme for appearance. My logic to handle the TOC and the list of items within the collection is all my own code and nothing magical about the theme which means you can add that code to your site if you can’t find a builtin way for minimal mistakes from the docs.