CODEWITHSUNDEEP
netlifynetlify-cmsastrojs
Don_Huan
Don_Huan

Reputation: 85

Single page with Astro and Netlify CMS

I'm trying to create a Single page with astro and netlify cms, in which the admin should be able to add/remove/modify the page through /admin, but I'm struggling with the understanding of the folder structure.

So, as far as I know, I need to specify the collection structure in the config.yml file. Something like this. (See attached file)

Which will create a content.md file. Basically it will contain all the info that was created through /admin.

The problem is that I don't know how and where this content.md file is used. Should I import it manually in the index.astro file or am I wrong? enter image description here

Upvotes: 1

Views: 243

Answers (1)

swithinbank
swithinbank

Reputation: 2069

If you have a Markdown file at src/content/content.md, you will need to import and render it somewhere. It depends which page you want to display this content on, but if you want to show the content on your homepage, this would be src/pages/index.astro.

Here’s an example:

---
// src/pages/index.astro
import { Content, frontmatter } from '../content/content.md';
---

<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>My homepage</title>
  </head>
  <body>
    <h1>{frontmatter.title}</h1>
    <article>
      <Content /> <!-- this will render your Markdown body -->
    </article>
  </body>
</html>

The key things to note here are:

  • The use of the <Content /> component to render the main Markdown content of your Markdown file
  • The use of an expression {frontmatter.title} to access the title field from your Netlify CMS config. Other fields would be available in the same way: {frontmatter.description}, {frontmatter.heroImage} etc.

Upvotes: 0

Related Questions