Hugo

Nested menu structure

Hello guys,
I have a working recursive menu, but there are two {{ end }} elements that I don’t understand. I can’t remove them - they are required. But I can’t make out - where are their beginnings? Please help. Thanks in advance.

  <div class="menu">      
     <ul>
       <li><a href="{{ .Site.BaseURL }}">{{ .Site.Params.home }}</a></li>	          
     	{{ range .Site.Menus.header }}
       <li>{{ if .HasChildren }}
       		<a href="{{ .URL }}">{{ .Name }}</a>
	         <ul>			            
	               {{ range .Children }}
		            <li>	      	            	            
					         {{ if .HasChildren }}
				              <a href="{{ .URL }}">{{ .Name }}</a>
				            <ul>
				              {{ range .Children }}
					            <li><a href="{{ .URL }}">{{ .Name }}</a></li>
				              {{ end }}
				            </ul>
				            {{ else }}
				            <li><a href="{{ .URL }}">{{ .Name }}</a></li>				          	      	            	            
		            </li>
		            {{ end  }}												        
	         	{{ end }}   <<<=== What is this related to? This is end of what?
	         </ul>
		     {{ else }}
		     <li><a href="{{ .URL }}">{{ .Name }}</a></li>
          		{{ end }}   <<<=== What is this related to? This is end of what?
       </li>
     	{{ end }}
     </ul>
  </div>
...

Hello,

I have broken it up for you like so:

    {{ range .Site.Menus.header }} ===>1st range
       {{ if .HasChildren }} ===>1st condition
       		...	            
	               {{ range .Children }} ===>2nd range
		         ...      	            	            
			    {{ if .HasChildren }} ===>2nd condition
		              ...
				    {{ range .Children }} ===> 3rd range
					...
				    {{ end }} => end of 3rd range
				    ...
				    {{ else }}
				    ...
		            {{ end  }}	===> end of 2nd condition					        
	         	{{ end }}   ===> end of 2nd range
	              ...
		     {{ else }}
		     ...
       {{ end }}   ===> end of 1st condition
       ...
    {{ end }} ===> end of 1st range
     ...

Thank you very much!
I just didn’t know that if-end conditions are to be terminated with {{ end }}!:roll_eyes:
It seems a bit redundant…

You can read up on Conditional Logic in Go Templates over here:

1 Like