About Markdown Frontmatter
April 19, 2020 • #Markdown
This is one of the essential features you must know if you’re writing your blog in Markdown format.
They live on the top of a Markdown file, must start from line 1 like so:-
---title: This is a titledate: YYYY-MM-DDtags: ["tag A", "tag B", "tag C"]excerpt: description---
The properties and value written within the triple dashes are called frontmatter.
I’m using Gatsby.js’ markdown setup. You may have notice I didn’t write the values in quotation mark. The Gatsby.js’ setup will convert it to “String” in the background.
If you are using other markdown setup. You might need to write like this:-
---title: "This is a title"date: "YYYY-MM-DD"tags: ["tag A", "tag B", "tag C"]excerpt: "description"---
Did you notice the different? You write the value in “String”.
We use frontmatter to set variables and metadata on Markdown page then output to any page we want.
We could use it to display information on our blog index page:-
If you are using any content management system such as Jekyll or Hugo, they have predefined global variables you must follow. You could visit their frontmatter page:-
They both do the same thing but writing format is different. The examples shown above are in JSON format. YAML format will be like so:-
title: "this is title"date: "2020-01-31"tags:- tag A- tag B- tag C
If you are setting up a Markdown blog yourself, you could define your own variables name. It’s depend on the package you use. What frontmatter does is convert YAML or JSON you write to an object.
---custom_variable: "some text"my_address: "address"---
If you pass the props as data, you could access it like so:-
Some example properties people often use:-