Meerdere content types kunnen gebruiken

[lisagjh]

Ik wil mijn welovewebs en learning journal beide als markdown file in astro gebruiken. Om dit te kunnen doen moet ik een content collectie maken en content types definieren.

Bronnen:

• astro: tutorial extend your blog - content collections
• astro: tutorial repo with content collections
• sitepoint: getting started with content collections

[lisagjh]

Ik heb deze bronnen gebruikt om te zorgen dat ik en mijn weloveweb en learning journal als markdown files kan gebruiken, en onderscheid kan maken tussen de twee.

stap 1: content folder

De eerste stap was om een /src/content folder te maken. In deze folder maak je weer een (of meerdere, ligt aan hoeveel soorten "content" je op je site wilt gebruiken) folder. Deze noem je naar het soort content. Ik heb een folder posts voor mijn learning journal, en een folder talks voor de welovewebs.

stap 2: schema's

In de content folder, maak je een file genaamt config.ts. In deze file ga je de schema's voor de content maken. Hier kan je de mijne bekijken.

stap 3: layout

Daarna ga je een layout creëren, als je wilt. Dit doe je in de /src/layouts folder. Ik heb er eentje voor de weloveweb talks, en eentje voor de learning journal posts..

stap 4: gebruiken van de content

Om de content te gebruiken op je pages, moet je eerst een folder maken in de pages folder, met de naam van je soort content. dus:

/ src
- / pages
  - / posts
  - / talks

In deze folders maak je een file genaamd [...slug].astro. Hierin haal je de data op uit de content folder.

Daarna kan je dit gebruiken op je page door de collectie te importeren;

---
import { getCollection } from "astro:content";

const allPosts = await getCollection("talks");
---

En deze in de html aan te roepen:

<ul>
      {
        allPosts.map((talk) => (
          <BlogPost url={`/talks/${talk.slug}`} title={talk.data.title} />
        ))
      }
    </ul>