How can I access kebab-case items in front matter in Hugo?

support
1

Following the YAML convention, I’m using kebab-case for multi-word keys in my YAML front matter. However, I’m running into issues when trying to access these keys in my Hugo templates. For example, if my front matter looks like this:

short-title: "A Short Title"

I would expect to be able to access it in the template like this:

{{ .Params.short-title }}

But this results in a parsing error. How can I correctly access kebab-case keys in my templates?

2

Hyphens are allowed in yaml but are not valid in identifier in Hugo.

You can use one of these alternatives instead:

{{ $.Param "short-title" }}
{{ index .Params "short-title" }}

See Params | Hugo

3

Keep in mind that the first will fallback to the value from site config if not set in front matter: Page.Param

4

Good point @irkode.

I often use {{ $.Param "short-title" }} style because it falls back on the site config. Set a default in site config and then allow front matter to override as needed.

2 Likes
5

I went with camal Case