CODEWITHSUNDEEP
templateshugo
moddayjob
moddayjob

Reputation: 708

In HUGO - How to read query parameters in template

I have a hugo template and I am giving hyperlink from one page to another page. I would like to pass some query parameters in the URL and read them in the template.

/list-page/?{{(querify "somekey" "value")}}

what I want to do is to check in /list-page/ if there is a ?somekey=value in the url. if there is, I would like to filter the list according to the parameter passed. If not, I will display the entire list. If it is not clear, I can try to explain more. I have tried {{ $value := (.Get "value") }} But this brakes it. it does not work at all. I am using Hugo Static Site Generator v0.55.6 Any help is appreciated.

Upvotes: 4

Views: 2266

Answers (1)

Andrei Mustata
Andrei Mustata

Reputation: 1133

?key1=value1&key2=value2 are extra parameters provided to the Web server. Those parameters are a list of key/value pairs separated with the & symbol. The Web server can use those parameters to do extra stuff before returning the resource. Each Web server has its own rules regarding parameters, and the only reliable way to know if a specific Web server is handling parameters is by asking the Web server owner.

MDN, Deeper dive into URLs

That means that when the HTTP server receives your request of GET /list-page/?somekey=value, it is well aware of that special suffix, and in your server application you can serve different responses depending on that parameter.

In your case, you are using something like nginx, or Apache httpd to serve your static HTML files that you've built way ahead of the request. So, you don't have an actual application to instruct it to treat that request differently.

What happens is that your HTTP server just gets that file (/list-page/index.html) and serves it to your browser. It doesn't redirect from /list-page/?somekey=somevalue to /list-page/, so the URL in your browser still has the search param attached, but it's still the one static page that you've generated.

At this point, you can still use JavaScript (URLSearchParams) to interpret those params and to modify the page on the spot. This means that you're adding complexity to your Hugo site, as well as more load on the clients (browsers). If you really need those query strings and Hugo, this is the way to go.

Alternatively, my suggestion is to try and generate all the possible /list-page/ variations and giving them proper names, e.g. /list-page/category-1, /list-page/category-1-with-fizz. This depends on your use case, how many pages you have, and how often they change. Hugo is quite fast at compiling templates and creating lots of pages, so I wouldn't worry about that. The result would be, indeed, that you have many more files in your output, but that's how it goes with static site generators, and serving static HTML is cheaper than an actual application server, e.g. PHP, NodeJS.

Upvotes: 7

Related Questions