Why does Page.URL (deprecated) work while .RelPermalink throws an error?

support
1

Hi, I am designing a theme with a navigation bar. When a user is on a page, I want this page to use the active class and render differently from other items on the navigation bar.

My code for this is as follows:

<div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav">
        {{ $currentPage := . }}
        {{ range .Site.Menus.nav }}
            <li class="nav-item">
                <a class="nav-link{{ if eq .URL $currentPage.URL }} active" aria-current="page"{{ else }}"{{ end }} href="{{ .URL }}">{{ .Name }}</a>
            </li>
        {{ end }}
        <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">social</a>
            <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
            {{ range .Site.Menus.social }}
                <li><a class="dropdown-item" href="{{ .URL }}">{{ .Name }}</a></li>
            {{ end }}
            </ul>
        </li>
    </ul>
</div>

However, Hugo tells me that Page.URL is deprecated and that I should do this another way:

WARN 2021/11/21 17:01:05 Page.URL is deprecated and will be removed in a future release. Use .Permalink or .RelPermalink. If what you want is the front matter URL value, use .Params.url

Okay, easy enough – .RelPermalink is the same value I am comparing, so I should be able to swap it out, right? I tried doing that, and here is my code for the same. The only thing changed is swapping .URL out for .RelPermalink:

<div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav">
        {{ $currentPage := . }}
        {{ range .Site.Menus.nav }}
            <li class="nav-item">
                <a class="nav-link{{ if eq .RelPermalink $currentPage.URL }} active" aria-current="page"{{ else }}"{{ end }} href="{{ .RelPermalink }}">{{ .Name }}</a>
            </li>
        {{ end }}
        <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">social</a>
            <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
            {{ range .Site.Menus.social }}
                <li><a class="dropdown-item" href="{{ .RelPermalink }}">{{ .Name }}</a></li>
            {{ end }}
            </ul>
        </li>
    </ul>
</div>

However, this causes a fatal error from Hugo, and I can’t understand why this error is being thrown:

Error: Error building site: failed to render pages: render of "page" failed: execute of template failed: template: _default/single.html:5:12: executing "_default/single.html" at <partial "nav.html" .>: error calling partial: "/home/jwf/git/web/jwf.io/themes/toph/layouts/partials/nav.html:17:51": execute of template failed: template: partials/nav.html:17:51: executing "partials/nav.html" at <.RelPermalink>: can't evaluate field RelPermalink in type *navigation.MenuEntry

I’m confused by what this error means, and why Page.URL works while .RelPermalink causes this error to be thrown. Am I doing something incorrectly, or is this a bug in Hugo? Any advice is appreciated, thanks!

Also, the full code in its original context can be found here:

2

It’s warning you about .URL on .Page, but you changed .URL on the menu.

Do this instead:

diff --git a/themes/toph/layouts/partials/nav.html b/themes/toph/layouts/partials/nav.html
index ccfdfdb..836f0c3 100644
--- a/themes/toph/layouts/partials/nav.html
+++ b/themes/toph/layouts/partials/nav.html
@@ -9,7 +9,7 @@
                 {{ $currentPage := . }}
                 {{ range .Site.Menus.nav }}
                     <li class="nav-item">
-                        <a class="nav-link{{ if eq .URL $currentPage.URL }} active" aria-current="page"{{ else }}"{{ end }} href="{{ .URL }}">{{ .Name }}</a>
+                        <a class="nav-link{{ if eq .URL $currentPage.RelPermalink }} active" aria-current="page"{{ else }}"{{ end }} href="{{ .URL }}">{{ .Name }}</a>
                     </li>
                 {{ end }}
                 <li class="nav-item dropdown">
1 Like
3

Thanks, I understand now! I wasn’t understanding the $currentPage variable I was declaring. I updated my codebase and this fixed the deprecation notice without the error. Thanks!

4

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.