Hugo static site good tips

hugo-tips.md

Good tips for Hugo Static site generator

Conditionals

Range in a range of set

List 9 files published after the last 6 within the recommandations section.

{{ range first 9 ( after 6 (where site.RegularPages.ByPublishDate.Reverse "Section" "recommandations" )) }}

... some code

{{ end }}

Using front matter parameters

Enumerate items of a slice (array)

{{ with .Params.Foo }}
<p class="typography-overline">Foo items separated by a , </p>
<p>{{ delimit . ", " }}</p>
{{ end }}

or enumerate in a JSON

{
  "tags": [{{ range .Params.Tags }}{{. | jsonify}}{{end}}]
}

or save the first item of an array as a string in a JSON

{
  "tags": "{{ range first 1 .Params.Tags }}{{.}}{{end}}"
}

Test if a slice (array) is not empty

{{ if gt (len .Params.Tags) 0 }} some content {{ end }}

Generate a custom file

Basics - Generate a WebAppManifest

Easy because WebAppManifest is already defined.

In config.toml, set this output:

[outputs]
home = ["HTML", "JSON", "RSS", "WebAppManifest"]

In your /layouts folder, add index.webmanifest with following content:

{
  "name": "{{ .Site.Title }}",
  "short_name": "{{ .Site.Title }}",
  "description": "{{ .Site.Params.Description }}",
  "lang": "{{ .Site.LanguageCode }}",
  "icons": [
    {
      "src": "/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "any maskable"
    },
    {
      "src": "/android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "start_url": "/?utm_source=pwa",
  "scope": "/",
  "orientation": "portrait",
  "display": "minimal-ui",
  "theme_color": "#4150f5",
  "background_color": "#ffffff"
}

After compilation, you'll find a manifest.webmanifest in your public folder.

WIP | Advanced - Generate a custom file

We have to create our own type, I call it API.

In config.toml, set this output:

[outputs]
home = ["HTML", "JSON", "RSS", "WebAppManifest", "API"]

[outputFormats]
  [outputFormats.API]
  name = "API"
  mediaType = "application/json"
  baseName = "api"
  isPlainText = true

Create a file in your layouts folder: api.json with following content.

[ {{- $i := 0 -}}
  {{- range where .Site.RegularPages "Section" "ne" "" -}}
     {{- if not .Params.noSearch -}}
        {{- if gt $i 0 }},{{ end -}}
        {"date":"{{ .Date.Unix }}", "url":"{{ .RelPermalink }}", "title":{{ .Title | jsonify  }}, "summary":{{ .Params.Synonyms | jsonify  }}, "content":{{ .Plain | htmlUnescape | jsonify }}, "tags":[ {{- $t := 0 }}{{- range .Param "tags" -}}{{ if gt $t 0 }},{{ end }}{{ . | jsonify }}{{ $t = add $t 1 }}{{ end -}} ], "section": {{ .Section | jsonify -}} }
        {{- $i = add $i 1 -}}
     {{- end -}}
  {{- end -}} ]

After compilation, you'll find the generated api.json in your public folder.

Do not generate pages of a taxonomy

A taxonomy specialites is only used for building a menu (it may change in a near future).

[taxonomies]
  specialite = "specialites"
  tag = "tags"

[[cascade]]
  [cascade._build]
    list = 'never'
    render = 'never'
  [cascade._target]
    kind = '{taxonomy,term}'
    path = '{/specialites,/specialites/**}'