Using Hugo blocks to switch Templates

support
1

I am building a site similar to this one with the sidebar on the left and all the other content on the right.

screenshot-personal-web_huc5582daae3a9ecb08d93d04687e83cfe_1804275_750x500_fill_catmullrom_top_2.png750×500

I found the code utilized for this and similar sites a little confusing and so I thought what if I used blocks, instead.

I got into Hugo years back coming from the Django framework, but I haven’t been active with anything web development for the past year or 2. What I found easy about Django’s blocks was that it was easy for me to control how and when the blocks come into play with control of the render code. Hypothetically, for the kind of website I want, I could have a block for home-page content, and a block for blog-post content along with more control with how and when the blocks get utilized. With Hugo blocks were a bit confusing because I was not totally sure about the rules…but that was then, and I don’t know how far different either of the templates are today.

Lets suppose my home template looks like this:

{{ partial "site-header.html" . }} <!-- Incorporates sidebar section -->

        <main class="right-side-content">

            {{ block "main" . }}

            {{ end }}

        </main>
      
{{ partial "site-footer.html" . }}

If I wanted to have a base right-side as a list of blog posts, with a change to a blog-post template and an about-me section, is it possible to incorporate using Hugo blocks? If so, how? Thanks for the help.

2

Yep, it’s possible. You would create a template for each:

  • Regular single page: layouts/_default/single.html
  • Blog single page: layouts/blog/single.html
  • Blog list: layouts/blog/list.html

Then define your block in each template

2 Likes