Current context woes with multi-level menu

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:

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)

weight = 3
name = "Products"
url = "/products"
identifier = "products"
  parent = "products"
  weight = 1
  name = "All"
  url = "/products/all/"
  identifier = "allproducts"
    parent = "allproducts"
    weight = 1
    name = "Random"
    url = "/products/all/random"
    identifier = "randomproducts"
    parent = "products" 
    weight = 1
    name = "Random"
    url = "/products/random"
    identifier = "random1"

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 is where the actual content is
So heres the content dir (more or less)

└── content
    └── products        // <-
    |   ├── random      // <-
    |    |  └──           
    |   ├── all               // <-
    |    |  ├──           
    |    |  └── random  // <-
    |    |    └──           
    |   └──
   └── random                  // <-

^^ 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

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

And the file referenced above:

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

And all the ones for random are the same

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

And the file referenced above:

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

With this in mind, and both work correctly shows the same as 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 to
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.

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

this structure is not supported:


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

So will use layout template from layouts/random/{list, single}.html


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

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/, which renders into will not use layouts/a/b/

That’s what range is for.

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.