Frontmatter is a way for Hugo and other static site generators to add metadata to Markdown content. It can be setup to use various markup languages such as YAML, TOML to JSON.
For instance, the frontmatter generated by Notion to Hugo in YAML for this very page looks like this:
---
id: 9338fcba-339d-46b9-a826-c8844478c490
created_time: 2022-04-28T12:23:00.000Z
last_edited_time: 2022-05-17T23:14:00.000Z
archived: false
title: Features
weight: "20"
slug: features
---
Colored callouts with get converted to notice blocks, enclosing the content of the callout in a {{%/* notice */%}} Hugo shortcode producing a HTML <div/> with the classes notices and note, info , tip and warning respectively.
<aside> 📖 Default box (icône vide)
</aside>
<aside> ❓ Quizz
</aside>
<aside> 💡 Info box
</aside>
<aside> ⚠️ Warn box
</aside>
<aside> 🚫 Important box : This is a callout with a red background and a forbidden sign, to indicate that something is wrong.
</aside>
<aside> 👂 This is a tip. (N’existe pas encore)
</aside>
| Code | Actual computed value for this page |
|---|---|
| {{</* param “id” */>}} | {{< param “id” >}} |
| {{</* param “title” */>}} | {{< param “title” >}} |
| {{</* param “slug” */>}} | {{< param “slug” >}} |
Hugo shortcodes can be included in the Notion pages.
For instance, this shortcode has the same effect as a note callout :
{{%/* notice “note” */%}}
I’m a note callout
{{%/* /notice */%}}
as you can see here 👇:
{{% notice “note” %}} I’m a note callout {{% /notice %}}