Sorry for not being clear enough. I have a shortcode which generates one partial, which is essentially just changing the color of some text to make it stand out and sticking it in a span. This partial also creates an “aside” but sets it to display: none. I am then using jQuery to display the “aside” when I mouseover the “span.” There are cases where I might use the same shortcode twice in one page, and I want to prevent making multiple “asides” when doing so.
I have some static data stored in yaml files. I want to be able to use jQuery to mouse over something and have a div appear with data from those yaml files. Using Hugo am I able to accomplish this without the need to pre-render the contents of the yaml files, while avoiding duplicate renders of the same content (the same static data being referenced twice on a single page, but using a single shared rendering of its yaml)?
Edit: I did see in a different thread that I could read in the static data in JavaScript, so I suppose I could then create the elements by hand in JavaScript. What I’m hoping for is to render a partial using that data instead of having to do it manually on the JavaScript side. Is that doable?
That’s essentially the idea, yeah. I am starting to think that the best way to do it might just be to create a hidden content section and pre-render all the tooltips and then load those from the JavaScript side on mouseover, with the id retrieved from the shortcode.
There are several ways to accomplish this, but I would make the shortcode:
Wrap each word/phrase in a span element
Give each span element an id attribute that contains something linking to the data key
Write the span id to a page store
Then have the baseof template call a partial that iterates through the page store with duplicates removed, then pull from the data file to write a hidden div as needed. That way the partial only renders the markdown in the data file (a) on pages that actually use the shortcode, and (b) once for each tooltip if the word is used multiple times. The div would have a data attribute tied to the data key.
This was interesting, and applicable to other projects, so I created a quick proof-of-concept.
git clone --single-branch -b hugo-forum-topic-46278 https://github.com/jmooring/hugo-testing hugo-forum-topic-46278
cd hugo-forum-topic-46278
hugo server
Thanks for the example! This actually looks like it will be able to do almost exactly what I’m looking for, and has some other clever ideas that I can use.