HUGO

Shortcodes (or an alternative) in front matter

My site has multiple archetypes, including “events” and “ingredients”.

The front matter of an “ingredient” has some variables and looks like this:

---

draft: false

name: "apple A"
category: "fruit"
color: "red"

---

The front matter of an “event” is more complex and looks like this:

---

draft: true

details:
  - specials:
      recipes:
        - recipe:
            company: "Foodtruck ABC"
            chef: "John"
            name: "Pancake"
            short_description: "The winning pancake with [[apple a]]!"
        - recipe:
            company: "Foodtruck XYZ"
            chef: "Sarah"
            name: "Cupcake"
            short_description: "Best cupcakes with [[apple a]], [[mango]] and [[chocolate]]"
---

Each word in details.specials.recipes.recipe.short_description that starts with specific characters [[ and ends with ]] reflects the name variable of an “ingredient” post.

In the front-end, this should result in the following HTML. Please note the:

  1. working hyperlink to the related “ingredient” (“apple a” in this example)
  2. values “fruit” and “red” from the page variable category and color.
<div>
  <h1>Pancake</h1>
  <div>by John</div>
  <div>The winning pancake with <a href="https://site.com/ingredients/apple-a"><div>category: fruit</div><div>color: red</div>apple a</a>!</div>
</div>

<div>
  <h1>Cupcake</h1>
  <div>by Sarah</div>
  <div>Best cupcakes with <a href="https://site.com/ingredients/apple-a"><div>category: fruit</div><div>color: red</div>apple a</a>, <a href="https://site.com/ingredients/mango"><div>category: fruit</div><div>color: green</div>mango</a> and <a href="https://site.com/ingredients/chocolate"><div>category: snacks</div><div>color: brown</div>chocolate</a>!</div>
</div>

In many topics I’ve read that it is not possible to use shortcodes in front matter, so that is why I try to achieve this with special characters like [[ and ]]. Is this possible?

You can use the short_description in your template with the usual string functions like findRE, substr, ìnandreplace`. Does that help?

However, it is not clear what you want to achieve in the 2nd case with three parameters in the short_description. Generate three links?

Thank you @chrillek for your reaction.

However, it is not clear what you want to achieve in the 2nd case with three parameters in the short_description . Generate three links?

Yes, that is correct! I’ve updated the last codeblock as an example my first post accordingly.

You can also split your content into main content and short description. Then you can use the shortcodes.