Current context woes with multi-level menu

[moe_narrow]

I’m having an issue with the current context with regards to multi-level menus.

I must preface this with the likely first response; I have read this:

Hugo, the scope, the context and the dot | Regis Philibert

And I still haven’t got a clue as to how to solve this.

First, some background -

there’s too much content for me to manage easily. Everything is in a database (data/data.json)

I’m manually configuring categories so that my layouts directory doesn’t get junked up - but as soon as I do that I run into this ‘current context’ issue.
The really strange part is that the page seems to reload but nothing on it changes. I hope to clarify this momentarily.

Here’s the important part of the config.toml:
(forgive the redundancy, I was just trying to figure out what’s going on)

[[menu.main]]
weight = 3
name = "Products"
url = "/products"
identifier = "products"
  [[menu.main]]
  parent = "products"
  weight = 1
  name = "All"
  url = "/products/all/"
  identifier = "allproducts"
    [[menu.main]]
    parent = "allproducts"
    weight = 1
    name = "Random"
    url = "/products/all/random"
    identifier = "randomproducts"
    [[menu.main]]
    parent = "products" 
    weight = 1
    name = "Random"
    url = "/products/random"
    identifier = "random1"

[[menu.main]]
weight = 4
name = "Random"
url = "/random"

^^ This works, depending on the contents of the content dir being there. I’m just using ‘dummy files’ inside the content dir because .Site.Data.data is where the actual content is
So heres the content dir (more or less)

.
└── content
    └── products        // <- https://example.com/products/
    |   ├── random      // <- https://example.com/products/random/
    |    |  └── dummy.md           
    |   ├── all               // <- https://example.com/products/all/
    |    |  ├── dummy.md           
    |    |  └── random  // <- https://example.com/products/all/random/
    |    |    └── dummy.md           
    |   └── dummy.md
   └── random                  // <- https://example.com/random/
        └── dummy.md       

^^ This works as far as URL paths are concerned, but the layout is giving me issues
(For brevity I’m only listing the essentials )

.
└── layouts
    └── products
    |   ├── list.html
    |   ├── single.html
    |   ├── random
    |    |  ├── list.html
    |    |  └── single.html
    |   ├── all
    |    |  ├── list.html
    |    |  ├── single.html
    |    |  └── random
    |    |        ├── list.html
    |    |        └── single.html
    └── random
        ├── list.html
        └── single.html

The list.html is the same for products and all
layouts/products/list.html

{{ define "main" }}
{{ partial "products/list/product-list.html" . }}
{{ end }}

And the file referenced above:
layouts/partials/products/list/product-list.html

    <div class="row">
      {{ range (where .Site.Data.data ".Enable" "True" ) }}
      {{ partial "products/list/product-list-item.html" . }}
      {{ end }}
    </div>

And all the ones for random are the same
layouts/random/list.html

{{ define "main" }}
{{ partial "products/list/product-list-random.html" . }}
{{ end }}

And the file referenced above:
layouts/partials/products/list/product-list-random.html

<div class="row">
  {{ range (shuffle (where .Site.Data.data ".Enable" "True" )) }}
  {{ partial "products/list/product-list-item.html" . }}
  {{ end }}
</div>

With this in mind, https://example.com/random/ and https://example.com/products/ both work correctly

https://example.com/products/random/ shows the same as https://example.com/products/ even though a different partial should be called.

It actually does nothing, that I can tell. The page attempts to reload if you navigate from
https://example.com/products/ to https://example.com/products/random/
but the same thing is displayed as was on the previous page. No errors are shown either, so debugging this has been a guessing game.

I know this is a current context issue, I’m just really not sure what to do about it or how to solve it. Many thanks in advance.

[pamubay]

AFAIK, Nested layouts templates structure is not supported by Hugo.

this structure is not supported:

layouts/products/random/list.html
layouts/products/random/single.html

The only way is by setting the type to random in the frontmatter of products/random/dummy.md.

So https://example.com/products/random/ will use layout template from layouts/random/{list, single}.html

References:

Template Lookup: A Guide

Hugo’s Templates Lookup Docs ref Demo / Source Looking at the extensive list of examples in the docs might be a bit overwhelming to new Hugo users, but it is not that complicated once we break it down. Layout files are generally in the pattern: 1 2 3 4 5 6 layoutDir / [directory] / filename . [lang] . [outputformat] . suffix Let’s look at each page .Kind to see how the values of these parts are affected: home content/_index.md => …

[moe_narrow]

The URL format is not what I’m trying to solve, my focus was on making this easier to manage and not have every single category in the layouts directory. There must be over 100 categories. Of course I’m not even considering having a separate page for every product at this point, only sections that list categories.

You see my dilemma here, of not wanting to have to search extensively to find the ‘partials’ directory; and by havng the directory structure which must exist somewhere in any case as certain categories are subcategories of other categories.

I feel like this whole situation could be avoided with a for loop, as they say in bash. Or if some parameters from the selection of the menu item that was clicked on were passed as arguments instead of trying to redirect the page, more or less reload the current one with the new context.

Ideas from anyone on that would be appreciated. I’m just going for the simplest thing to manage,

and thank you sincerely @pamubay for that info

[pointyfar]

Helping would be much easier if you had your code in a repo we can have a look at, instead of us trying to recreate based on snippets and structure. See Requesting Help .

I’m not entirely sure what you are trying to do and what your question is. Is it the menu that’s not working? Is it that your pages are using incorrect layouts?

@pamubay 's answer above does not affect your URL formats at all, merely pointing out that nested content does not map to nested layout files. I.e., content/a/b/c.md, which renders into yoursite.com/a/b/c/ will not use layouts/a/b/single.md:

@moe_narrow

.
└── layouts
    └── products
    |   ├── list.html
    |   ├── single.html
    |   ├── random      <-- this won't do anything
    |    |  ├── list.html
    |    |  └── single.html
    |   ├── all
    |    |  ├── list.html
    |    |  ├── single.html
    |    |  └── random       <-- this won't do anything
    |    |        ├── list.html
    |    |        └── single.html
    └── random
        ├── list.html
        └── single.html

@moe_narrow

I feel like this whole situation could be avoided with a for loop

That’s what range is for.

@moe_narrow

if some parameters from the selection of the menu item that was clicked on were passed as arguments instead of trying to redirect the page, more or less reload the current one with the new context.

What you are describing sounds more like a single page app.

Hugo generates static pages. This means that the pages get created when you run hugo, not when you load the page, so when you click a link <a href="page/foo/">like this</a> from a page, there is no “context” to be passed that will change what is on the page that you are navigating to.

You can of course achieve that using javascript, but that really is beyond the scope of this forum.