Hugo site from html theme(3/3)

For one of our customers we ported a commercial HTML theme to a Hugo site. Main challenge: Make every page widget-based and content manageable for the customer. We use PoppyGo as the CMS for the customer, but how can we enable the customer to add any section widget to any page?


In this guide we share our solution step-by-step.

Page templates from the HTML template

Home/index template

This template will be called in block “main” of the base template. The only thing this template does, it ranging through the sections that are defined in the frontmatter of the index.md file. Each section is defined as a widget partial. For every section, the right widget partial is called based on the widget parameter in the frontmatter.

<!DOCTYPE html>
{{ define "main" }}
    {{ $sections := .Params.sections -}}
    {{ range $sections }}
      {{ if and .widget .enabled }}
          {{ $widget := printf "widgets/%s" .widget }}
          {{ partial $widget . }}
      {{ end }}
    {{ end }}
{{ end }}

Hugo already created the homepage content file: content/_index.md In this file, the content is defined. Here we define the sections of the page.


The content file looks like this:

---
sections:
  - enabled: true
    background_shape: img/main-banner/banner-bg-shape-1.png
    buttons:
      - label: bekijk onze lessen
        link: /cursussen/
      - label: Find out more
        link: '#'
    content: >-
      ### Tekenschool online
      Lorem ipsum
    items:
      - content: >-
          Lorem ipsum
        title: Active Learning
      - content: >-
          Lorem ipsum
        title: Safe Environment
      - content: >-
          Lorem ipsum
        title: Fully Equipped
    main_image: /img/main-banner/education-girl.png
    tagline: 'Tekenen en leren, hand in hand'
    title: Mainbanner
    widget: mainbanner1
  - tagline: Testimonials
    title: Wat zeggen ouders over ons
    widget: testimonials1
---

Notice that there are two sections defined in the yml frontmatter: A banner and a testimonials section. In the actual websites, we created 14 sections like this. The parameters in each section are being used by the widget partial that is set with the widget variable. We will get to creating these widgets later in this guide.

Creating a section partial a.k.a. widget

So how do we get to those widgets? Here we actually start with transforming the HTML from the theme into a Hugo template. Here you see a part of the html of the tenmplate:

If you look at the headerbanner in our html template,

<!-- Start Page Banner -->
<div class="page-banner-area item-bg1">
    <div class="d-table">
        <div class="d-table-cell">
            <div class="container">
                <div class="page-banner-content">
                    <h2>{{.title}}</h2>

                    <span>{{.tagline}}</span>
                    <div>
                      {{ .content | markdownify }}
                    </div>

                    <div class="banner-btn">
                      {{$btnclasses := slice "default-btn" "optional-btn" }}
                      {{ range $index, $value := .buttons}}
                        <a href="{{.link }}" class="{{ index $btnclasses $index }}">
                            {{.label}}
                        </a>
                      {{ end }}
                    </div>

                </div>
            </div>
        </div>
    </div>
    <div class="main-banner-shape">
        <div class="banner-bg-shape">
            <img src="{{.background_shape}}" alt="image">
        </div>
        {{ range $index, $value := .moving_shapes }}
        {{ $class := printf "shape-%s" (string ( add $index 1)) }}
        <div class="{{ $class }}">
            <img src="{{ .url }}" alt="image">
        </div>
        {{ end }}
    </div>
</div>
<!-- End Page Banner -->

List template

Creating a block partial

Single template