Search code examples
hugoblogdown

Adding cookie message with the privacy pack to blogdown website


I would like to add a cookie message to inform readers that my blog is using cookies. I am using hugo blogdown with the "tranquilpeak" theme. Unfortunately, this theme doesn't have the privacy pack implemented yet, so I tried to add the infos which are used in the "academic" theme from this site. I added:

privacy_pack = true

to "config.toml". Created the "cookie_consent.html" file with

{{ if .Site.Params.privacy_pack }}
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.0.3/cookieconsent.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.0.3/cookieconsent.min.js">        
</script>
<script>
  window.addEventListener("load", function(){
    window.cookieconsent.initialise({
      "palette": {
    "popup": {
      "background": "#000"
    },
    "button": {
      "background": "#f1d600"
    }
  },
  "content": {
    "message": {{ i18n "cookie_message" | default "This website uses cookies to ensure you get the best experience on our website." }},
    "dismiss": {{ i18n "cookie_dismiss" | default "Got it!" }},
    "link": {{ i18n "cookie_learn" | default "Learn more" }}
       }
})});
    </script>
     {{ end }}

and than I added:

 {{ partial "cookie_consent.html" . }}

to the file "header.html". Unfortunately the cookie statement is not showing up and I don't know where to start searching for the reason. Any help is appreciated.


Solution

  • Thankfully, Maateen pointed out that one can use the Cookie Consent JavaScript plugin.

    You can visit this link and generate your own codes. However, for a quick workaround, you can copy the following codes and paste them at the end of "foot_end.html" of your theme.

    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/cookieconsent@3/build/cookieconsent.min.css" />
    <script src="https://cdn.jsdelivr.net/npm/cookieconsent@3/build/cookieconsent.min.js" data-cfasync="false"></script>
    <script>
    window.cookieconsent.initialise({
      "palette": {
        "popup": {
          "background": "#2D2D39"
        },
        "button": {
          "background": "#14a7d0"
        }
      },
      "theme": "edgeless",
      "position": "bottom-right",
      "content": {
          "message": "This website uses cookies for Google Analytics so that I know how many people are reading the blog and which blogposts are the most popular. The website does not collect any personal data.",
      "href": "https://www.cookiesandyou.com/"
      }
    });
    </script>
    

    To see a demo of this code, you may visit my blog