Showing random text from data file upon page load

support
1

hello, i am quite new to posting, so i hope that i get this right,

i have a data file, data/poemes_aleatoires/poemes.toml, that contains a list of “poemes” like this :

[[poeme]]
texte = "1"

[[poeme]]
texte = "2"

[[poeme]]
texte = "3"

and so on…

i would like a page, content/poemes/test.md, to randomly show one of the texte from poemes.toml upon page load.

so i made a template for test.md, which is layouts/poemes/test.html.html that contains those lines inside body:

{{ range .Site.Data.poemes_aleatoires.poemes.poeme | shuffle | first 1 }}
          <label>
            {{.texte}}<br>
          </label>
        {{ end }}

the problem is that when building the site with hugo server, i am building it locally, the texte shown is randomly picked, but i cannot manage to have an other random pick upon page reload…

i tried stuff like window.onload and have experimented a bit of javascript, but i cannot make it work… i probably misunderstand how those works…

hope i gave enough information and that someone can help me out

in case, the whole code is here https://github.com/demaria-matteo/poemesperdus

thanks

2

Hugo is a static site generator. Meaning that its functions are executed once to publish the HTML (or other Output Formats) of a project.

You need to use JS to show a different text on page load.

Please note that we do not provide support for JS techniques in this forum so you need to search elsewhere for a way to do what you need.

2 Likes
3

thank for your answer,

just a precision, a possible JS solution should work inside a Hugo-based website ?

4

Hugo makes no assumptions regarding JavaScript or CSS. You can use whatever suits your purposes.

1 Like
5

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.