Hugo Content Management Series

Since I started using Hugo, I made a number of improvements that mean the site is easier to maintain and have added links to static pages in the footer - rather than having them in the menu.

In this article, I’ll show you -

  1. How to add Privacy / Terms page to your footer
  2. How to add Copyright info that needs no annual update
  3. Ideas to extend or reuse this
  4. Considerations for automated testing
  5. How to debug or fix any issues

Your current theme is probably missing links to static pages in the footer - Terms, Privacy, Creative-Commons, Shipping, Contact, etc and you don’t want these pages showing in the menu navbar …

Start by saving the static markdown pages in your content/pages folder

Config changes for static pages

To reduce maintenance and if you ever change the page name … you only have to update the config and not the html.

For re-use, lets create your own params section in your config:

1
2
3
4
[params.mysite]
# footer
websiteterms = "/pages/<page-name>"
privacypolicy = "/pages/<page-name>"

Note

  • you are not linking to the .md file - you’re linking to the page, which Hugo creates.
  • If you ever change your theme, then just copy this block of params over to the new theme.

Extending this - If you want - you could nest these under its own .param and create a loop in the html

Open your themes layout/partial/footer.html

It’s your choice where you want to put this code - but start by copy / pasting inline with any copyright info.

<span class="static"><a href="{{ .Site.Params.mysite.privacypolicy }}">Privacy</a> |
<a href="{{ .Site.Params.websiteterms }}">Terms of Use</a></span>

Note

  • this fetches the saved pages from the config [param]
  • there is no carriage return or line break but I used the | as a separator
  • the span element is used for Automated Testing - something you might consider

An alternative approach is to use …

<a href="{{ with .Site.Params.mysite.websiteterms }} {{ . }}{{ end }}">Terms of Use</a>

The with helps to change the context of the {{ . }}

Isn’t it annoying - on the first of January each year having to update you copyright info. What about changing that so the year is always up to date.

Here’s an option for a text like

Copyright © 2000 - 2020 Author Name.

Some theme developers try to be helpful and have a copyright info in your config like this:

Copyright = "Copyright &copy; 2020"

If you dont want a Start Year … you dont have to do this step.

Let’s change this around … update the [params.mysite] with

1
2
3
4
5
[params.mysite]
# footer
websiteterms = "/pages/<page-name>"
privacypolicy = "/pages/<page-name>"
copystart = "2000" 

Obviously change the year to whatever you want

Extending this … you could use the same approach to write something like ‘I have been blogging since 2000’

Open your themes layout/partial/footer.html

Most themes already have Copyright info. So you just need to change the code.

Comment out any existing text - if you want to compare it …

this was existing text in my theme {{ .Site.Params.copyright.notice | markdownify }}</p>

Add in this one line

<span class="copy">Copyright &copy; {{ .Site.Params.mysite.copystart }} - {{ dateFormat "2006" now }} {{ .Site.Params.author }}.</span>

Note

  • This fetches the copystart param that is saved in the site config.
  • <span> element is a consideration for automated testing.

An alternative - please try this if you problems showing the wrong content:

Copyright &copy; {{ with .Site.Params.mysite.copystart }} {{ . }}{{ end }} - {{ dateFormat "2006" now }} {{ .Site.Params.author }}.

The with helps to change the context of the {{ . }}

Or if you prefer Javascript you can use this to write the current year - but why do that when Hugo can. <script>document.write(new Date().getFullYear())</script>

Test Driven Development

If you are thinking of Automated Testing with Selenium or other tools … be sure to wrap any custom code with class elements that make them easy to identify for testing.

Test and Go …

So now …

  1. Save the file
  2. Commit your changes to Git
  3. Run Hugo server -D and browse to http://Localhost to check every thing is work fine

If you find a problem

  • check the error - if it didn’t find the [params.mysite] check they are in the right part of your config and not nested under another set of params
  • check have you applied the right class for the elements (view-source)

Did you find this helpful? Please let me know

Subscribe to my Newsletter
Email: First Name:

We use Mailchimp as our marketing platform. By clicking below to subscribe, you acknowledge that your information will be transferred to Mailchimp for processing. Learn more about Mailchimp's privacy practices here.