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 -
- How to add Privacy / Terms page to your footer
- How to add Copyright info that needs no annual update
- Ideas to extend or reuse this
- Considerations for automated testing
- 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:
|
|
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
|
|
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 © {{ .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 …
- Save the file
- Commit your changes to Git
- 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)
Contact me today to find out how I can help you.