Generating templated pages with sections

support
1

Hey there, so am fairly new to Hugo although not new to static site generation. Still, am finding that I feel like I’m working “against” Hugo rather than with it as if I’m missing something obvious.

What I’m trying to do is let’s say I have a bunch of product pages. Each product page has basically the same template, broken into sections. So that when I generate the site, if I have product A, B, C - for each product A, B, C it will generate a page that has the relevant sections filled in with the content that relates to the respective product.

Reading through the docs, it seems like perhaps a way to go about it would be:

  • Create a page template for a product (and I guess have like a base… archetype for this page, is that the right approach?) I feel like there should be a way to create a generic template for the product page, and then for any products that exist, it uses this to be to master page template?
  • Create sections for each of the sections on that template? So like, Description, Alerts, Support - whatever…?
  • Then, create docs within each section for each product, and tag them with the product name or ID or something so that it knows what to populate each section with per product?

I dunno, this all seems convoluted to me, and am not really understanding the relationship between templates and the content that goes in them? I’ve read through the docs and looked for tutorials, but haven’t found anything that addresses a situation similar to this, but this seems like a really obvious use case for static site generation and that it should be straightforward?

In my head it looks like:

Product template
+—>Section 1
++—> Product Relevant Content for Section 1

  • —> Section 2
    ++ —> Product Relevant Content for Section 2

etc.

And then the final site has X number of instances of that Product template, where X is the number of products. I feel like there’s just one piece missing or something to understand how to fit it all together, or like I’m thinking about it not quite right.

Any help much appreciated!

2

First of all, there will be an update to post archetypes in the next Hugo version. See here: "The Revival of the Archetypes!": Please take it for a spin if you can!

Other than that there are a number of ways to achieve what you need.

Here are a few examples

Say you have a products section under /content/products/ then the template for the list page of your products goes under /layouts/section/products.html . Anything you put in this template will be rendered whenever you visit: http://example.com/products

For markup specific to the individual product pages you can put it inside your /layouts/_default/single.html like this:

{{if eq .Section "products"}}
Markup for product pages goes here
{{ end }}

For special “product sections” (as you call them) you could specify parameters in your products’ front matter like so:

+++
description = "Lorem Ipsum Dolor Si Amet"
barcode = "Some code"
+++

And then in the above section of single.html call them like this:

{{ with .Params.description }}<p class="product-description">{{ . }}</p>{{ end }}

For a support widget the code goes under /layouts/partials/support.html

And in your single.html you will call it like this: {{ partial "support.html" . }}

Then to pass a product’s barcode to your support widget from the specified parameter in your front matter (see above) you can do it like this:

{{ with $.Page.Params.barcode}}<h4>Barcode: {{.}}</h4>{{end}}

Your questions are very broad indeed. And I have addressed some of the ways to achieve what you want. Not all. But you should get a start on how to go about making a product catalog with Hugo.

1 Like
3

Thank you for the great reply! Sorry for being a bit slow - have been away a lot - this is awesome and helps out a lot. Apologies for the broad questions, was still wrapping my head around it, but this helps out a lot. Thx!