Dynamic URL in main menu

support
1

Hello!

I’m having a bit of trouble with an issue I’m facing. My project requires a sign-out button that can be logged in through different products. The issue is that in the menu.toml file, the URL will need to be dynamic, so it has stuff like $END_SESSION_URL where it’ll need to transform that according to the product we’re currently logged into. However, the way the URL is parsed now is not escaping those elements so that it can be parsed differently from a separate JS file. Is there a way of escaping characters in the menu URL so that it can be treated dynamically instead of absolute?

Thanks!

2

I’ve read your post a few times, and I don’t quite understand what you want to achieve.

Can you provide an example of:

  1. Your config file
  2. The template code that renders your menu
  3. What you are getting
  4. What you actually want
3

Basically I have a sign-out button that can be accessed through different applications and is being generated from an Azure site. We want to add that sign-out button to the top navigation of our site but the URL needs to change dynamically. I’ve provided a couple of photos of how the menu.toml file looks and how the URL is being rendered after it gets parsed. We want to preserve the $ values instead of having the string converted to plain text.

test1
test11809×224 32.8 KB

test2
test21882×130 36.4 KB

4

would something like safeHTML work?

<a class="nav-link" href="{{.Site.Params.main.url | safeHTML}}">

Thinking use it in the navigation template where the string gets loaded, if it functions cannot be used in config files.

Note: the referencing of the main.url is probably not correct but i think the idea comes across

5

With this configuration:

[[menu.main]]
name = 'Sign Out'
url = './auth/logout?post_logout_redirect_uri=$AUTH_ENDSESSION_URL?post_logout_redirect_uri=$WEBSIRE_URL'

And this template code:

{{ range site.Menus.main }}
  <a href="{{ .URL }}">{{ .Name }}</a>
{{ end }}

I get this:

<a href="./auth/logout?post_logout_redirect_uri=$AUTH_ENDSESSION_URL?post_logout_redirect_uri=$WEBSIRE_URL">foo</a>

I think you need to share the code that renders your menu entries.

6

Ah, thank you! Interesting. We are using the default template from our theme, but I’m wondering if we need to modify it a bit to get a different rendering output.

{{ range .Site.Menus.main }}
			<li class="nav-item mr-4 mb-2 mb-lg-0">
				{{ $active := or ($p.IsMenuCurrent "main" .) ($p.HasMenuCurrent "main" .) }}
				{{ with .Page }}
				{{ $active = or $active ( $.IsDescendant .)  }}
				{{ end }}
				{{ $pre := .Pre }}
				{{ $post := .Post }}
				{{ $url := urls.Parse .URL }}
				{{ $baseurl := urls.Parse $.Site.Params.Baseurl }}
				<a class="nav-link{{if $active }} active{{end}}" href="{{ with .Page }}{{ .RelPermalink }}{{ else }}{{ .URL | relLangURL }}{{ end }}" {{ if ne $url.Host $baseurl.Host }}target="_blank" {{ end }}>{{ with .Pre}}{{ $pre }}{{ end }}<span{{if $active }} class="active"{{end}}>{{ .Name }}</span>{{ with .Post}}{{ $post }}{{ end }}</a>
			</li>
			{{ end }}

I guess the {{ $url := urls.Parse .URL }} could be modifying this before it even goes into the <a href>. This is a hopeful approach though, thank you!

7

If you remove the urls.Parse and leave .URL I think it’ll work as @jmooring says.

8

@Kimberley_Brown Please disregard my previous comment. I swapped the first two characters of the URL when transcribing your screen capture.

With this configuration:

[[menu.main]]
name = 'Sign Out'
url = '/.auth/logout?post_logout_redirect_uri=$AUTH_ENDSESSION_URL?post_logout_redirect_uri=$WEBSITE_URL'

And this template code:

{{ range site.Menus.main }}
  <a href="{{ .URL }}">{{ .Name }}</a>
{{ end }}

I can reproduce the problem:

<a href="/.auth/logoutpost_logout_redirect_uriauth_endsession_urlpost_logout_redirect_uriwebsite_url">Sign Out</a>

The conversion to lowercase and removal of special characters (? $ = ) is triggered by the leading slash. This seems like a bug (@bep please advise), but I may be missing something.

You can work around the current behavior by providing an absolute URL instead:

[[menu.main]]
name = 'Sign Out'
url = 'https://example.org/.auth/logout?post_logout_redirect_uri=$AUTH_ENDSESSION_URL?post_logout_redirect_uri=$WEBSITE_URL'

Ref:
https://github.com/gohugoio/hugo/blob/master/hugolib/site.go#L1468-L1479

9

It’s possible to have the URL be something like below because the website is only determined at runtime:

[[menu.main]]
name = 'Sign Out'
url = '$WEBSITE_URL/.auth/logout?post_logout_redirect_uri=$AUTH_ENDSESSION_URL?post_logout_redirect_uri=$WEBSITE_URL'
10

Yes. Your example produces:

<a href="$WEBSITE_URL/.auth/logout?post_logout_redirect_uri=$AUTH_ENDSESSION_URL?post_logout_redirect_uri=$WEBSITE_URL">Sign Out</a>