Erste Schritte mit Inhaltskollektionen in Astro

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:

<code class="language-javascript">// 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,
};</code>

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:

<code class="language-markdown">---
title: 'Buy!!'
author: 'Jack from Marketing'
date: 2023-07-19
featured: true
language: 'en'
---

# Some Marketing Promo

This is the best product!</code>

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:

<code class="language-javascript">---
import { getCollection } from 'astro:content';
const allDevPosts = await getCollection('devblog');
const allCorporatePosts = await getCollection('corporateblog');
---
{JSON.stringify(allDevPosts)}
{JSON.stringify(allCorporatePosts)}</code>

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:

<code class="language-javascript">import { getCollection } from 'astro:content';

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

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

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

<code class="language-javascript">import { getEntry } from 'astro:content';

const singleEntry = await getEntry('corporateblog', 'pr-article-1');</code>

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:

<code class="language-javascript">// 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,
};</code>

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!