Hugo + LoveIt Theme + GDPR & Cookie Policy

I use and like the LoveIt theme for Hugo, it was developed outside EU/UK and they are lucky because they don’t need to show the stupid Cookies/GDPR banner in every website. There are a lot of pages who explain how to add the banner but…no one for the LoveIt Theme. Working around and as a workaround I finally catch how to.

I use iubenda as cookie and consent solution for the GDPR, it works and - for my website without any sort of cookies - it’s enough. Before starting take a look to the Hugo doc who explains how to be GDPR compliant.

My small setup is more or less:

  • Go to cookiesdirective.com website and download the zip/script file, create a cookielaw folder into content, open the zip file and move the two requested files:
1
2
3
4
unzip $cookielaw.zip
mkdir $yourhugo/content/cookielaw/
cp $cookielaw_unzipped/external.js $yourhugo/content/cookielaw/
cp $cookielaw_unzipped/jquery.cookiesdirective.js$yourhugo/content/cookielaw/
  • Create an account (free) on iubenda.com, generate a policy.

  • Move into your Hugo directory and create a new file:

1
vi themes/LoveIt/layouts/partials/head/iubenda.html

and add:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js">
  </script>
  <script src="cookielaw/jquery.cookiesdirective.js">
  </script>
  <script type="text/javascript">
      $(document).ready(function() {
          $.cookiesDirective({
              privacyPolicyUri: 'privacy'
            });
          });
  </script>
<center><a href="//www.iubenda.com/privacy-policy/12345678" class="iubenda-white iub-legal-only iubenda-embed" title="Privacy Policy">Privacy Policy</a>
  <script type="text/javascript">(function (w,d) {var loader = function () {var s = d.createElement("script"), tag = d.getElementsByTagName("script")[0]; s.src = "//cdn.iubenda.com/iubenda.js"; tag.parentNode.in
sertBefore(s,tag);}; if(w.addEventListener){w.addEventListener("load", loader, false);}else if(w.attachEvent){w.attachEvent("onload", loader);}else{w.onload = loader;}})(window, document);
  </script>
</center>

Remember to change the number 12345678 in href="//www.iubenda.com/privacy-policy/12345678 with your iubenda ID.

  • Move into your Hugo directory and edit the file:
1
vi themes/LoveIt/layouts/partials/footer.html

add this line

1
        {{- partial "head/iubenda.html" . -}}

before the end of the file, just before the first /div.

  • Save and run a hugo serve