[SOLVED] How to Access Front Matter Within Markdown

Is it possible to include variables from the front matter within the markdown content? Example:

---
title: My Blog Post
---
Hello world, this is a post titled {{ .Page.Title }}

If I can do this, it’ll help me avoid redundancy, for example, embedding an image thumbnail into the single post’s rendered content and also making a preview of the image thumbnail in the snippets I’m building for the list view. In general I’d like to “parameterize” my content quite a bit more if possible, so I’d use this in a lot of ways.

One possibility seems to be writing a shortcode. Is that the right answer?

1 Like

I would do it that way; just call the .Param function in there. i.e. .Param "foo" instead of .Params.foo.

1 Like

Thanks for replying. Here’s what I’m trying: I created layouts/shortcodes/param.html with the following contents:

{{ with .Get 0 }}{{ .Param . }}{{ end }}

And then in my content file,

---
thumbnail: thumb.jpg
---
{{< param thumbnail >}}

When I run Hugo, it prints the following output:

template: shortcodes/param.html:1:20: executing “shortcodes/param.html” at <.Param>: can’t evaluate field Param in type string

I’m not sure what that means. The thumbnail isn’t being output into my rendered content file.

Hmm, admittedly I haven’t tried that… so not sure if it will work… try $.Param instead (put that dollar sign). The $ will set a context where that Param should be called.

Try

{{ with .Get 0 }}{{ $.Page.Param . }}{{ end }}

or

{{ with .Get 0 }}{{ index $.Page.Params . }}{{ end }}

With the later, you may get an error if the param has not been set in the Front Matter.

2 Likes

This works for me:

{{ with .Get 0 }}{{ $.Page.Param . }}{{ end }}

I didn’t try the second option. But this works for all parameters I tried, including built-in ones like description and random stuff I just put into the front matter. It also works for parameters that don’t exist in the front matter. Thanks to all who helped!

2 Likes

Brilliant, but have any of you tried using it with a date parameter? And if so, how did you format the date?

Have you searched for « format date » in the doc?

Thanks for responding @regis, If the front matter parameter you’re fetching is a date, how would you format that in the markdown?

{{< param Date.Format "2 jan, 2006" >}} doesn’t work. Of course, one could create a custom shortcode for dates, but I was wondering if the universal shortcode suggested above would suffice.

1 Like

I did not understand you needed to change the date format directly from your markdown.
But in this case why not create your own Shortcode ?

Yep, sorry for the confusion.