Add random fun fact on every re-load

Support
1

Just found Zola and I love it! I want to add a fun fact in the lead class (adidoks theme) which shows a different fun fact on every reload.

For reference, I have this set up with simple HTML and Javascript on my current non-zola personal site. https://jcarpinelli.dev

Right now, I’m trying to do this in HTML through <script> tags…

<div class="wrap container" role="document">
  <div class="content">
    <section class="section container-fluid mt-n3 pb-3">
      <div class="row justify-content-center">
        <div class="col-lg-12 text-center">
          <h1 class="mt-0">{{ section.title | default(value="Joe(y) Carpinelli") }}</h1>
          <div class="lead">
            <script>
              let facts = [
                'Our planet\'s sky glows blue!',
                'The Vatican has more popes per capita than anywhere else.                                       ',
                'There are more trees on Earth than stars in the Milky Way.                                      ',
                'Humans consume around 12 billion pounds of coffee per year.                                     ',
                'Earth is the only planet in our solar system with rainbows.                                     ',
                'Modern transisters are smaller than the wavelength of visible light.                            ',
                'Computers use enough power to throw two pounds across the room every second.',
                'That shooting star you saw could\'ve been astronaut poop!                                       ',
                'In 2008, Norway knighted a penguin named Nils Olav.                                             ',
                'The most money ever paid for a cow in an auction was $1.3 million.                              ',
                'Every year, about 98% of the atoms in your body are replaced.                                   ',
                'Elephants are the only mammals that can\'t jump. They are also the only mammals with four knees.',
                'American car horns beep in the tone of F.',
                'Cats can hear ultrasound.',
                'The Neanderthal\'s brain was bigger than yours. Sorry.',
                '1 in 5,000 north Atlantic lobsters are born bright blue.'
              ];
              let fact = facts[Math.floor(Math.random() * facts.length)];
              document.querySelector("#lead").innerHTML = "<p>" + fact + "</p>";
            </script>
          </div>
        </div>
        <div class="col-lg-9 col-xl-8 text-center">
          <a class="btn btn-primary btn-lg px-4 mb-2" href="{{ get_url(path=section.extra.url | default(value="/")) | safe }}" role="button">{{ section.extra.url_button | default(value="Get started") }}</a>
          <p class="meta">{{ section.extra.repo_license | default(value="MIT")}} <a href="{{ section.extra.repo_url | default(value="https://github.com/aaranxu/adidoks") | safe }}">{{ section.extra.repo_version | default(value="0.1.0") }}</a></p>
        </div>
      </div>
    </section>
  </div>
</div>

I have two questions about this.

  1. Can I instead change content randomly in Zola through shortcakes or macros?
  2. The HTML code isn’t working (document.querySelector returns null no matter what class name I give it…), does anyone see any glaring reason why?
1 Like
2

Question 1 is solved by adding id="lead" to the <div section for "lead".

Question 2 still stands!

3

That’s really more of a JS question. In practice you have a lead class but your select is an id.
You also want to wait until the document is loaded:

            <script>
              document.addEventListener("DOMContentLoaded", function() { 
              let facts = [
                'Our planet\'s sky glows blue!',
                'The Vatican has more popes per capita than anywhere else.                                       ',
                'There are more trees on Earth than stars in the Milky Way.                                      ',
                'Humans consume around 12 billion pounds of coffee per year.                                     ',
                'Earth is the only planet in our solar system with rainbows.                                     ',
                'Modern transisters are smaller than the wavelength of visible light.                            ',
                'Computers use enough power to throw two pounds across the room every second.',
                'That shooting star you saw could\'ve been astronaut poop!                                       ',
                'In 2008, Norway knighted a penguin named Nils Olav.                                             ',
                'The most money ever paid for a cow in an auction was $1.3 million.                              ',
                'Every year, about 98% of the atoms in your body are replaced.                                   ',
                'Elephants are the only mammals that can\'t jump. They are also the only mammals with four knees.',
                'American car horns beep in the tone of F.',
                'Cats can hear ultrasound.',
                'The Neanderthal\'s brain was bigger than yours. Sorry.',
                '1 in 5,000 north Atlantic lobsters are born bright blue.'
              ];
              let fact = facts[Math.floor(Math.random() * facts.length)];
                console.log(document);
              document.querySelector(".lead").innerHTML = "<p>" + fact + "</p>";
              });
            </script>
4

Thanks! Is there any way to embed JS in the Zola {{ ... }} syntax?

5

You can embed JS in zola the same as you would do anything else. The {{ }} syntax goes around variables or expressions. They’re basically things that get generated at the moment zola is building that page. If you already know how your JS will go you can just write it directly in the template, shortcode, or macro that you’re using. If you need part of your JS to change based on some variables, eg title of the page or whatever, then that is a good opportunity to use {{}}. Hope that helps.