Commit 5cf9d387 authored by Jamie Tanna's avatar Jamie Tanna

Add article about Hugo's `.Render` functionality

parent c709fed8
Pipeline #63192174 passed with stages
in 4 minutes and 5 seconds
---
title: "Using Hugo `.Render` to Save Repetition"
description: "Replacing `if`s with `.Render` to save duplication in Hugo templates."
categories:
- blogumentation
- hugo
tags:
- blogumentation
- hugo
- www.jvt.me
license_code: Apache-2.0
license_prose: CC-BY-NC-SA-4.0
date: 2019-05-26T11:15:45+0100
slug: "hugo-render"
image: /img/vendor/hugo-logo.png
---
Up until recently, my Hugo site's templates were full of snippets like:
```go-html-template
{{- if eq .Type "posts" -}}
<meta name="twitter:label1" value="Reading time" />
{{ if eq 1 .ReadingTime }}
<meta name="twitter:data1" value="{{ .ReadingTime }} min" />
{{ else }}
<meta name="twitter:data1" value="{{ .ReadingTime }} mins" />
{{ end }}
{{ end }}
{{- if (eq .Type "events") -}}
{{ if .Params.Start }}
<meta name="twitter:label1" value="Start time" />
<meta name="twitter:data1" value="{{ dateFormat "Mon, 02 Jan 2006 15:04:05 MST" .Params.Start }}" />
{{ end }}
{{ if .Params.Adr }}
<meta name="twitter:label2" value="Address" />
<meta name="twitter:data2" value="{{ .Params.adr.street_address }}, {{ .Params.adr.locality }}, {{ .Params.adr.postal_code }}" />
{{ end }}
{{- end -}}
```
This wasn't really a very scalable solution, as each time I created a new content type, I'd need to add a new case statement.
But recently I learned about Hugo's [`.Render`](https://gohugo.io/functions/render/) functionality, which means I can update my templates to just call to `.Render`:
```diff
<meta name="twitter:card" content="summary" />
<meta name="twitter:title" content="{{ .Title }} &middot; {{ .Site.Title }}" />
<meta name="twitter:description" content="{{ $description }}" />
-
- {{- if eq .Type "posts" -}}
- <meta name="twitter:label1" value="Reading time" />
- {{ if eq 1 .ReadingTime }}
- <meta name="twitter:data1" value="{{ .ReadingTime }} min" />
- {{ else }}
- <meta name="twitter:data1" value="{{ .ReadingTime }} mins" />
- {{ end }}
- {{ end }}
- {{- if (eq .Type "events") -}}
- {{ if .Params.Start }}
- <meta name="twitter:label1" value="Start time" />
- <meta name="twitter:data1" value="{{ dateFormat "Mon, 02 Jan 2006 15:04:05 MST" .Params.Start }}" />
- {{ end }}
- {{ if .Params.Adr }}
- <meta name="twitter:label2" value="Address" />
- <meta name="twitter:data2" value="{{ .Params.adr.street_address }}, {{ .Params.adr.locality }}, {{ .Params.adr.postal_code }}" />
- {{ end }}
- {{- end -}}
<meta name="twitter:image" content="{{ $imageUrl }}" />
+ {{ .Render "sharing-card" }}
```
And then i.e. in `events/sharing-card.html`:
```go-html-template
{{ if .Params.Start }}
<meta name="twitter:label1" value="Start time" />
<meta name="twitter:data1" value="{{ dateFormat "Mon, 02 Jan 2006 15:04:05 MST" .Params.Start }}" />
{{ end }}
{{ if .Params.Adr }}
<meta name="twitter:label2" value="Address" />
<meta name="twitter:data2" value="{{ .Params.adr.street_address }}, {{ .Params.adr.locality }}, {{ .Params.adr.postal_code }}" />
{{ end }}
```
And in `posts/sharing-card.html`:
```go-html-template
<meta name="twitter:label1" value="Reading time" />
{{ if eq 1 .ReadingTime }}
<meta name="twitter:data1" value="{{ .ReadingTime }} min" />
{{ else }}
<meta name="twitter:data1" value="{{ .ReadingTime }} mins" />
{{ end }}
```
As well as that, you can set up a `_default/sharing-card.html`, which will be used if each content type doesn't override it.
---
posts:
- https://www.jvt.me/posts/2019/05/26/hugo-render/
- https://www.jvt.me/posts/2019/05/22/ical-events-hugo/
- https://www.jvt.me/posts/2019/05/19/html-toggle/
- https://www.jvt.me/posts/2019/05/17/now/
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment