[SOLVED] How to access the front matter in a docusaurus website?

How to access the front matter in a docusaurus website?

I am working on a docusaurus based website which has front matter available in the following format.

---
id: introduction
title: Welcome to Rowy
slug: /
---

I am integrating Cusdis (an open source commment system plugin) and I wish to consume the page id and title front matter. How can I do that?

I tried using a variety of methods to consume the front matter, for example {props. } for the following code.

<head>
  <script async defer src="https://cusdis.com/js/cusdis.es.js"></script>
</head>

<div id="cusdis"
  data-host="https://cusdis.com"
  data-app-id="**********************************"
  data-page-id= {props.id}
  data-page-url="http://docs.rowy.io"
  data-page-title= {props.title}
  data-theme="auto"
></div>

Here, {props.id} is being read as the Introduction which is the value of {props.id}, which is weird. Would love some guidance.

Solution

Frontmatter can be accessed via the following within a Markdown page, so I'm assuming it could work in your plugin.

<div>
{frontMatter.fieldname}
</div>