Anf?nger der Astro -Inhaltssammlung: Erstellen eines leistungsstarken Inhaltsmodells

Dieser Artikel wird aus dem inzwischen ver?ffentlichten Buch "Entlocking the Power of Astro" auf SitePoint Premium ausgehalten. Wir werden lernen, wie man flexible und skalierbare Inhaltsmodelle mithilfe von Astro's Content Collection -Funktionen erstellt.

Astro verwendet spezielle src/content Ordner, um Inhaltskollektionen zu verwalten. Sie k?nnen Unterordner erstellen, um verschiedene Inhaltssammlungen wie src/content/dev-blog und src/content/corporate-blog zu organisieren.

Jede Inhaltskollektion kann in einer Konfigurationsdatei (z. B. /src/content/config.js oder .ts) konfiguriert werden und verwendet ZOD, um das Sammelmuster zu definieren. ZOD ist ein "Typscript-basiertes Schemaverifizierungstool mit statischer Inferenz", das in Astro integriert wurde.

Folgendes ist ein Konfigurationsbeispiel:

// src/content/config.js
import { z, defineCollection } from 'astro:content';

const devBlogCollection = defineCollection({
  schema: z.object({
    title: z.string(),
    author: z.string().default('The Dev Team'),
    tags: z.array(z.string()),
    date: z.date(),
    draft: z.boolean().default(true),
    description: z.string(),
  }),
});

const corporateBlogCollection = defineCollection({
  schema: z.object({
    title: z.string(),
    author: z.string(),
    date: z.date(),
    featured: z.boolean(),
    language: z.enum(['en', 'es']),
  }),
});

export const collections = {
  devblog: devBlogCollection,
  corporateblog: corporateBlogCollection,
};

Der Code definiert zwei Inhaltskollektionen: "Entwicklerblog" und "Enterprise Blog". Mit der defineCollection -Methode k?nnen Sie Muster für jede Sammlung erstellen.

Markdown-Dateien und Front-End-Inhalt

Die Inhaltskollektion in diesem Tutorial geht davon aus, dass die .md -Datei Front-End-Inhalte enth?lt, die dem in der Konfigurationsdatei angegebenen Muster übereinstimmen. Zum Beispiel k?nnte ein "Firmenblog" -Aktel wie folgt aussehen:

---
title: 'Buy!!'
author: 'Jack from Marketing'
date: 2023-07-19
featured: true
language: 'en'
---

# Some Marketing Promo

This is the best product!

Slug -Erzeugung

Astro generiert automatisch Slugs für Artikel basierend auf Dateinamen. Zum Beispiel ist der Schnecken von first-post.md first-post. Wenn das Feld slug im Front-End-Inhalt bereitgestellt wird, verwendet Astro eine benutzerdefinierte Schnecke.

Beachten Sie, dass die im export const collections -Objekt angegebenen Eigenschaften mit dem Ordnernamen, in dem sich der Inhalt befindet, übereinstimmen (und diesempfindlich sein muss).

Datenabfrage

Wenn Sie die Markdown -Datei (in src/content/devblog und src/content/corporateblog) und config.js

vorbereiten, k?nnen Sie die Daten in der Sammlung abfragen:

---
import { getCollection } from 'astro:content';
const allDevPosts = await getCollection('devblog');
const allCorporatePosts = await getCollection('corporateblog');
---
{JSON.stringify(allDevPosts)}
{JSON.stringify(allCorporatePosts)}

Die getCollection devblog -Methode kann verwendet werden, um alle Eintr?ge in einem bestimmten Satz abzurufen. Alle Artikel in "Developer Blog" (corporateblog) und "Company Blog" (JSON.stringify()) werden im Beispiel abgerufen. Verwenden Sie

in der Vorlage, um die Originaldaten zurückzugeben.

id enth?lt zus?tzlich zu Front-End-Inhaltsdaten die zurückgegebenen Daten auch slug, body und body Attribute (die

-attribute enthalten Artikelinhalte).

Sie k?nnen auch Entwürfe oder sprachspezifische Artikel filtern, indem Sie alle Artikel iteriert:

import { getCollection } from 'astro:content';

const spanishEntries = await getCollection('corporateblog', ({ data }) => {
  return data.language === 'es';
});

getCollection getEntry Gibt alle Beitr?ge zurück, aber Sie k?nnen auch

verwenden, um einen einzelnen Eintrag in der Sammlung zurückzugeben:

import { getEntry } from 'astro:content';

const singleEntry = await getEntry('corporateblog', 'pr-article-1');

getCollection getEntries vs

W?hrend es zwei M?glichkeiten gibt, mehrere Artikel aus einer Sammlung zurückzugeben, gibt es geringfügige Unterschiede zwischen den beiden. getCollection() ruft eine Liste von Inhaltsersammlungseintr?gen ab, die auf dem Sammlungsnamen basieren, w?hrend getEntries() mehrere Sammlungseintr?ge aus derselben Sammlung abruft.

Beispiele für getEntries() zum Abrufen von Inhalten werden im

angegeben, in dem Referenzentit?ten verwendet werden (z. B. verwandte Artikellisten).

Inhaltsanzeige

render() Jetzt wissen wir, wie Sie Daten abfragen, und lassen Sie uns diskutieren, wie Daten auf formatierte Weise angezeigt werden. Astro bietet eine bequeme Methode namens <content></content> zum Rendern des gesamten Inhalts des Markdowns in die integrierte Astro-Komponente

. Die Art und Weise, wie Sie Inhalte erstellen und anzeigen, h?ngt auch davon ab, ob Sie die statische Site-Generierung oder den Server-Rendering-Modus verwenden.

getStaticPaths() Für die Vorrendern k?nnen Sie

Methode verwenden:

// src/content/config.js
import { z, defineCollection } from 'astro:content';

const devBlogCollection = defineCollection({
  schema: z.object({
    title: z.string(),
    author: z.string().default('The Dev Team'),
    tags: z.array(z.string()),
    date: z.date(),
    draft: z.boolean().default(true),
    description: z.string(),
  }),
});

const corporateBlogCollection = defineCollection({
  schema: z.object({
    title: z.string(),
    author: z.string(),
    date: z.date(),
    featured: z.boolean(),
    language: z.enum(['en', 'es']),
  }),
});

export const collections = {
  devblog: devBlogCollection,
  corporateblog: corporateBlogCollection,
};

getStaticPaths() wird im Code Astro.props verwendet. Verlassen Sie sich dann auf id, um den Eintrag zu erfassen, ein Objekt, das die Methoden der Metadaten, slug, render() und <content></content> über den Eintrag enth?lt. Diese Methode ist dafür verantwortlich, den Markdown -Eintrag in der Astro -Vorlage zu HTML zu rendern, die durch Erstellen einer <content></content> -Komponente implementiert wird. Erstaunlicherweise müssen Sie der Vorlage nur die

-Komponente hinzufügen, um den HTML -Inhalt zu sehen.

Das obige ist der detaillierte Inhalt vonErste Schritte mit Inhaltskollektionen in Astro. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!