Custom markdown frontmatter

Netlify CMS
,
1

Is it possible to add the following frontmatter to all my markdown files in Netlify CMS?

setup: |
  import ...

I tried this in my config.yml, but it didn’t work.

- {
          label: "Setup",
          name: "setup",
          widget: "hidden",
          default:
          "|
          import STS from '@components/STS'"",
        }
2

You could register a postSave event and use javascript to set the value to skip validation etc. Haven’t tried it before but it just might work:

3

Thanks @tomrutgers, that might work to update my setup field. Haven’t used netlify-cms or netlify-cms-app before. Is this how I might go about implementing that?

\\public\admin\index.html
...

<script>
    import CMS from "netlify-cms-app"
    CMS.registerEventListener({
        name: "postSave",
        handler: ({entry}) => {
            const setup = entry.get("data").get("setup");
            return entry.get("data").set("setup", "|\nimport STS from \'@components/STS\';");
        }
    });
</script>
5

Hi @itsjustmyron

I found a couple of articles that say the beginning and end of your frontmatter code block needs to be enclosed in triple dashes --- if YAML or triple semicolons ;;; if JSON.

I’m not seeing the triple dashes in the code block you pasted. Did you just not copy/paste them or are they indeed not there?

Here are the articles I found for reference:

https://middlemanapp.com/basics/frontmatter/#yaml-frontmatter

I hope that’s helpful!

6

@elden, yes I only included the frontmatter field that I wanted to generate through Netlify CMS. My (working) frontmatter looks like this (I use Astro).

---
layout: src/layouts/PostLayout.astro
title: Post title
date: 2022-07-03T17:14:50.190Z
description: Post description
categories:
  - post
img: images/uploads/post.png
setup: |
  import STS from '@components/STS';
---

Also, my full index.html file (public/admin/index.html) looks like this:

<head>
    <meta charset="utf-8"/>
    <meta content="width=device-width, initial-scale=1.0" name="viewport"/>
    <link href="/admin/config.yml" rel="cms-config-url" type="text/yaml"/>
    <!-- Netlify CMS -->
    <script src="https://identity.netlify.com/v1/netlify-identity-widget.js" type="text/javascript"></script>
    <title>Content Manager</title>
</head>
<body>
    <!-- Include the script that builds the page and powers Netlify CMS -->
    <script src="https://unpkg.com/netlify-cms@2.10.192/dist/netlify-cms.js"></script>
    <script>
        import CMS from "netlify-cms"
        CMS.registerEventListener({
            name: "postSave",
            handler: ({entry}) => {
                return entry.get("data").set("setup", "|\nimport STS from \'@components/STS\';");
            }
        });
    </script>
</body>
</body>
7

I fixed this by moving the line break to the end.

- {
        label: "Setup",
        name: "setup",
        widget: "hidden",
        default: "import STS from '@components/STS';\n"
   }
1 Like
8

Thanks for coming back and letting us know! Glad everything is working now. Happy building :rocket: