Hi, I’m new to Hugo, and trying to build a very simple site with a “Home” page and a section “News” with blog posts. I want to have a menu with these two options and highlight the active menu section, but after hours of reading the docs and examples still can’t get this to work, and I don’t understand why.
In my config.yaml I have the following:
hugo v0.96.0-2fd4a7d3d6845e75f8b8ae3a2a7bd91438967bbb linux/amd64 BuildDate=2022-03-26T09:15:58Z VendorInfo=gohugoio
PS By the way, I see I crossed variables, in the config.yaml I have PageRef, in the template it’s Url. This is because I was trying both (as I see both in the documentation and forum posts, which is also confusing to me). I’ve switched everything back to PageRef.
The URL’s work, but the class="active" never gets applied. So somehow I’m not completely understanding what $currentPage.isMenuCurrent "main" . is doing - is it doing some kind of object comparison, should I change the menu entries in config.yml, etc? (How does it determine true or false, since it seems to come out as false always?)
I’m gobsmacked, as I do not see the “active” class applied at all…
I’m happy to share the project, but then I have to put it on Github somewhere, and it may look very disorganized (for the record, I’m trying to develop a theme from scratch, and switching back and forth between it and a now hacked up tutorial theme. So you’d see two themes, some content, a few pictures and bogus new items).
Give me 5 minutes to put it under Git and post it on Github and I’ll post the link here.
OK, thanks, I think I get it - not passing the current page context is the problem, right? And on yours it then works, since you have the “menu” code inline in baseof.html and then it already has the context?
One final question, why do you have to define pageRef in config.yaml but then use URL in the template?
And thanks again - I have experience with Kubernetes, which uses Helm, which uses Go templating, I thought I’d got this. Apparently, not yet
The ones that have the . dot came from the generated template skeleton, and I completely missed in when adding the partial to my own stuff.
Side note: the pageRef menu property was introduced in v0.86.0 which, among other things, resolved an issue where .Page.HasMenuCurrent and .Page.IsMenuCurrent failed when defining menu entries in site configuration.
Many of the themes, examples, and tutorials in the wild are out of date, and wrong.
Thanks again for the explanations, that was very helpful!
I’ve made the changes to the templates, now it seems to be half working - when I choose “Home”, that menu entry is highlighted, but when I choose “News”, that entry is not for some reason. (I’ve pushed the changes.)
And indeed I’ve noticed the version differences, I started out with the Giraffe Academy tutorial, which was good, but gave me some headaches straight off the bat since it’s based on an older version.
I forgot to ask, is there a trick to show for e.g. everything that’s inside $currentPage in one go? I was looking at the reference docs and listing individual properties of the Page object in one of the templates, but iterating over the whole thing would be super helpful.
Your template structure is… not quite right. Take a hard look at the example I provided.
The baseof layout is typically the “chrome” for the entire site. Then you define the inside in the other layouts. You’ve kind of mixed things up, where the list page doesn’t use the baseof layout, and consequently does not include the head partial (where the CSS is).
In the meantime, I was flipping back and forth between your example and my effort, and I noticed the same - I just pushed a commit titled “proper use of partials”, now it seems to be working as intended.
While playing with Hugo templates I feel like I’m flying blind a bit so I was wondering if there was some trick to do a similar thing.
You’re right to point me to the documentation by the way, and I should look at that more - I guess I’ve gotten a bit lazy over the years having these tools at my disposal…