Mikke.Learns

Making small text fields in the HUGO template editable in the CMS.

January 26th, 2019

When comparing the HUGO template to the typical drag and drop dynamic web generator we use at work, one of my first questions was how to add small text boxes in the design that could be editable in a CMS like Forestry.io.

text-field-hugo

How could I make text boxes like these editable in a CMS and not just in Github, VS Code or other?

After some experimenting and looking at other template code and reading the docs, I learned that HUGO displays content with this code:

{{ range first 10 .Data.Pages }} {{ if eq .Type "post"}} <span>{{ .Date.Format "Mon, Jan 2, 2006" }}</span> <h3><a href="{{ .Permalink }}">{{ .Title }}</a></h3> {{ end }} {{ end }} You first pick a range of posts or pages to display, then you set the type.

My goal was to turn the text at the top of my page from pure HTML to an editable file in Forestry.io.

text-field-hugo-ss

I created a folder called “static” within the content folder, and created a new .md file.

Then I inserted the following code into the template:

{{ range first 1 .Data.Pages }} {{ if eq .Type "static"}} <p>{{ .Content }}</p> {{ end }} {{ end }} I changed the type to “static” and inside the paragraph tags I replaced .Title with .Content. And sure enough, it worked!

I have no idea if that is the recommended way to do it, but I was super exited. It was so fun seeing it appear in Forestry.io and be able to edit it.

text-field-hugo-ss2

Cons

The way I understand it this “text box” is now a post, and so it has an URL that can be accessed. I guess it would show up in a sitemap, and making text boxes this way would quickly generate many unnessesary files and make content management complex and tedious.

And I have no idea how HUGO works with SEO and stuff. But right now I don’t care. I made a editable text box and its awesome! :D