How to add random quotes to your (Hugo) website footer

To be honest, I love beautiful and brilliant quotes. They can come from anywhere, like smart people, movies, or books. I don’t care where they come from. If they inspire me, I love them. The most beautiful part is that I enjoy collecting and curating them. Usually, I note them down and go through them again whenever I want.

After a while, I thought I could add them here somewhere so they could provide daily inspiration. So I added a footer quote section with the help of simple JavaScript, which shows random available quotes. You can scroll down and see it. It displays my favorite quotes whenever you refresh the page or move to another page. Cool, right?

So here are the details of how I did it.

Here, I am explaining how to add the same feature to a Hugo theme. You can use the same logic for any website. Add the following code to your footer.html to display the quote. The style classes below are from Bootstrap, and the theme used here is Hugo Lightbi. You can change the styles as you like.

// footer.html
  <div class="container mt-3 mb-3">
    <div class="row justify-content-center align-items-center">
      <div class="col-auto text-center">
        <h6 class="footer-quote fw-light mb-0"></h6>
      </div>
    </div>
  </div>

Also, add below javascript script also in the footer, which will randomly load the available quotes in the quoteArray.

// footer.html
<script>
  var quoteContainer = document.getElementsByClassName('footer-quote')[0];
  var quoteArray = [
    "The quote you like ― Author",
    "The another quote you like ― Author",
    "An another quote you like - Author"
  ];
  var selectedQuote = quoteArray[Math.floor(Math.random() * quoteArray.length)];
  quoteContainer.appendChild(document.createTextNode(selectedQuote));
</script>

Try to refresh the page and you will see the quotes changing with every refresh. More the quotes, more the fun. And yes, that’s it. Nothing fancy, right?