Firstly, thank you for all your work on this awesome OS project (both technical and this community). Hugo is amazing.
I have a problem I’m trying to solve, and I think I’m missing something fundamental about how Hugo works.
I have a website with a long table of contents. When a user scrolls down the table of contents and clicks on a menu item, the page reloads and the user is brought back up to the top of the table of contents. My goal is to setup the Hugo site so that it is aware of the user’s state (which table of content item they are on) and keeps the sidebar visible in the viewport, rather than sending them back to the top.
It’s very similar to how the Hugo docs works:
I scroll down in the table of contents and click on “Sitemap Variables”
And the page reloads and sends the Table of Contents back up to the top (I’m unable to attach a second screenshot, as “New Users can only attach one image”).
The reason I’m posting this here is because I think it could be helpful to have a discussion about the larger issue (how would one work with state in a Hugo site?) and also because solving this problem could also directly benefit the UI on the Hugo docs.
Hi @pointyfar, thank you for your response and the helpful links on menus and menu-templates. I think .IsMenuCurrent may be what I need to work with.
I’m using the Hugo Learn theme (menu code here), but the behavior I am trying to implement on the table of contents is the same issue that I mentioned in the Hugo Docs website - I think this is the code for this site’s menu.
So in both menus/table of contents, when a user clicks on a menu item it is highlighted, so the page is aware of the currently clicked link/page (I guess this is what .IsMenuCurrent does?).
The problem is that when the user clicks on the link the site does a full page refresh and brings the user way back up to the top of the table of contents. I’m trying to figure out how to maintain that “context” or “state” when the page reloads so that the user’s place in the T.O.C. can be maintained, rather than lost and brought back up to the top.
What you are describing can be done with javascript and loading content without loading a new page. But that is a design pattern, and isn’t preferred, per se. Many of us use Hugo to create static pages that don’t do dynamic reloads of content.
Anyhow, to answer the question in the title: Hugo doesn’t get in the way of providing javascript resources to the browser. If there is a fundamental part of Hugo you are looking for it may be that Hugo is just templates, and you can template what you want done in the browser.
