HUGO

Using .RelPermalink inside an <option> tag?

I’m seeing some - for me - unexpected behabviour from .RelPermalink.

I’m creating a select menu to allow readers to select different versions of the same topic. My site needs to be readable from the file system - readers will be completely offline most of the time - so my links are relative.

I’ve created a partial which I call with {{ partial "page-version-switcher" . }}.

In the (simplified partial), I range through some pages and put the link into a tag so it appears as an option in the select menu:

{{ $pages := (where .Site.Pages "Section" .Section) }}
        {{ range sort $pages "Params.Version" "desc" }}
 <option value="{{ .RelPermalink }}">{{ .Params.Version }}</option>
        {{ end }}

But the values in each option aren’t relative to the page, they’re relative to the site root. So I get:

/examples/ex-topic-one.html

Hugo still serves it correctly, but when I build the site I get broken links.

When I use <a href="{{ .RelPermalink }}"> , I get what I expected:

…/examples/ex-topic-one.html

Have I misunderstood something about how .RelPermalink works?

see config

relativeURLs (false)

Enable this to make all relative URLs relative to content root. Note that this does not affect absolute URLs.

Thanks @ju52. I already had that flag set to true. I’ve tested both false and true - .RelPermalink doesn’t resolve to a relative link.

Any ideas?

Can you give us a (sample) repository?

Sorry, had to cobble one together: https://github.com/honzik20/relpermalinkTest

The pages under public/versiontest have links as <a href ="URL" and as <select value="URL" - but they’ve got different results.

As you have found out relativeURLs works for links with proper markup and not in other HTML tags:

For example in the generated HTML of public/versiontest/1.0.html

         <a href="../versiontest.html">4</a>
        
         <a href="../versiontest/3.0.html">3</a>
        
         <a href="../versiontest/2.0.html">2</a>
        
         <a href="../versiontest/1.0.html">1</a>

and

         <option value="/versiontest.html">4</option>
        
         <option value="/versiontest/3.0.html">3</option>
        
         <option value="/versiontest/2.0.html">2</option>
        
         <option value="/versiontest/1.0.html">1</option>

Since the relative value is desired in partials/versionswitcher.html instead of what you have now:

<option value="{{ .Site.BaseURL }}{{ .RelPermalink }}">{{ .Params.Version }}</option>

try using:

<option value="..{{ .RelPermalink }}">{{ .Params.Version }}</option>

I’m not sure what you mean by proper markup but it seems their use is limited to href?

Thanks for suggesting a fix tho it doesn’t work for all cases. Looks like I’ll be dusting off some if statements. Thanks all.