Passing a Parameter to single.html

Hello people.

I hope you all are doing good.

I am trying to find out some way wherein I can access a variable on the calling page inside the single.html.

I have all my MD files in /content/fruits folder.

And I have working list.html and single.html in layouts/fruits. Both pages are rendering good.

I have a menu bar which says

  • Home - links to the home page - works good, no issues.
  • Fruits - displays a list of fruits and when I click an element on this list, it loads the Fruits’ single.html - works fine, no issues.
  • Colors - This links to a static page which basically displays different color names and each of them is linked to a fruit. For instance, if you click on red, it takes you to the Apple Fruits single.html. And here is what I want to ask something.

On this Apple Fruits page which gets rendered when I click the Red color on the colors page, I want the layout to be different. And to be specific, I want to display the following apart from the changes in the layout (when I say different layout - I only want to display things differently - maybe a Two Columns layout with the image of fruit on the right column and text on the left).

Question is - Is this possible without altering the URL structure (so localhost:1313/fruits/apple) and keeping things similar?

Technically:
I could do this if I could access what page was the /layouts/fruits/single.html called or I could pass a parameter to the /layouts/fruits/single.html.

Is there a way to pass a parameter from the calling page to the single.html and accessing it inside the single.html?

I’ve read this question several times, and I do not understand it.

Can you reword your question? Less is more…

@jmooring

Sorry for the confusing post. Let me try rewording. If any issues still, I can put up an image

Sir, there are two pages - one is a list page for fruits which lists links to all fruits I have on my content. And then there is a colors page (which is static). This lists colors like red, green etc. Each of the color is linked to an individual fruit. For instance, Red is linked to the apple page. Both display the same apple page (using the single.html). (I know I need some more pages in between, but for now, I have linked the Red to display the apple page (using the url localhost:1313/fruits/apple).)

What I would want is when I click Red on the color page, I would like to display an additional paragraph of text on the apple page.

As you can see, in both cases (via the list of fruits or via the click on the Red button), it would be the same single.html that would display the content of apple.md. It is only when it is accessed via the Color->Red Button, I need the extra paragraph to display.

If it was php or other programming language, using variables (Global? oe parameters like Get) could have helped. I could not find anything such on goHugo. I experimented with .Page and $ but both failed.

The STATIC in static site generator means “when the page is on the server Hugo’s job is done”. You want a user interaction on the page. So you can’t do this in Hugo. You do it via JavaScript.

@davidsneighbour

No user interaction. I only need when I load the single.html via a link (other than the list page), I add a few lines of extra text. This will be possible only if I can access the variable on its parent page.

Hence just curious to know if I could ever access a variable declared / created in the parent page. But yes, I do understand that being static, this might not be possible.

You mention -

So you can’t do this in Hugo. You do it via JavaScript.

Can you guide me how. I do not have much idea of JavaScript.

Loading the page via a specific link is “user interaction”… it’s a unfitting term, but what I mean is showing things to people depending on “outer” variables.
If you want to do something along the lines of a “landing page” then you would need to create one content file per landing page. If it’s just a line of “welcome visitor and thank you for finding me on google” you could test the referer or add a parameter on the linking site (the link people click before they end up on your site.

With JavaScript:

somedomain.com/mypage/?comingfrom=somesite
somedomain.com/mypage/?comingfrom=somewhereelse

And you would test the comingfrom-parameter via JS. A sample intro into that procedure is here:

With Landing pages:

somedomain.com/landing/page-from-somesite
somedomain.com/landing/page-from-somewhereelse

and in content

landing/page-from-somesite/index.md
landing/page-from-somewhereelse/index.md

with content according to what you want to show.

1 Like

@davidsneighbour

Thank you for getting me these details. I was searching it on google and did find that Javascript can handle these _GET parameters as well. I mostly have been working with PHP and Python and being a server/backend coder, I do not know much of JavaScript’s capabilities. So thank you again for mentioning the JavaScript’s usability in these scenarios.

I will be trying out this approach once I am off for the day on my regular job and update here again.