Multiple sites sharing the same navigation data

support
1

Im hoping there is something I can do, but I have a plan if not…

Problem: I have multiple sites that are all rendered under a single domain using Azure Front Door… and I want to share the header and footer menu data between the sites so that they “look” like they are a single unified story. Right now, the header and footer on the sub-sites are hard coded and need to be manually updated.

Example:

They are both separate Azure Static sites that come from different repos.

Ask: Id like to have some way to at least share the menu data!

Backup Solution: I publish my menu data as https://nkdagility.com/navigation.json and write a header and footer that read it and render the same on every site.

2

It seems like a Hugo Module would be a good fit for this.

1 Like
3

Im not sure how modules help other than to support my backup solution. Are you suggesting that is the way?

I was hoping for something slicker :wink:

4

The module will hold a Hugo configuration file that contains menu entries using Hugo’s standard menu structure.

You can test using this example module:
https://github.com/jmooring/hugo-module-content

After following the directions in the README to add it to your project, add this to your home page template:

<pre>{{ jsonify (dict "indent" "  ") site.Menus.articles }}</pre>
1 Like
5

Ahh I see…

My menu is stored in the pages and not in the hugo.yaml… but I will think on it…

Also: Will the “pageref” work if the page does not exist?

6

Although largely a matter of preference, I find it easier to understand and modify menu structures when the entries are defined in the site config.

7

With this site config:

[[menus.main]]
name = 'Home'
pageRef = '/'
weight = 10

[[menus.main]]
name = 'Does not exist'
pageRef = '/does-not-exist'
weight = 20

And this template code:

{{ with site.Menus.main }}
  <nav class="menu">
    <ul>
      {{ range . }}
        {{ if $.IsMenuCurrent .Menu . }}
          <li class="active"><a aria-current="page" href="{{ .URL }}">{{ .Name }}</a></li>
        {{ else if $.HasMenuCurrent .Menu . }}
          <li class="ancestor"><a aria-current="true" href="{{ .URL }}">{{ .Name }}</a></li>
        {{ else }}
          <li><a href="{{ .URL }}">{{ .Name }}</a></li>
        {{ end }}
      {{ end }}
    </ul>
  </nav>
{{ end }}

The menu will be rendered like this:

<nav class="menu">
  <ul>
    <li class="active"><a aria-current="page" href="/">Home</a></li>
    <li><a href="">Does not exist</a></li> 
  </ul>
</nav>

To avoid rendering an entry when the page doesn’t exist, code defensively. Something like:

{{ with site.Menus.main }}
  <nav class="menu">
    <ul>
      {{ range . }}
        {{ if .URL }}
          {{ if $.IsMenuCurrent .Menu . }}
            <li class="active"><a aria-current="page" href="{{ .URL }}">{{ .Name }}</a></li>
          {{ else if $.HasMenuCurrent .Menu . }}
            <li class="ancestor"><a aria-current="true" href="{{ .URL }}">{{ .Name }}</a></li>
          {{ else }}
            <li><a href="{{ .URL }}">{{ .Name }}</a></li>
          {{ end }}
        {{ end }}
      {{ end }}
    </ul>
  </nav>
{{ end }}
8

I dont think that URL will populate unless the page that it references exists on the site that you run the code on.

Since the pages are on SiteA and the menu needs to be rendered on SiteB, how will Hugo know what URL/Permalink to use on siteB?

(sorry, baby duty and one hand typing)

9

I am confused. I assumed you wanted a shared menu structure because both sites have the same content structure.

10

I dont supose that you have a sugestion for the problem?

I want to share the “navigation data”.

11

OK, so the content exists on Site A, and you want the footer menus of both Site A and Site B to point to the content on Site A.

Try this:

git clone --single-branch -b hugo-forum-topic-52483 https://github.com/jmooring/hugo-testing hugo-forum-topic-52483
cd hugo-forum-topic-52483
hugo server

Note that the rendered menu entries use relative URLs to point to local content.

Now stop the server and do this:

mv content/capabilities content/xx
hugo server

Note that the rendered menu entries now use absolute URLs pointing to content on the site specified by parentSiteBaseURL in the module’s params configuration file.

This is the footer module:
https://github.com/jmooring/hugo-module-footer

Add the footer module to both sites with this in their respective site configuration files:

[[module.imports]]
path = 'github.com/jmooring/hugo-module-footer'

Using the pageRef menu property in the menu configuration enables the .HasMenuCurrent and .IsMenuCurrent methods to work as intended, which is good for both usability and accessibility.

1 Like
12

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