How to add array field to collections in Hugo

Netlify CMS
1

Hello everyone, I just finished setting up NetlifyCMS on my blog. Thanks to @talves and @tomrutgers :slight_smile:

One thing I haven’t been able to set up is the tags field in collections.
In Hugo, there’s a collection for tags which usually is in this format

tags: ["netlify", "netlifyCMS", "CMS"]

I tried:

- {label: "Tags", name: "tags", widget: "array"}

but it didn’t work.
I wanted to ask if there’s a possible way of adding a field that’ll accept an array of tags?
Thank you.

2

I also tried:

- {label: "Tags", name: "tags", widget: "text"}

I then passed in ["netlify", "netlifyCMS", "CMS"] in the text field.

It almost worked, but the output was an array string '[ "C++", "VsCode", "Compiler" ]'

3

Try the list widget:
- {label: "Tags", name: "tags", widget: "list"}

3 Likes
4

I’ve tried this, but it still dosen’t solve it.
It arranges the tags in a list instead.

I even tried the text widget, but it made;
'["javascript", "PWA", "web apps"]' instead of:

["javascript", "PWA", "web apps"]

5

In yml or frontmatter, a list is exactly the same thing as an array, except for the syntax flavor of course, which your front-end doesn’t care about.

tags: ["javascript", "PWA", "web apps"]

Looks like this in yml:

tags: 
  - javascript
  - PWA
  - web apps

As long as you use field instead of fields you get an array of strings instead of an array of objects.

- label: "Tags"
  name: "tags"
  widget: "list"
  field: {name: tag, label: Tag, widget: string}
1 Like
6

You can also use the select widget, if you prefer that UI:

- label: "Tags"
  name: "tags"
  widget: "select"
  multiple: true
  options: ["javascript", "PWA", "web apps"]