Show Copyright and Privacy page links in your footer

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

Add Privacy and Terms page to footer

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

Footer Layout Changes

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 {{ . }}

Add Copyright Info to footer

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.

Config changes for Copyright ©

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

Copyright = "Copyright © 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’

Footer Layout Changes Copyright

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 © {{ 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)

Meet the author

Damien Saunders
An experienced management consultant and business leader interested in digital transformation, product centred design and scaled agile. If I'm not writing about living with UCTD (an autoimmune disease), I'm probably listening to music, reading a book or learning more about wine.
Find our more about me.