Best approach to create columns for links in footer

support
1

Hi folks,

I would like to replicate this footer:

The user should be able to create multiple columns whose order can be defined. All columns should have a title. All links within a column should have a fixed order.

Hugo’s menu feature wouldn’t work since it supports only a single entry and not a whole column with multiple entries.

My next thought was the usage of the data folder. But how would I structure such a menu?

2

I think you could use the menu feature, if you think of it more like a custom param. Like menu = "col1footer" and menu = "col2footer", etc.
The user only has to decide what column each item needed to fall under.

Your markup could have something like:

<div class="footer-col-1">
<ul class="footer-menu">
  {{ $currentNode := . }}
  {{ range .Site.Menus.col1footer }}
    <li><a>...
  {{ end }}
</ul>
</div>
<div class="footer-col-2">
...
</div>
1 Like
3

Hello @justrjlewis,

your approach work. The menu names can be stored in another array that would allow me to range of them:

<footer>
{{ range .Site.Params.footer_menus }}
    <ul> 
       {{ range .Site.Menus . }}
           <a href="{{ .URL }}">{{ .Name }}</a>
       {{ end }}
    </ul>
{{ end }}
</footer>

But I still need to store the column name somewhere. Currently, I’m porting the theme of Peach. Therefore, I try to minize the required markup was good as possible.

4

Hmmm…You could build it into a section/content type so that you could create an archetype to include the weight/menu information in the front matter. You wouldn’t have to know the type(s) beforehand, because the user can define the type in the front matter and you can use that to populate the heading.

Example: predefined sections are: column1 and column2.
User installs the theme and runs hugo new column1/article1.html. The front matter from the archetype could be something like:

+++
name = "" #this the name that will show up in the menu
title = ""  #this populates the masthead of the page 
weight = 1 #sorting for the pages in the column 
type = "" #the type of the first page in the column(weight 1) determines the heading text of column 1, i.e. "about", "projects", etc.
+++

This can probably be pared down, but I figured it would provide a more doable user workflow with minimal instruction.